React und SEO

React rendert standardmäßig clientseitig, sodass Crawler eine leere Hülle sehen, bis JavaScript ausgeführt wird. Hier erfahren Sie, wie Google React-Apps tatsächlich verarbeitet, welche Rendering-Strategie Sie wählen sollten und wie Sie Routing, Metadaten und die Falle doppelter Inhalte bei Render-Timeouts beheben.

Erstveröffentlicht: 26. Juni 2026 · Zuletzt aktualisiert: 3. Aug. 2026 · Fortgeschritten
Sprachen

React ist nicht schlecht für SEO – aber clientseitiges Rendering standardmäßig schon. Standardmäßig (CRA, Vite + React) liefert der Server eine leere Hülle und der Browser erstellt die Seite, sodass Crawler nichts sehen, bis JavaScript ausgeführt wird. Google kann React über seinen Web-Rendering-Dienst rendern, aber das Rendering wird in die Warteschlange gestellt, verzögert und kann ein Timeout haben – Gary Illyes hat gezeigt, dass Render-Timeouts nur Boilerplate-Seiten hinterlassen, die als Duplikate markiert werden. Die Rendering-Verträge von KI-Crawlern variieren je nach Anbieter, sodass CSR-only-Inhalte ein Abdeckungsrisiko darstellen. Die Lösung ist die Rendering-Strategie: SSR oder SSG (am einfachsten mit Next.js oder Remix) bringt Inhalte in das anfängliche HTML, hydriert mit hydrateRoot (nicht createRoot), sodass Server- und Client-Ausgabe exakt übereinstimmen. Verwenden Sie dann History-API-Routing, echte <a href>-Links, korrekte Statuscodes und versionsgerechte Metadaten: React 19 hebt <title>/<meta>/<link> nativ hervor, andernfalls react-helmet-async (niemals das nicht mehr gewartete Original react-helmet).

TL;DR — Reacts SEO-Problem ist nicht React selbst, sondern das standardmäßige clientseitige Rendering. CRA und Vite + React liefern eine leere Hülle und bauen das DOM im Browser auf, sodass das rohe HTML, das ein Crawler abruft, keinen Inhalt enthält. Google kann es über den Web Rendering Service (evergreen Chromium) rendern, aber das Rendering wird separat in die Warteschlange gestellt, kann verzögert werden und kann zeitlich auslaufen — Gary Illyes hat dokumentiert, dass Render-Timeouts nur Boilerplate-Seiten hinterlassen, die dann als Duplikate markiert werden. Bing rendert JS weniger zuverlässig; das Rendering durch KI-Crawler variiert je nach Anbieter. Die Lösung ist die Rendering-Strategie: SSR oder SSG (am einfachsten mit Next.js oder Remix) bringt Inhalte in das initiale HTML — und wenn Sie servergerendertes Markup hydratisieren, verwenden Sie hydrateRoot (nicht createRoot) und behandeln Sie jede Server/Client-Diskrepanz als Bug, nicht als Warnung, die Sie unterdrücken. Verwenden Sie dann History-API- Routing (nicht Hash-URLs) und echte <a href>-Links. Für <head>-Metadaten: React 19 hebt <title>/<meta>/<link> nativ hervor; bei React 18 oder für fortgeschrittene Anforderungen verwenden Sie react-helmet-async (niemals das nicht mehr gewartete Original react-helmet). Setzen Sie korrekte HTTP- Statuscodes. Es gibt keinen Ranking-Bonus für SSR — es macht Inhalte nur zuverlässig indexierbar. Für die allgemeinen Rendering-Mechanismen siehe die Themen JavaScript-SEO und Headless-CMS.

Was React für SEO tatsächlich schwierig macht

React ist eine komponentenbasierte JavaScript-Bibliothek, und standardmäßig — Create React App, Vite + React — läuft sie clientseitig. Der Server liefert ein nahezu leeres Dokument (bekanntlich nur ein <div id="root"></div>) plus ein JavaScript-Bundle, und der Browser führt dieses JavaScript aus, um das DOM zu konstruieren. Vergleichen Sie das mit einer servergerenderten Seite (WordPress, eine Rails-App), bei der das vollständige HTML — Inhalt, Überschriften, Links — in der allerersten Antwort ankommt.

