React SEO: Rendering, Metadaten und Links für eine React-App, die rankt

Kurzes Quiz

Ist SEO das Richtige für Sie, und wie fangen Sie an?

Frage 1 von 425%

Suchen Menschen bei Google nach dem, was Sie verkaufen?

Ja, ich denke schonNein, es ist neu oder sehr speziellWeiß ich nicht

React SEO bedeutet, eine React-Anwendung für Suchmaschinen und KI-Assistenten crawlbar, indexierbar und verständlich zu machen. React selbst ist neutral: Die Probleme entstehen, wenn alles im Browser gerendert wird. Google bestätigt in den Grundlagen zu JavaScript-SEO, dass JavaScript-Apps in drei Phasen verarbeitet werden (Crawling, Rendering, Indexierung) und dass serverseitiges Rendering oder Pre-Rendering „nach wie vor eine gute Idee ist, weil die Website für Nutzer und Crawler schneller wird und nicht alle Bots JavaScript ausführen können“.

Warum ist React für SEO schwierig?

Eine als Single Page Application erstellte React-App liefert eine HTML-Datei, die kaum mehr als ein leeres Root-div und ein script-Tag enthält. Der Browser lädt das JavaScript, führt es aus und baut die Seite auf. Ein Crawler, der nur das HTML liest, findet nichts zum Indexieren: keine Überschriften, keinen Text, keine Links.

Googlebot führt JavaScript zwar aus, aber in einem eigenen Schritt: Die Seite wird gecrawlt, in die Rendering-Warteschlange gestellt, in einem Headless-Chromium gerendert, und erst dann werden die gerenderten Links und Inhalte verwendet. Jeder zusätzliche Schritt ist eine Fehlerquelle (Skriptfehler, blockierte API, Zeitüberschreitung) und verzögert das Erscheinen neuer Seiten in der Suche. Unser Leitfaden zu JavaScript-SEO beschreibt diesen Ablauf, und unser Artikel zur Google-Indexierung zeigt, wie Seiten schneller indexiert werden.

Andere Bots sind weniger geduldig. Die Analyse von Vercel aus dem Dezember 2024, The rise of the AI crawler, stellte fest, dass „keiner der großen KI-Crawler derzeit JavaScript rendert“, und nannte GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot und PerplexityBot. Eine clientseitig gerenderte React-Seite ist für ChatGPT, Claude und Perplexity unsichtbar, selbst wenn Google sie indexiert.

Welcher Rendering-Ansatz passt zu einer React-Website?

Das React-Team empfiehlt inzwischen, neue Apps mit einem Framework zu beginnen. Als es Create React App am 14. Februar 2025 einstellte, schrieb es in seiner Ankündigung, dass „Server-Rendering SEO verbessern kann“ und zudem die Performance steigert, weil Nutzer weniger JavaScript laden müssen, bevor sie Inhalte sehen. Die Optionen, vom schwächsten zum stärksten Ansatz für die Suche:

Zum dynamischen Rendering ist die Dokumentation von Google eindeutig: Es „war eine Notlösung und keine langfristige Lösung“, und Google empfiehlt stattdessen serverseitiges Rendering, statisches Rendering oder Hydration. Wenn Sie ein Framework wählen, behandelt unser Leitfaden zu Next.js SEO Rendering-Modi, Metadata API und Sitemaps im Detail.

Ist eine Migration nicht möglich, kann Google eine Single Page App mit etwas Sorgfalt trotzdem indexieren. Unser Leitfaden zu SEO für Single Page Applications nennt die Bedingungen; der Rest dieses Artikels gilt für beide Fälle.

Wie legen Sie Titel und Meta-Tags in React fest?

Seit React 19 (stabil seit dem 5. Dezember 2024) können Komponenten title-, meta- und link-Tags direkt rendern, und React verschiebt sie in den head des Dokuments. Die Release Notes zu React 19 betonen, dass diese native Unterstützung „mit reinen Client-Apps, Streaming-SSR und Server Components“ funktioniert. Vor React 19 übernahmen Bibliotheken wie react-helmet oder react-helmet-async diese Aufgabe, und sie bleiben nützlich, um Standardwerte pro Route zu überschreiben.

function ProductPage({ product }) {
  return (
    <>
      <title>{`${product.name} | Shop`}</title>
      <meta name="description" content={product.summary} />
      <link rel="canonical" href={`https://example.com/p/${product.slug}`} />
      <h1>{product.name}</h1>
    </>
  )
}

Drei Regeln gelten unabhängig von der Methode:

• Ein Titel pro Seite, eindeutig und beschreibend. Die React-Dokumentation warnt: Rendern mehrere Komponenten gleichzeitig einen Titel, ist „das Verhalten von Browsern und Suchmaschinen undefiniert“. Übergeben Sie einen einzigen String (ein Template-Literal), keine Mischung aus Text und Variablen.
• Eine Beschreibung und ein Canonical pro URL, erzeugt aus den Seitendaten. Ein Meta-Tag-Generator hilft beim Formulieren, ein Canonical-Checker bestätigt, was live ist.
• Open-Graph-Tags im initialen HTML für Seiten, die geteilt werden, denn Bots für Linkvorschauen lesen in der Regel das rohe HTML.

