Sprachen

SEO für JavaScript-Frameworks

SEO für JavaScript-Frameworks — React, Next.js, Vue, Nuxt, Angular, Svelte und Astro. Wie der Rendering-Modus (SSR, SSG, CSR) bestimmt, was Google indexieren kann, und welche Frameworks SEO standardmäßig am besten unterstützen.

Erstveröffentlicht: 26. Juni 2026 · Zuletzt aktualisiert: 22. Aug. 2026 · Fortgeschritten
Sprachen
AIVerfasst vonAI v2

Bei SEO für JavaScript-Frameworks kommt es auf den Rendering-Modus an: SSG und SSR liefern Googlebot vorab erstelltes HTML; CSR erfordert die Ausführung von JavaScript, die erfolgreich sein kann oder auch nicht. Next.js und Nuxt bieten die umfassendste integrierte SEO-Unterstützung (SSR, SSG, ISR, Metadaten-APIs). Reines React und Vue im CSR-Modus sind für SEO am riskantesten. Die Islands-Architektur von Astro ist standardmäßig hervorragend für SEO. Angular benötigt SSR über @angular/ssr (früher Angular Universal) für zuverlässige Indexierung.

TL;DR — Technisch geht es bei SEO für JS-Frameworks um: (1) die Rendering-Architektur für die anfängliche HTML-Nutzlast, (2) das Einfügen von Metadaten in den <head>, bevor die Antwort gesendet wird, (3) den Umgang des Frameworks mit Hydration und Link-Erkennung und (4) die Cache-Veraltung bei ISR. Next.js verfügt über die vollständigsten integrierten SEO-Tools (Metadata API, integriertes app/sitemap.ts, Bildoptimierung). Astro ist aufgrund seiner Architektur standardmäßig am SEO-sichersten.

Rendering-Modus, Metadaten-API und ISR-Unterstützung nach Framework

Framework-Funktionen und Standardeinstellungen ändern sich mit der Version; überprüfen Sie die Angaben in der offiziellen Dokumentation jedes Frameworks. Evidence for this claim Primary standard or official documentation supporting the adjacent article claim. Scope: Protocol semantics and Search behavior are kept separate; no indexing, ranking, or migration-timing guarantee is inferred. Confidence: high · Verified: web.dev: Rendering on the Web Kein Rendering-Modus garantiert Indexierung oder Rankings. Evidence for this claim Primary standard or official documentation supporting the adjacent article claim. Scope: Protocol semantics and Search behavior are kept separate; no indexing, ranking, or migration-timing guarantee is inferred. Confidence: high · Verified: Google: JavaScript SEO basics Wenn Sie Frameworks für eine Entscheidung vergleichen, testen Sie für jeden Kandidaten dieselben Routen, Inhalte, das Bereitstellungsziel und die Tools — ein Benchmark, der eines davon austauscht, misst nicht das Framework, sondern den Unterschied in der Konfiguration.

FrameworkStandard-RenderingIntegrierte Metadaten-APISSR-/SSG-UnterstützungSEO-Unterstützung im Ökosystem
AstroSSG (Islands)Ja (<head> in .astro-Dateien, Content Collections für strukturierte Daten)BeideStark
Next.jsSSR/SSG (konfigurierbar)Ja (Metadata API im App Router)Beide + ISRHervorragend
NuxtSSR standardmäßigJa (useHead, useSeoMeta)Beide + ISRHervorragend
SvelteKitSSR standardmäßigJa (svelte:head)BeideGut
React Router (Framework-Modus)SSR standardmäßigJa (meta-Export)SSR + DeferredGut
AngularCSR standardmäßigÜber Angular-Meta-/Title-ServicesÜber @angular/ssrMittelmäßig
React (pur)CSRManuell (react-helmet-async; react-helmet wird nicht mehr gepflegt)Über Next.js/GatsbyHängt vom Wrapper ab
Vue (pur)CSRManuell (@unhead/vue; vue-meta wird nicht mehr gepflegt)Über NuxtHängt vom Wrapper ab

Remix v2 und React Router v7 wurden zusammengeführt — Remixes Server-Rendering- und Datenlade-Modell wird nun als „Framework-Modus“ von React Router ausgeliefert, und das ist der stabile Upgrade-Pfad für Remix-v2-Apps. Remix 3 ist ein separates, experimentelles React-loses Rewrite (Beta), nicht der Nachfolger von Remix v2 — behandeln Sie es nicht als direkt einsetzbare SSR-Option für eine React-Codebasis.

Zeitpunkt des Metadaten-Einfügens — Metadaten (<title>, <meta>) müssen in der Serverantwort enthalten sein und dürfen nicht erst nach dem Laden der Seite durch JavaScript hinzugefügt werden. Next.js Metadata API, Nuxts useSeoMeta und Astrós <head>-Komponente erledigen das korrekt. document.title = '...' oder React Helmet im CSR-Modus nicht — dies läuft, nachdem das initiale HTML ausgeliefert wurde.

Link-Erkennung — Googlebot entdeckt Links, indem es HTML analysiert. Durch JavaScript hinzugefügte Links (onClick, dynamisches Routing ohne <a>-Tags) werden möglicherweise nicht entdeckt. Verwenden Sie für wichtige Navigation echte <a href>-Elemente.

Hydration und doppelte Inhalte — Wenn SSR und CSR unterschiedliche Inhalte rendern (Hydration-Mismatch), können indexierte Inhalte entstehen, die nicht dem entsprechen, was Nutzer sehen. Testen Sie in der Browserkonsole auf Hydration-Fehler.

Soft-404s — Clientseitige Router können unbemerkt eine „Seite nicht gefunden“-Oberfläche rendern, während sie den HTTP-Status 200 zurückgeben. Suchmaschinen indexieren diese als echte Seiten. Stellen Sie sicher, dass Ihre 404-Seite tatsächlich den Status 404 zurückgibt und serverseitige Weiterleitungen 301.

ISR-Cache-Invalidierung — In ISR-Setups von Next.js und Nuxt können Crawlern während des Revalidierungsfensters veraltete Seiten ausgeliefert werden. Legen Sie ein zeitbasiertes revalidate-Intervall fest und kombinieren Sie es bei Inhalten, die sich nach einem von Ihnen nicht kontrollierten Zeitplan ändern (zum Beispiel beim Speichern in einem CMS), mit einer ereignisgesteuerten Revalidierung, die von einem Webhook-gestützten Route-Handler ausgelöst wird — lesen Sie den Next.js-ISR-Leitfaden für die vollständige API.

// app/blog/[id]/page.tsx — time-based revalidation
export const revalidate = 3600 // re-check this page at most once an hour

// app/api/revalidate/route.ts — on-demand revalidation, called by a CMS webhook
import { revalidatePath } from 'next/cache'
import { NextRequest, NextResponse } from 'next/server'

export async function POST(request: NextRequest) {
  const { path, secret } = await request.json()
  if (secret !== process.env.REVALIDATE_SECRET) {
    return NextResponse.json({ message: 'Invalid secret' }, { status: 401 })
  }
  revalidatePath(path) // e.g. '/blog/1' — next request regenerates fresh HTML
  return NextResponse.json({ revalidated: true })
}

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.