Die entscheidende Frage ist also: Was steht im rohen HTML, bevor irgendein JavaScript läuft? Bei einer Standard-React-App lautet die Antwort „fast nichts“. Rechtsklick → Seitenquelltext anzeigen bei einer CRA-App zeigt die Hülle, nicht den Inhalt. Genau das bekommt ein Crawler bei seinem ersten Abruf.

Um genau zu sein, wo die Verantwortung tatsächlich liegt: Die React-Bibliothek ist nicht nur CSR. React DOM bietet Client-Rendering (createRoot), Server-Rendering (Streaming- und statische APIs) sowie Hydration-APIs — die Bibliothek unterstützt all das. Das Problem der leeren Hülle ist eine Eigenschaft der Standard-Toolchain (Create React App, Vite + React ohne Server), die nur die Client-APIs verdrahtet und nichts, das auf dem Server HTML rendert. Tauschen Sie die Toolchain — Next.js, Remix oder Reacts eigene Server-Rendering-APIs — und dieselbe Bibliothek liefert vollständiges HTML in der ersten Antwort.

Dies ist die React-spezifische Anwendung des breiteren JavaScript-SEO-Problems — gehen Sie dort für die allgemeinen Fehlermodi hin (Parität, Interaktion, Zustand, Timing). Hier werde ich mich auf das konzentrieren, was spezifisch für React ist und wie man es behebt.

Wie Google eine React-App tatsächlich verarbeitet

Google verarbeitet JavaScript in drei Phasen: Crawlen → Rendern → Indexieren. Googlebot ruft die URL ab, das gerenderte DOM wird später vom Web Rendering Service (WRS) aufgebaut — einer Evergreen-Version von Chromium, derselben Engine wie Chrome — und dann wird die gerenderte Ausgabe indexiert und ihre Links extrahiert. Evidence for this claim Google processes JavaScript pages through crawling, rendering, and indexing using its Web Rendering Service. Scope: Google Search rendering behavior. Confidence: high · Verified: Google: JavaScript SEO basics

Die wichtige Nuance ist, wann das Rendering passiert. Rendering ist ressourcenintensiv, daher wird es getrennt vom initialen Crawl in die Warteschlange gestellt. Martin Splitt beschrieb den Ablauf klar: “we do an HTTP request, and we get something back … some barebone HTML and all it does is load the JavaScript and run the JavaScript. Then, this HTML … goes into rendering. Rendering runs JavaScript — boom!, a lot of content happens that wasn’t there before.” (Übersetzung) „Wir machen eine HTTP-Anfrage und bekommen etwas zurück … etwas nacktes HTML, und alles, was es tut, ist, das JavaScript zu laden und auszuführen. Dann geht dieses HTML … ins Rendering. Rendering führt JavaScript aus — boom!, eine Menge Inhalt entsteht, der vorher nicht da war.“ Für eine CSR-React-Seite ist das „Boom“ Ihre gesamte Seite — nichts davon existiert, bis dieser Rendering-Schritt läuft.

Ein Hinweis, den man mitnehmen sollte: Verlassen Sie sich nicht zu sehr auf das alte Modell der „zwei Indexierungswellen“. Splitt selbst ist davon abgerückt und nannte die Welle „eine Vereinfachung“. Die praktische Erkenntnis ist nicht „es gibt eine formale Welle 2 mit festgelegtem Timing“ – sondern dass Rendering ein eigener, aufschiebbarer, fehleranfälliger Schritt ist und CSR 100 % Ihres Inhalts auf die falsche Seite davon stellt.

Zwei weitere Fakten über den Renderer, die React-Apps besonders treffen:

  • Er ist zustandslos. Googlebot speichert localStorage, sessionStorage oder Cookies nicht zwischen Seitenaufrufen. Inhalte oder Routing, die von clientseitigem Zustand abhängen, sind für den Crawler unsichtbar.
  • Er kann aufgeben. Der Renderer erzwingt ein Timeout. Wenn Ihre Hauptinhalte langsam laden – große Bundles, Wasserfälle von API-Aufrufen – kann das Rendering abgeschlossen sein, bevor Ihre Inhalte eintreffen, und Google indexiert die unvollständige Seite.

