Single Page Application SEO: So wird eine SPA von Google indexiert und von KI gelesen

Single Page Application SEO umfasst alle Techniken, mit denen sich eine JavaScript-App auf Basis von React, Vue, Angular oder Svelte so leicht crawlen lässt wie eine klassische Website. Das Problem ist gut dokumentiert: Google erklärt in seinen Grundlagen zu JavaScript-SEO, dass es JavaScript-Seiten in drei Phasen verarbeitet (Crawling, Rendering, Indexierung), und jede Schwäche einer SPA liegt irgendwo in dieser Kette. Dieser Leitfaden konzentriert sich auf SPAs; für JavaScript-Websites im Allgemeinen lesen Sie unseren Leitfaden zu JavaScript-SEO.

Was ist eine Single Page Application, und warum ist sie für SEO schwierig?

Eine klassische Website liefert für jede URL ein vollständiges HTML-Dokument. Eine SPA liefert für jede URL fast dasselbe Dokument: ein leeres <div id="root">, ein paar Meta-Tags und ein großes JavaScript-Bundle. Der Browser lädt das Bundle herunter, ruft eine API auf und zeichnet dann die Seite. Klickt der Besucher auf einen Link, tauscht JavaScript den Inhalt aus, ohne die Seite neu zu laden.

Für einen Menschen mit einem schnellen Smartphone wirkt das sofort. Für einen Crawler ist die erste Antwort ein leeres Grundgerüst: keine Überschrift, kein Text, keine Links. Alles hängt davon ab, ob der Bot das JavaScript ausführt und wann. Diese eine Tatsache erklärt die meisten SEO-Probleme von SPAs:

• Verzögerter oder fehlender Inhalt: Der Text existiert erst nach dem Rendering, das Google später durchführt und andere Bots auslassen.
• Eine URL für viele Ansichten: Ältere SPAs routen mit Fragmenten (/#/pricing), und der Teil nach dem # wird nie an den Server gesendet, sodass alle Ansichten zu einer einzigen URL verschmelzen.
• Identische Titel und Beschreibungen: Das Grundgerüst enthält einen einzigen <title>, und wenn der Router ihn nicht aktualisiert, teilen sich alle Seiten diesen Titel.
• Links ohne href: Buttons und onClick-Handler führen Nutzer weiter, geben Crawlern aber nichts, dem sie folgen können.
• Soft-404-Fehler: Der Server antwortet für jeden Pfad mit 200, auch für Seiten, die es nicht gibt, sodass Fehleransichten als dünne Seiten indexiert werden.
• Schweres JavaScript: Große Bundles verlangsamen die erste Anzeige und die Interaktionen, was den Core Web Vitals schadet.

Wie crawlt und rendert Google eine SPA?

Der Googlebot ruft zuerst das rohe HTML ab und liest die Links und Anweisungen, die er dort findet. Seiten mit dem Statuscode 200 kommen danach in eine Warteschlange für den Web Rendering Service, ein Headless Chromium. Google schreibt, dass eine Seite „ein paar Sekunden in dieser Warteschlange bleiben kann, es kann aber auch länger dauern“. Nach dem Rendering wird das entstandene HTML erneut auf Inhalte und Links analysiert und dann indexiert.

Vier Details aus der Google-Dokumentation sind für SPAs wichtig:

1. Nur <a>-Elemente mit href sind zuverlässige Links. Per JavaScript eingefügte Links sind in Ordnung, solange sie diesem Format folgen.
2. Fragmente sind keine eigenen Seiten. Google empfiehlt die History API (pushState) statt #-Routen. Sein altes AJAX-Crawling-Schema (die #!-URLs) hat Google im Oktober 2015 eingestellt.
3. Ein noindex im ursprünglichen HTML hat Vorrang. Google überspringt unter Umständen das Rendering, wenn es noindex sieht; es später per JavaScript zu entfernen, funktioniert also nicht.
4. Das Rendering nutzt zwischengespeicherte Dateien. Der Googlebot speichert JavaScript und CSS aggressiv im Cache, verwenden Sie daher Dateinamen mit Fingerprint (einem Inhalts-Hash im Dateinamen), um veraltete Bundles zu vermeiden.

Die Folge: Google kann eine clientseitig gerenderte SPA indexieren, aber Sie fügen jeder Seite einen zweiten Schritt, eine Verzögerung und eine Fehlerquelle hinzu. Ein Timeout, ein blockierter API-Aufruf oder ein JavaScript-Fehler beim Rendering, und die indexierte Version bleibt leer. Prüfen Sie mit dem URL-Prüftool der Search Console, was Google sieht, und lesen Sie unseren Leitfaden dazu, wie die Google-Indexierung funktioniert, wenn Seiten nicht in den Index gelangen.

Lesen ChatGPT, Claude und Perplexity JavaScript?

Größtenteils nicht. In einer im Dezember 2024 veröffentlichten Studie zum Traffic ihres Netzwerks stellten Vercel und MERJ fest, dass „keiner der großen KI-Crawler derzeit JavaScript rendert“: GPTBot, OAI-SearchBot und ChatGPT-User (OpenAI), ClaudeBot (Anthropic), PerplexityBot, Meta-ExternalAgent und Bytespider lesen alle nur das rohe HTML. Sie laden zwar JavaScript-Dateien herunter (rund 11,5 % der Anfragen von ChatGPT und 23,8 % der Anfragen von Claude), führen sie aber nicht aus. Ausnahmen sind Gemini, das auf die Rendering-Infrastruktur von Google zurückgreift, und AppleBot, der einen browserbasierten Crawler nutzt.

Für eine clientseitig gerenderte SPA bedeutet das: Die KI-Crawler, die ChatGPT, Claude und Perplexity mit Daten versorgen, sehen eine leere Seite. Ihr Produkt kann bei Google ranken und trotzdem in KI-Antworten unsichtbar bleiben, weil der Assistent nie ein Wort davon gelesen hat. Dasselbe gilt für die meisten Linkvorschau-Bots von sozialen Netzwerken und Messengern, die die Open-Graph-Tags im rohen HTML lesen. Sobald der Inhalt im HTML steht, prüfen Sie auch, ob Ihre robots.txt die gewünschten KI-Crawler zulässt.

Welche Rendering-Strategie sollte eine SPA nutzen?

Die Lösung besteht darin, schon mit der ersten Antwort echtes HTML zu senden. Google bezeichnet dynamisches Rendering (eine vorgerenderte Version nur für Bots) in seiner Dokumentation zum dynamischen Rendering als „Behelfslösung“, die es nicht empfiehlt, und verweist stattdessen auf serverseitiges Rendering, statisches Rendering oder Hydration. Die folgenden Definitionen orientieren sich an der Referenz Rendering on the Web auf web.dev.

Die meisten modernen Frameworks erlauben es, Strategien pro Route zu kombinieren: statisch für Marketingseiten, serverseitig gerendert für den Katalog, clientseitig gerendert für den eingeloggten Bereich. Dieses hybride Setup liefert Crawlern vollständiges HTML dort, wo Suchtraffic entsteht, und behält das SPA-Erlebnis dort, wo es einen Mehrwert bringt.

Framework-Optionen

Websites aus KI-Website-Baukästen verdienen eine besondere Erwähnung: Viele exportieren eine clientseitig gerenderte React-App. Wenn Sie Ihre Website mit einem solchen Tool gebaut haben, lesen Sie unsere Hinweise zu SEO und GEO mit Lovable, bevor Sie davon ausgehen, dass Google und ChatGPT sie lesen können.

SPA-SEO-Checkliste: was Sie Route für Route beheben sollten

1. Geben Sie jeder Ansicht eine saubere, crawlbare URL

Nutzen Sie die History API (/pricing, niemals /#/pricing), eine URL pro Inhalt und dieselbe URL, egal ob der Besucher direkt oder über die Navigation in der App kommt. Jede URL muss den richtigen Inhalt laden, wenn sie in einem neuen Tab geöffnet wird: Genau diesen Test führt ein Crawler durch.

2. Verwenden Sie echte Links

Jedes Navigationselement, das zu einer indexierbaren Seite führt, sollte ein <a href="/path"> sein. Link-Komponenten der Frameworks (Link, NuxtLink, routerLink) erzeugen dieses Markup, eigene Klick-Handler auf div- oder button-Elementen nicht. Gute Links tragen auch Ihre Website-Architektur: Ist eine Seite nicht verlinkt, finden Crawler sie selten.

3. Titel, Beschreibung und Canonical pro Route aktualisieren

Jede Route braucht eigene Title-, Meta-Description-, Canonical- und Open-Graph-Tags, nach Möglichkeit auf dem Server erzeugt. Unsere Seite zu Meta-Tags zeigt, was Sie festlegen sollten. Behalten Sie ein einziges Canonical-Tag: Google empfiehlt, es im HTML zu setzen, und wenn JavaScript es ändert, darf das Ergebnis dem Original nicht widersprechen.

4. Ehrliche Statuscodes zurückgeben

Fehlende Produkte und gelöschte Artikel dürfen nicht mit 200 und einer Fehlermeldung antworten. Mit SSR geben Sie vom Server einen echten 404- oder 410-Code zurück. In einer reinen SPA akzeptiert Google zwei Ausweichlösungen: eine JavaScript-Weiterleitung auf eine URL, die 404 zurückgibt, oder ein Robots-Meta-Tag noindex in der Fehleransicht.

5. Hauptinhalt und strukturierte Daten ins HTML stellen

Überschriften, Fließtext, Preise, FAQ und strukturierte Daten in JSON-LD sollten in der Serverantwort stehen und nicht erst nach einem Klick oder Scrollen geladen werden. Inhalte hinter Tabs, die erst bei Bedarf gerendert werden, oder hinter „Mehr laden“-Buttons werden oft übersehen.

6. JavaScript schlank halten

Teilen Sie das Bundle nach Routen auf, laden Sie alles, was für die erste Ansicht nicht nötig ist, später nach und vermeiden Sie es, während der Hydration die ganze Seite neu zu rendern. Beachten Sie, dass die Chrome-Felddaten (CrUX) die Messwerte von Navigationen innerhalb der App der URL zuordnen, die der Besucher zuerst geladen hat; testen Sie Ihre wichtigsten Templates daher einzeln.

7. Testen, was Bots erhalten

Vergleichen Sie für jedes wichtige Template drei Versionen: das rohe HTML (Quelltext ansehen oder die Seite mit einem Kommandozeilen-Tool abrufen), das von Google gerenderte HTML (URL-Prüfung, dann „Gecrawlte Seite anzeigen“) und die Seite mit deaktiviertem JavaScript. Erscheint der Haupttext nur in der zweiten Version, sehen KI-Crawler ihn nicht. Unser kostenloser Crawlability-Audit für KI und der Indexierbarkeits-Checker führen diese Prüfungen für jede URL durch.

Woran erkennen Sie, ob Ihre SPA ein SEO-Problem hat?

SPA-SEO und GEO: bei Google gefunden und von KI zitiert werden

Jahrelang war clientseitiges Rendering ein überschaubares Risiko, weil Google JavaScript irgendwann renderte. Seit ein Teil der Suche in ChatGPT, Claude, Gemini und Perplexity stattfindet, haben sich die Kosten verändert: Eine Seite, die erst nach der Ausführung von JavaScript existiert, fehlt in den Quellen, die die meisten Assistenten lesen können. Crawlbarkeit im rohen HTML ist zur ersten Voraussetzung der Generative Engine Optimization geworden.

Sobald das HTML vollständig ist, gelten die üblichen Regeln: Seiten, die eine Frage klar beantworten, mit belegten Fakten und strukturierten Daten, werden von Assistenten zitiert. Die Funktionen zur GEO-Optimierung von Sorank helfen Ihnen, solche Inhalte zu schreiben und zu veröffentlichen, und das Tracking von KI-Erwähnungen zeigt, ob ChatGPT, Claude und Gemini Ihre Marke nach der Rendering-Korrektur zitieren.

Die wichtigste Regel von Single Page Application SEO passt in einen Satz: Alles, was Google ranken und KI zitieren soll, muss im HTML stehen, das der Server ausliefert. Behalten Sie die SPA für den eingeloggten Bereich, rendern Sie öffentliche Seiten auf dem Server oder beim Build und testen Sie vor und nach jedem Release, was Bots erhalten.