Welche Routing- und Link-Fehler blockieren die Indexierung?

Google erklärt, dass es „Links nur finden kann, wenn sie a-Elemente mit einem href-Attribut sind“, und rät davon ab, URL-Fragmente zum Laden unterschiedlicher Inhalte zu nutzen. Die meisten React-SEO-Probleme stecken in Routing-Details:

Um zu sehen, was Google rendert, nutzen Sie das URL-Prüftool der Search Console und sehen sich das HTML der getesteten Seite an, oder prüfen Sie wichtige Seitenvorlagen mit einem Indexierbarkeits-Checker.

Wie gehen Sie in React mit Sitemaps und strukturierten Daten um?

React hat keine eingebaute Sitemap. Erzeugen Sie sitemap.xml beim Build aus Ihren Routen und Daten (oder mit der Sitemap-Funktion Ihres Frameworks), führen Sie nur kanonische URLs mit Status 200 auf und verweisen Sie in robots.txt darauf. Für kleine statische Websites genügt ein XML-Sitemap-Generator.

Strukturierte Daten folgen derselben Regel wie Metadaten: Rendern Sie das JSON-LD-Skript mit der Seite, aus denselben Daten, idealerweise auf dem Server. Google kann per JavaScript eingefügtes JSON-LD nach dem Rendering lesen, doch Markup, das im initialen HTML fehlt, fehlt auch für Crawler, die nicht rendern. Verwenden Sie Article für Beiträge, Product im E-Commerce, Organization seitenweit und BreadcrumbList für tiefe Seiten.

Wie wirkt sich Performance auf React SEO aus?

Große JavaScript-Bundles schaden den Core Web Vitals: Der Browser muss Code laden, parsen und hydratisieren, bevor die Seite reagiert, was Largest Contentful Paint und Interaction to Next Paint belastet, besonders auf Mobilgeräten. Die Ankündigung des React-Teams zu Create React App hält fest, dass Server-Rendering weniger JavaScript und ein vollständiges HTML-Dokument sendet, was den First Contentful Paint beschleunigt und INP senken kann. Wirksame Hebel: Code pro Route mit React.lazy aufteilen, Bilder mit expliziten Abmessungen ausliefern, Komponenten unterhalb des sichtbaren Bereichs verzögert laden und Drittanbieter-Skripte prüfen.

Was gehört auf eine React-SEO-Checkliste?

1. Jede indexierbare URL liefert vollständiges HTML (Server-Rendering oder Pre-Rendering), geprüft mit curl.
2. Ein eindeutiger Titel, eine Beschreibung und ein selbstreferenzierendes Canonical pro URL.
3. History-basierte Routen, keine Hash-URLs, und jeder interne Link als a mit href gerendert.
4. Echte Statuscodes: 404 für fehlende Seiten, 301 oder 308 für verschobene Seiten.
5. Eine sitemap.xml aus denselben Daten wie die Routen, in robots.txt eingetragen.
6. JSON-LD mit der Seite gerendert und mit dem Test für Rich-Suchergebnisse geprüft.
7. Für das Rendering nötige Skripte, Styles und APIs in robots.txt erlaubt.
8. Code pro Route aufgeteilt und Core Web Vitals bei echten Nutzern überwacht.

Wie wird eine React-Website in KI-Antworten sichtbar?

GEO (Generative Engine Optimization) beginnt beim Zugang. Da KI-Crawler rohes HTML abrufen, muss eine React-Seite Text, Überschriften und JSON-LD ohne JavaScript liefern, um gelesen, zusammengefasst und zitiert zu werden. Ein KI-Crawlbarkeits-Audit zeigt, was diese Bots von Ihren Seiten erhalten. Die zweite Bedingung sind zitierwürdige Inhalte: Seiten, die pro Abschnitt eine Frage beantworten, mit Quellen, Zahlen und klaren Definitionen.

Diesen Inhaltsteil automatisiert Sorank, unser Produkt. Sorank ist eine SEO- und GEO-Software im Autopilot: Der Blogartikel-Generator schreibt und veröffentlicht 20, 60 oder 120 Artikel pro Monat mit Quellen, internen Links und Bildern und verbindet sich per Webhook mit individuellen Stacks wie einer React- oder Next.js-Website. Der SEO Chat beantwortet im Gespräch Fragen zur Suchperformance Ihrer Website.

Kurz zusammengefasst: Liefern Sie HTML vom Server, geben Sie jeder URL eigenen Titel, eigene Beschreibung und eigenes Canonical, und verwenden Sie echte Links. Dann rankt React wie jede andere Website, und KI-Assistenten können sie lesen. Um diese Website laufend mit Artikeln für Google und KI zu versorgen, sehen Sie sich die Sorank-Tarife an, ab 49 € pro Monat mit 3 Tagen kostenlosem Test.