Die Render-Timeout-Falle (und warum sie Duplikate erzeugt)

Dieser Fehlermodus wird selten gut erklärt und ist für React-Apps der schädlichste. Gary Illyes beschrieb ihn direkt: „Ich habe eine Reihe von E-Mails in meinem Posteingang, bei denen das Problem ist, dass das Herzstück ewig zum Laden brauchte, sodass das Rendering ein Timeout hatte … und wir blieben mit einer Reihe von Seiten zurück, die nur das Grundgerüst hatten. Mit nur dem Grundgerüst sind diese Seiten Duplikate.“ (Übersetzung) „Ich habe eine Reihe von E-Mails in meinem Posteingang, bei denen das Problem ist, dass das Herzstück ewig zum Laden brauchte, sodass das Rendering ein Timeout hatte … und wir blieben mit einer Reihe von Seiten zurück, die nur das Grundgerüst hatten. Mit nur dem Grundgerüst sind diese Seiten Duplikate.“

Gehen Sie durch, was das für eine CSR-React-App bedeutet. Ihr Header, die Navigation und der Footer sind Grundgerüst, das schnell lädt. Ihr eigentlicher Seiteninhalt – der Teil, der jede URL einzigartig macht – wird von JavaScript abgerufen und gerendert und lädt langsam. Das Rendering läuft in ein Timeout. Google bleibt auf jeder URL mit Header + Navigation + Footer zurück. Jetzt sieht jede Seite identisch aus, und Google markiert sie in der Google Search Console als Duplikate voneinander.

Illyes’ eigener Fix ist der umsetzbare Teil: „Versuchen Sie, die JS-Aufrufe so umzustrukturieren, dass der Inhalt (einschließlich des marginalen Grundgerüsts) zuerst lädt, und sehen Sie, ob das hilft.“ (Übersetzung) „Versuchen Sie, die JS-Aufrufe so umzustrukturieren, dass der Inhalt (einschließlich des marginalen Grundgerüsts) zuerst lädt, und sehen Sie, ob das hilft.“ Aber die dauerhaftere Antwort ist, für Ihre Hauptinhalte überhaupt nicht vom Rendering-Schritt abzuhängen – das bedeutet SSR oder SSG.

Rendering-Strategien für React

Dies ist die mit Abstand wirkungsvollste Entscheidung. Die Optionen, grob von schlechtester zu bester für SEO:

  • CSR (Standard-React). Der Server sendet die Hülle; der Browser baut alles. Inhalte werden durch die Rendering-Warteschlange verzögert und sind dem Timeout ausgesetzt. Am schlechtesten für SEO. Gut für authentifizierte Dashboards, die Sie ohnehin nicht indexiert haben möchten. Evidence for this claim Client-only React rendering constructs UI in the browser; server rendering APIs produce HTML before browser hydration. Scope: React rendering mechanics; SEO impact depends on what the initial response contains. Confidence: high · Verified: React: hydrateRoot React: Server APIs
  • Pre-Rendering. Rendering zur Build-Zeit ohne vollständiges SSR-Framework – Tools wie react-snap oder ein Prerender-Dienst crawlen Ihre App und speichern statisches HTML. Leichtgewichtiger; funktioniert für einfachere, weitgehend statische Websites.
  • SSG (Static Site Generation). HTML wird einmal zur Bereitstellungszeit erstellt und als statische Dateien ausgeliefert. Am schnellsten, Inhalte sind immer im rohen HTML vorhanden. Eingeschränkt für stark dynamische oder benutzerspezifische Inhalte; große Websites haben langsame Builds.
  • SSR (Server-Side Rendering). Der Server führt React pro Anfrage aus und sendet vollständiges HTML. Inhalte sind für Crawler sofort verfügbar; immer aktuell. Kostet einen Node.js-Server und eine etwas höhere TTFB.
  • Hybrid / ISR (Incremental Static Regeneration). Eine Next.js-Funktion, die statische Seiten im Hintergrund neu generiert – statische Geschwindigkeit mit regelmäßiger Aktualität.
