React ist eine Bibliothek für Benutzeroberflächen. Ob eine React-Website gut in Google steht, entscheidet sich deshalb weniger an React selbst als an der Art, wie die Seiten ausgeliefert werden: als leeres HTML-Gerüst, das erst im Browser Inhalt bekommt, oder als fertiges HTML vom Server, das der Browser danach interaktiv macht. Dieser Ratgeber erklärt die Unterschiede aus Sicht der Suche und zeigt, worauf Sie bei Routing, Title und Fehlerseiten achten.
Wie Google JavaScript allgemein verarbeitet, steht im Ratgeber Rendering durch Google. Für Next.js als verbreitetes React-Framework gibt es den eigenen Ratgeber Next.js und SEO, für den Vergleich mit Angular und Vue JavaScript-Frameworks und SEO.
Was React selbst empfiehlt
Die React-Dokumentation rät für neue Anwendungen zu einem Framework. Unter "Full-stack frameworks" nennt sie Next.js mit dem App Router, React Router in Version 7 und Expo für native Apps [1]. Über diese Frameworks heißt es, alle unterstützten clientseitiges Rendering, Single-Page-Apps und statische Generierung, und sie erlaubten zusätzlich serverseitiges Rendering je Route, wo es passt [1]. Wer ohne Framework mit einem Build-Werkzeug wie Vite, Parcel oder Rsbuild beginnt, muss laut Dokumentation selbst entscheiden, wie er Routing, Datenabruf und ähnliche Aufgaben löst [1].
Für SEO ist das die wichtigste Weiche. Eine Anwendung, die ohne Framework entsteht, liefert in der Grundform eine HTML-Datei mit einem leeren Container und einem Skript aus. Den Inhalt sieht Google erst nach dem Rendering. Ein Framework mit Server-Rendering oder statischer Generierung liefert dagegen gleich vollständiges HTML.
Wie Google eine reine Browser-App sieht
Google rendert JavaScript, aber in einem zweiten Schritt. Nach dem Abruf landet die Seite in einer Warteschlange; Google schreibt, sie verbleibe dort möglicherweise nur einige Sekunden, es könne aber auch länger dauern [2]. Danach führt Google das JavaScript aus und indexiert das Ergebnis. Für eine kleine Website mit wenigen Seiten ist das meist kein Problem. Schwierig wird es bei vielen Seiten, bei Inhalten, die von langsamen Schnittstellen abhängen, und bei Fehlern im Skript, die das Rendern abbrechen.
Google selbst bewertet Server-Rendering und Vorabgenerierung als sehr gute Option, weil die Website damit für Nutzer und Crawler schneller wird und weil nicht alle Bots JavaScript ausführen können [2].
Noch eine Frage offen?
In der gratis Sprechstunde beantworten wir Fragen zu SEO live, jeden ersten Samstag im Monat um 18 Uhr. Oder Sie rufen einfach an.
Server-Rendering und statische Seiten mit React
Für das Rendern auf dem Server stellt React eigene Schnittstellen bereit. Die Dokumentation beschreibt sie mit dem Satz, die APIs von react-dom/server ließen React-Komponenten serverseitig zu HTML rendern [3]. Für Node.js gibt es renderToPipeableStream, für Umgebungen mit Web Streams renderToReadableStream. Die älteren Funktionen renderToString und renderToStaticMarkup haben laut React einen geringeren Funktionsumfang als die Streaming-Varianten [3].
In der Praxis rufen Sie diese Funktionen selten selbst auf. Das erledigt das Framework, das Sie für jede Route festlegen lassen: statisch beim Bau, auf dem Server bei jeder Anfrage oder nur im Browser. Für Seiten, die gefunden werden sollen, also Startseite, Leistungen, Produkte und Beiträge, empfehlen wir statische Generierung oder Server-Rendering. Konto, Warenkorb und interne Werkzeuge dürfen im Browser entstehen.
Hydration: Server und Browser müssen übereinstimmen
Liefert der Server fertiges HTML, macht React es im Browser mit hydrateRoot interaktiv. Die Dokumentation beschreibt das als Anzeigen von React-Komponenten in einem DOM-Knoten, dessen HTML zuvor von react-dom/server erzeugt wurde [4]. Dabei gilt eine strenge Regel: hydrateRoot erwartet, dass der Inhalt im Browser mit dem vom Server gerenderten identisch ist. React schreibt: "You should treat mismatches as bugs and fix them." [4]
Als typische Ursachen nennt React unter anderem Abfragen wie typeof window !== 'undefined' in der Rendering-Logik, reine Browser-Schnittstellen wie window.matchMedia und unterschiedliche Daten auf Server und Client [4]. Im besten Fall verlangsamen solche Abweichungen die Seite, im schlimmsten Fall hängen Ereignisse an falschen Elementen. Abweichenden Textinhalt korrigiert React nicht [4]. Für die Suche ist vor allem wichtig, dass das HTML vom Server den Inhalt trägt, den Sie im Index sehen wollen. Was erst nach der Hydration dazukommt, sieht Google nur, wenn das Rendering gelingt.
Title und Meta-Angaben je Route
Jede Seite braucht einen eigenen Title und eine eigene Description. Google akzeptiert, dass beides per JavaScript gesetzt wird [2]. In aktuellen React-Versionen gibt es dafür eine eingebaute title-Komponente. React platziert sie laut Dokumentation immer im head des Dokuments, gleich wo im Komponentenbaum sie steht [5]. Zwei Hinweise aus der Dokumentation sind für SEO wichtig [5]:
- Es soll immer nur ein title gleichzeitig gerendert werden. Rendern mehrere Komponenten einen title, setzt React alle in den head, und das Verhalten von Browsern und Suchmaschinen ist dann nicht festgelegt.
- Der Inhalt muss eine einzelne Zeichenkette sein. Ein Ausdruck wie Results page {pageNumber} erzeugt intern zwei Teile und führt zu einem Fehler. Richtig ist eine Vorlagenzeichenkette.
Den Canonical legen Sie am besten im HTML fest. Google rät, eine per JavaScript gesetzte kanonische URL auf denselben Wert zu setzen wie im ursprünglichen HTML [2].
Routing und Links
Single-Page-Apps wechseln Seiten ohne neuen Abruf. Damit Google die Seiten trotzdem als eigene Adressen erkennt, gelten zwei Regeln. Google findet Links nur über a-Elemente mit href [2]. Ein Router-Link, der am Ende als a mit href im HTML steht, ist in Ordnung; ein div mit onClick ist für Google kein Link. Außerdem soll das Routing die History API nutzen und keine Fragmente, weil Google Inhalte hinter # nicht als eigene Seiten lädt [2]. Adressen wie /#/leistungen gehören also nicht in eine Website, die gefunden werden soll.
Fehlerseiten mit dem richtigen Status
Eine Single-Page-App liefert für jede Adresse zunächst dieselbe HTML-Datei mit Status 200 aus, auch für Adressen, die es nicht gibt. Google sieht dann eine Fehlermeldung mit Erfolgsstatus, also ein Soft 404 [2]. Google nennt zwei Auswege [2]: eine Weiterleitung per JavaScript auf eine Adresse, für die der Server wirklich 404 sendet, oder ein noindex, das per JavaScript auf Fehlerseiten gesetzt wird. Mit Server-Rendering lässt sich der Status direkt richtig setzen. Das ist der sauberste Weg.
Prüfen, was Google von Ihrer React-Seite sieht
- Quelltext der Seite ansehen: Steht der Hauptinhalt im ausgelieferten HTML?
- Im URL-Prüftool der Search Console den Live-Test starten und das gerenderte HTML mit dem Browser vergleichen.
- Title, Description und Canonical im head prüfen, bei mehreren Routen nacheinander.
- Eine nicht vorhandene Adresse aufrufen und den Statuscode kontrollieren.
- Die Konsole im Browser und im URL-Prüftool auf Hydration-Warnungen und Fehler durchsehen.
Ihre React-Anwendung ist schon gebaut und Sie wissen nicht, ob der Umstieg auf Server-Rendering lohnt? Stellen Sie die Frage in der gratis Sprechstunde. Die Umstellung selbst begleitet SEO NW im Rahmen der Leistung OnPage-Optimierung. Zum Begriff hilft das Glossar unter Server-Side Rendering.
- Organisation Creating a React App. React (react.dev). Stand laufend. abgerufen am 31.10.2026
- Organisation Grundlagen von JavaScript-SEO. Google Search Central. Stand 04.03.2026. abgerufen am 31.10.2026
- Organisation Server React DOM APIs (react-dom/server). React (react.dev). Stand laufend. abgerufen am 31.10.2026
- Organisation hydrateRoot. React (react.dev). Stand laufend. abgerufen am 31.10.2026
- Organisation title. React (react.dev). Stand laufend. abgerufen am 31.10.2026
Häufige Fragen
Kann Google React-Seiten indexieren?
Ja. Google rendert JavaScript mit einer aktuellen Chrome-Version. Weil das in einem zweiten Schritt nach dem Abruf geschieht und nicht alle Bots JavaScript ausführen, empfiehlt Google Server-Rendering oder Vorabgenerierung als sehr gute Option.
Brauche ich für React SEO Next.js?
Nicht zwingend, aber ein Framework mit Server-Rendering oder statischer Generierung nimmt Ihnen viel Arbeit ab. Die React-Dokumentation nennt für neue Anwendungen Next.js und React Router als Full-Stack-Frameworks.
Wie setze ich den Title in React?
Mit der eingebauten title-Komponente, die React immer in den head setzt. Es darf nur ein title gleichzeitig gerendert werden, und sein Inhalt muss eine einzelne Zeichenkette sein.
Warum meldet die Search Console Soft 404 für meine React-App?
Weil die App auch für nicht vorhandene Adressen Status 200 liefert. Abhilfe schafft eine Weiterleitung auf eine Adresse mit echtem 404, ein per JavaScript gesetztes noindex auf Fehlerseiten oder Server-Rendering mit korrektem Status.
Noch eine Frage offen?
In der gratis Sprechstunde beantworten wir Fragen zu SEO live, jeden ersten Samstag im Monat um 18 Uhr. Oder Sie rufen einfach an.
Zuletzt geprüft am 03.11.2026, nächste Prüfung spätestens im November 2027. Haben Sie einen Fehler entdeckt? Schreiben Sie uns.
