SEO für Single Page Applications: Ein Praxisleitfaden
SEO für Single Page Applications
SEO für Single Page Applications: React-SEO-Leitfaden mit Checkliste | We.Inc
Warum Single Page Apps in der Suche Probleme haben und wie du sie behebst: SSR, statische Generierung oder Prerendering, Titel pro Route in React 19 oder react-helmet-async, echte URLs, Soft 404s, Sitemaps, URL-Prüfung und ein Quelltext-Checker.
Single Page Apps schicken Suchmaschinen oft eine fast leere HTML-Hülle und bauen die Seite erst später mit JavaScript auf. Google kann JavaScript rendern, aber das geschieht mit Verzögerung, und andere Crawler können es eventuell gar nicht. Die Lösung: Liefere pro URL echtes HTML über Server-Rendering, statische Generierung oder Prerendering, mit eigenem Titel, eigener Beschreibung und eigenem Canonical auf jeder Route.
Die drei wichtigsten Maßnahmen
Maßnahme
Warum
Echtes HTML für jede öffentliche URL
Crawler und Link-Vorschauen sehen den Inhalt sofort
Eigener Titel, eigene Beschreibung, eigenes Canonical pro Route
Jede Seite kann eigenständig ranken und geteilt werden
Ein echter Pfad pro Ansicht und eine Sitemap
Jede Seite kann gefunden und indexiert werden
Diese Website ist selbst eine React Single Page App, die jede öffentliche Seite beim Build vorrendert, daher sind das die Prüfungen, die wir an unseren eigenen Seiten durchführen. Füge den Quelltext einer Seite in den Checker ein, um zu sehen, was ein Crawler erhält, bevor JavaScript läuft.
Öffne eine Seite, wähle Seitenquelltext anzeigen und kopiere alles.
Füge ihn unten in den Checker ein.
Lies ab, welche Grundlagen im rohen HTML vorhanden sind und welche fehlen.
Schließe die Lücken mit einem der Ansätze und Codebeispiele auf dieser Seite.
Bestätige das Ergebnis mit der URL-Prüfung der Search Console, die das von Google gerenderte HTML zeigt.
Prüfe den Seitenquelltext, nicht das Elements-Panel; das Panel zeigt die Seite, nachdem JavaScript gelaufen ist.
Halte das vorgerenderte HTML identisch mit dem, was Nutzer sehen; abweichende Inhalte für Crawler sind Cloaking.
Blockiere /assets oder .js-Dateien nicht in der robots.txt; Google braucht sie zum Rendern.
Link-Vorschauen sozialer Netzwerke führen kein JavaScript aus, daher müssen Open-Graph-Tags pro Route im HTML stehen.
Häufige Fragen
Kann Google eine React Single Page App indexieren?
Ja. Google rendert JavaScript, aber Seiten warten in einer Render-Warteschlange, und alles, was nicht lädt, wird übersehen. Andere Suchmaschinen und Link-Vorschau-Bots rendern weniger oder gar nicht, daher ist es sicherer, HTML auszuliefern.
Brauche ich Next.js für React-SEO?
Nein. Next.js macht Server-Rendering und statische Generierung einfach, aber eine SPA im Stil von Vite oder Create React App kann ihre öffentlichen Routen beim Build vorrendern und bekommt dasselbe crawlbare HTML.
Braucht man react-helmet in React 19 noch?
Nicht für grundlegende Tags. React 19 rendert title-, meta- und link-Elemente aus jeder Komponente und verschiebt sie in den head. react-helmet-async bleibt unter React 18 und älter nützlich.
Ist Prerendering Cloaking?
Nicht, wenn Crawler und Menschen denselben Inhalt bekommen. Prerendering speichert nur die Seite, die deine Nutzer ohnehin sehen würden. Zu Cloaking wird es, wenn das an Bots ausgelieferte HTML etwas anderes aussagt.
Testen wie Google
In der Search Console zeigt die URL-Prüfung, ob eine Seite indexiert ist, und mit Live-URL testen das von Google gerenderte HTML sowie alle Ressourcen, die nicht geladen werden konnten. Vergleiche dieses HTML mit deiner sichtbaren Seite: Überschriften, Haupttext und Links sollten alle vorhanden sein.
SSR, statische Generierung oder Prerendering
Wege, Crawlern echtes HTML zu liefern
Ansatz
So funktioniert es
Geeignet für
Aufwand
Serverseitiges Rendering (SSR)
Der Server rendert jede Anfrage zu HTML, dann hydratisiert React es
Seiten, die sich pro Anfrage oder pro Nutzer ändern
Braucht einen Server; mehr bewegliche Teile
Statische Generierung (SSG)
Seiten werden beim Build zu HTML gerendert
Marketingseiten, Dokumentation, Blogs
Neuer Build nötig, um Inhalte zu aktualisieren
Prerendering einer bestehenden SPA beim Build
Ein Skript lädt jede Route beim Build in einem Headless-Browser und speichert das HTML
Eine bestehende reine Client-App, die du nicht neu schreiben willst
Der Build wird mit wachsender Routenzahl langsamer
Nur clientseitig
Der Server schickt eine leere Hülle; JavaScript baut die Seite auf
App-Ansichten hinter dem Login, die nicht indexiert werden sollen
Öffentliche Seiten sind darauf angewiesen, dass Google sie später rendert
Lösungen mit Code
Titel und Beschreibung pro Route in React 19
In React 19 kann jede Komponente title-, meta- und link-Tags rendern; React verschiebt sie in den head des Dokuments. Jede Route setzt ihre eigenen.
Dasselbe mit react-helmet-async (React 18 und älter)
Umschließe die App einmal mit HelmetProvider und setze dann die Tags pro Seite. Die async-Version ist sicher für Server-Rendering und Prerendering.
Echte URLs statt Hash-Fragmenten
Google ignoriert alles nach einem #, wenn es bestimmt, was eine URL ist. Verwende die History API (BrowserRouter, createBrowserRouter), damit jede Ansicht ihren eigenen Pfad hat.
Crawlbare Links
Crawler folgen a-Elementen mit einem href. Ein Klick-Handler auf einem div ist für sie unsichtbar. Link-Komponenten von Routern rendern einen echten Anker.
Soft 404s bei unbekannten Routen vermeiden
Eine reine Client-App beantwortet jede URL mit Status 200, sodass eine fehlende Seite wie eine echte aussieht. Füge der Nicht-gefunden-Ansicht ein noindex hinzu oder liefere einen echten 404 vom Server oder aus dem Prerender-Schritt.
Eine Sitemap aller öffentlichen Routen
Führe jede öffentliche URL einmal mit ihrer kanonischen Adresse auf. Erzeuge sie aus derselben Routenliste, die deine App verwendet, damit beide nie auseinanderlaufen.
Sollen die Tags für dich geschrieben werden? Probier den
Meta-Tag-Generator
Jede öffentliche Seite hat einen eigenen URL-Pfad (keine #-Routen)
Der Seitenquelltext (nicht Untersuchen) zeigt die Überschrift und den Haupttext der Seite
Jede Route hat einen eigenen Titel und eine eigene Meta-Beschreibung
Jede Route hat einen Canonical-Link auf sich selbst
Die Navigation nutzt echte a-Elemente mit href
Unbekannte URLs liefern den Status 404 oder tragen noindex
Eine Sitemap listet jede öffentliche URL und ist in der Search Console eingereicht
Die robots.txt blockiert keine JavaScript- oder CSS-Dateien
Das gerenderte HTML der URL-Prüfung zeigt den vollständigen Inhalt
Private Ansichten und Ansichten hinter dem Login sind noindex oder durch einen Login geschützt
Quelltext-Checker
Füge das HTML aus Seitenquelltext anzeigen ein, um zu prüfen, was ein Crawler erhält.
Seitenquelltext (das Beispiel ist eine typische leere SPA-Hülle)