StrategieInhalte im initialen HTML?SEO-RisikoAm besten für
CSR (rohes React)NeinAm höchstenAngemeldete Dashboards, nicht indexierte Apps
Pre-RenderingJa (Build-Zeit)NiedrigKleine, weitgehend statische Websites
SSGJa (Build-Zeit)Am niedrigstenBlogs, Dokumentation, Marketing
SSRJa (pro Anfrage)NiedrigAktuelle, dynamische Inhalte
ISR / HybridJaNiedrigInhalte, die sich stündlich/täglich ändern

Und eine Strategie, die Sie bei neuen Builds überspringen sollten: dynamisches Rendering – Erkennen des Crawler-User-Agents und Ausliefern einer vorgerenderten Version an diesen, während Benutzer CSR erhalten. Google nennt das inzwischen “einen Workaround und keine langfristige Lösung”, das “zusätzliche Komplexität und Ressourcenanforderungen schafft”, und empfiehlt stattdessen Server-Side Rendering, Static Rendering oder Hydration. (Bing empfahl dynamisches Rendering bereits 2018, aber diese Empfehlung ist veraltet – seit 2019 rendert Bingbot über Microsoft Edge / Chromium, und SSR/SSG ist auch dort der richtige Ansatz.)

Hier lohnt es sich, einen Mythos zu widerlegen: SSR ist kein Ranking-Boost. Wie John Mueller es formulierte: “there are no SEO ranking bonuses for implementing it one way or another” – die verschiedenen Rendering-Methoden sind “just different ways of making the content indexable.” (Übersetzung) „Es gibt keine SEO-Ranking-Boni, wenn man es auf die eine oder andere Weise implementiert“ – die verschiedenen Rendering-Methoden sind „nur verschiedene Möglichkeiten, den Inhalt indexierbar zu machen.“ Der Wert von SSR liegt in zuverlässiger Indexierbarkeit (und oft besseren Core Web Vitals durch ein schnelleres First Contentful Paint), nicht in einem magischen Ranking-Hebel.

Hydration muss exakt übereinstimmen – das ist eine Bug-Grenze, keine SEO-Technik

SSR und SSG liefern dem Browser beide HTML aus, das Ihren Inhalt bereits enthält. React muss dann im Client an dieses Markup andocken, und das ist eine andere API als ein reines Client-Rendering:

  • createRoot rendert React von Grund auf in einen DOM-Knoten – ohne vorhandenes Markup. Verwenden Sie es nur für CSR-Apps.
  • hydrateRoot dockt React an HTML an, das react-dom/server bereits generiert hat, und erwartet, dass das erste Rendering des Clients eine Ausgabe erzeugt, die mit dem identisch ist, was der Server gesendet hat. Wenn Sie SSR/SSG verwenden, benötigen Sie hydrateRoot, nicht createRoot – der Aufruf von createRoot auf servergerendertem Markup führt dazu, dass React es verwirft und von Grund auf neu rendert, wodurch der genaue SEO-Vorteil verloren geht, den Sie mit SSR/SSG erzielen wollten.
Evidence for this claim hydrateRoot attaches React to HTML previously generated by React on the server; the initial client output should match the server output. Scope: hydration Confidence: high · Verified: hydrateRoot

Abweichungen zwischen Server- und Client-Ausgabe sind ein echtes Risiko in React-Apps, die SEO-Fixes durchführen – ein Date.now() in einem Titel, ein localesabhängiges Format, ein if (typeof window !== 'undefined')-Zweig. Reacts eigene Dokumentation ist unmissverständlich darüber, was dann passiert: Sie warnt in der Entwicklung vor Abweichungen, aber “there are no guarantees that attribute differences will be patched up in case of mismatches.” (Übersetzung) „Es gibt keine Garantien, dass Attributunterschiede bei Abweichungen behoben werden.“ Die Anleitung lautet, Abweichungen als Bugs zu behandeln und zu beheben – nicht die Warnung zu unterdrücken und von Inhaltsgleichheit auszugehen. Speziell für SEO: Gehen Sie nicht davon aus, dass Ihre gerenderten Inhalte und Metadaten mit dem übereinstimmen, was der Server gesendet hat, nur weil die Seite im Browser korrekt aussieht. Vergleichen Sie das Server-HTML direkt mit dem DOM nach der Hydration (der View Source vs. Inspect Element-Check aus dem Testabschnitt unten ist die schnelle Version davon), anstatt einer sauberen Konsole zu vertrauen.

React Router und URL-Struktur

React Router übernimmt die Navigation im Browser ohne Server-Roundtrips, was für SEO in Ordnung ist, wenn es korrekt konfiguriert ist:

  • Verwenden Sie die History API, nicht Hash-Routing. BrowserRouter verwendet pushState und erzeugt saubere, crawlbare URLs (/products). HashRouter erzeugt /#/products, und Google kann Hash-basierte URLs nicht zuverlässig auflösen – das alte AJAX-Crawling-Schema, das sie funktionsfähig machte, ist veraltet. Verwenden Sie die History API.
  • Der Server muss diese URLs ebenfalls verarbeiten. Mit History-API-Routing benötigt jede “Seite” eine echte URL, auf die der Server antworten kann – entscheidend für SSR und notwendig, damit ein direkter Zugriff oder ein Refresh auf /products nicht zu einem 404 führt.
  • <Link> rendert einen echten Anker. Die <Link>-Komponente von React Router gibt ein <a href> aus, das crawlbar ist. Navigation, die auf onClick-Handlern ohne Anker basiert, ist nicht crawlbar – Google folgt nur echten <a href>-Links.

Metadaten verwalten: react-helmet, react-helmet-async und die nativen Tags von React 19

Durch React 18 hat React bei Routenwechseln nie nativ das <head>-Element des Dokuments aktualisiert – jede <title>-, Meta-Description-, Canonical- und Open-Graph-/Twitter-Tag einer Route musste von einer Bibliothek gesetzt werden. React 19 hat das geändert: Komponenten können <title>, <meta>- und <link>-Tags direkt rendern, und React hebt sie von selbst in den <head>-Bereich – funktioniert sowohl mit Client-only-Apps, Streaming-SSR als auch Server Components. React 19.2 ist Stand Mitte 2026 die aktuelle stabile Version, das gilt also für jede App mit einer aktuellen React-Version.

Das bedeutet, die richtige Antwort hängt von Ihrer React-Version und Ihren tatsächlichen Anforderungen ab:

  • React 19, eigenständige App, nur grundlegende Tags. Rendern Sie <title>/<meta>/<link> direkt in Ihren Komponenten – keine Bibliothek nötig.
  • React 19, aber Sie benötigen htmlAttributes/bodyAttributes, SSR-context-Serialisierung, onChangeClientState, prioritizeSeoTags oder titleTemplate. Natives Hoisting deckt diese nicht ab – verwenden Sie react-helmet-async. Deren eigene Dokumentation weist direkt darauf hin: ohne diese spezifischen Anforderungen benötigen Sie das Paket unter React 19 möglicherweise gar nicht.
  • React 18 oder früher, eigenständige App. Natives Hoisting existiert noch nicht – verwenden Sie react-helmet-async. Es wird aktiv gepflegt (Hauptversion 3 und erkennt Ihre React-Version zur Laufzeit) und unterstützt SSR.
  • Das ursprüngliche react-helmet. Verwenden Sie es nicht, auf keiner React-Version. Es ist ungepflegt – keine Veröffentlichung seit 2020 – und hat bekannte Fehler unter React 18s Concurrent Rendering.
  • Next.js-Apps. Verwenden Sie Nexts eigene Metadata-API (den metadata-Export / generateMetadata im App Router) unabhängig von der React-Version – setzen Sie nicht auf Helmet und verlassen Sie sich auch nicht auf natives React-Tag-Hoisting. Das Framework besitzt das Dokument in einer Next.js-App.

Eine Zuverlässigkeitsregel gilt allgemein für JavaScript-SEO und trifft unabhängig davon zu, welche der oben genannten Optionen Sie verwenden: HTML-Ebene-Metadaten schlagen JS-injizierte Metadaten. Ein Canonical-Tag, das durch clientseitiges JavaScript injiziert wird, ist weit weniger zuverlässig als eines, das im serverseitig gerenderten HTML vorhanden ist – ein weiteres Argument für SSR/SSG.

KI-Crawler machen das dringend

Die Besonderheit 2026: Das Rendering-Verhalten für GPTBot (OpenAI), ClaudeBot (Anthropic), PerplexityBot und andere Agenten ist anbieter- und versionsspezifisch. Eine CSR-React-App liefert jedem Crawler dieselbe leere Hülle, die der erste Googlebot-Fetch sieht, und die aktuelle Anbieterdokumentation etabliert keinen gemeinsamen Rendering-Schritt, der sie füllen würde. Da generative Engines zu einer größeren Discovery-Oberfläche werden, ist SSR/SSG kein reines Google-Thema mehr: Rohes HTML maximiert die Abdeckung, ohne eine universelle Crawler-Einschränkung anzunehmen. (Das Headless-CMS-Thema behandelt diese KI-Crawler-Realität ausführlicher.)

Testen, was Google tatsächlich sieht

Vertrauen Sie nicht Ihrem Browser – Ihr DevTools-Inspektor zeigt das gerenderte DOM (nach JavaScript), was genau das ist, was ein Crawler ohne JS nicht sieht. Verwenden Sie die richtigen Tools:

  • View Source vs. Inspect Element. View Source ist das rohe HTML (was Crawler vor JS erhalten). Inspect Element ist das gerenderte DOM. Wenn Inhalte in Inspect, aber nicht in View Source vorhanden sind, sind sie JavaScript-abhängig.
  • URL Inspection Tool (Search Console) – die maßgeblichste Prüfung. Führen Sie einen Live-Test durch und betrachten Sie das gerenderte HTML, den Screenshot und die Seitenressourcen / Konsolenmeldungen, um zu sehen, was Google tatsächlich gerendert hat und was nicht geladen werden konnte.
  • Rich Results Test – eine schnelle Prüfung des gerenderten HTML ohne Verifizierung der Website.
  • Deaktivieren Sie JavaScript in DevTools und laden Sie neu – eine schnelle Simulation eines Crawlers, der kein JS ausführt (und ein brauchbarer Proxy für das, was KI-Crawler sehen).
  • Search Console Coverage-Bericht – „Discovered, currently not indexed“ kann einen Render-Queue-Rückstau signalisieren; Cluster doppelter Seiten können die Render-Timeout-Boilerplate-Falle signalisieren.
  • JS-rendering-Crawler – Ahrefs Site Audit und Screaming Frog (JS-Rendering-Modus) rendern Seiten in großem Maßstab, sodass Sie rohes vs. gerendertes HTML über die gesamte Website vergleichen können.

Next.js und Remix (die praktische Antwort)

Wenn SEO wichtig ist und Sie reines CSR-React verwenden, ist der Wechsel zu einem Framework, das auf dem Server rendert, in der Regel der richtige Schritt. Next.js ist genau dafür gebaut – SSR und SSG out of the box, ISR, der App Router, eine eingebaute Metadata-API, automatisches Code-Splitting und Bildoptimierung. Remix ist die Web-Standards-Alternative, basierend auf fetch/Request/Response mit SSR standardmäßig und einer starken Progressive-Enhancement-Geschichte. Next.js bekommt einen eigenen Deep Dive – ich halte es hier bewusst kurz. Der Punkt für React-SEO ist enger gefasst: Das Framework existiert, um Ihre Inhalte aus dem reinen Browser-Rendering-Schritt in das initiale HTML zu verschieben.

React ist gut für SEO, wenn Sie Rendering als Architekturentscheidung behandeln und nicht als nachträglichen Einfall. Wählen Sie SSR oder SSG für alles, was ranken soll, halten Sie Links und Routing ehrlich, verwalten Sie Metadaten pro Route und lassen Sie Googles eigene Tools – nicht Ihren Browser – Ihnen sagen, was tatsächlich gerendert wurde.

Add an expert note

Pin an expert quote

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