Was ist eine Single-Page-Application?
Klickst du auf einer normalen Website auf einen Link, holt der Browser eine neue Seite vom Server. Bei einer Single-Page-Application passiert das nicht. Der Browser lädt einmal ein Dokument, danach tauscht JavaScript nur noch den Inhalt aus.
Das Ergebnis fühlt sich an wie eine App: kein weißes Aufblitzen, keine kompletten Neuladungen. Gmail und viele Web-Tools funktionieren so. Die URL ändert sich trotzdem, auch wenn gar keine neue Seite geladen wird. Diesen Wechsel nennt man Soft Navigation.
Die Kehrseite benennt die MDN-Dokumentation offen: SEO, Navigation und aussagekräftige Performance-Messung werden aufwendiger. Für dich als Marketer heißt das: Eine SPA ist keine reine Technikfrage.
Wer baut hier eigentlich das HTML?
Für SEO zählt die Frage, wann fertiger Inhalt entsteht. Die vier gängigen Wege:
Verfahren
Was passiert
CSR
Der Browser baut die Seite per JavaScript.
SSR
Der Server schickt fertiges HTML.
SSG
Das HTML entsteht schon beim Build.
Hydration
Skripte machen Server-HTML interaktiv.
Eine reine CSR-SPA schickt zuerst oft nur eine leere Hülle. Google nennt das „App-Shell“-Modell und muss erst JavaScript ausführen, um Inhalt zu sehen. Das klappt, aber es ist ein zusätzlicher Schritt.
Was heißt das für SEO?
„Google kann SPAs nicht lesen“ stimmt nicht. Vercel und MERJ werteten im April 2024 über 100.000 Googlebot-Abrufe aus, vor allem auf nextjs.org: Alle HTML-Seiten mit Status 200 dort wurden vollständig gerendert, im Median nach 10 Sekunden. Einzelne Fälle dauerten aber Stunden. Die Studie stammt von einem Anbieter und deckt gut gepflegte Next.js-Sites ab.
Google selbst nennt ein paar klare Regeln:
- Echte Links: Navigation als <a href>, nicht nur per Klick-Skript.
- History API statt URL-Fragmenten mit #.
- Saubere Fehlerseiten: Liefert jede URL Status 200, drohen Soft 404. Google nennt als Auswege eine Weiterleitung auf eine URL mit echtem 404 oder ein per JavaScript gesetztes noindex.
- Kein Dynamic Rendering als Dauerlösung: Google nennt es einen Workaround und empfiehlt Server-Side Rendering, Static Rendering oder Hydration.
Tracking und Core Web Vitals
Ohne Zutun hält Google Analytics deine SPA für eine einzige Seite, und das verzerrt laut Google die Zahlen. In GA4 hilft die erweiterte Messung mit der Option für Seitenwechsel durch Browserverlauf-Ereignisse. Prüf das im Bericht DebugView über page_location und page_referrer.
Auch die Core Web Vitals erfassten lange nur echte Seitenaufrufe, Routenwechsel fielen unter den Tisch. Das ändert sich gerade: Seit Oktober 2026 veröffentlicht der Chrome-Felddatensatz CrUX experimentelle Werte mit Soft Navigations, der Abschluss ist für Mai 2027 angestrebt. Bei Websites mit überwiegend Soft Navigations steigt der Anteil mit gutem LCP auf Android dabei von 26 % auf 87 %.
Die stabilen Werte bleiben vorerst gleich. Über Rankings sagt das nichts. Google betont ohnehin, keine Vorliebe für eine bestimmte Architektur zu haben.
Häufige Fehler
Fehler 1 · Doppelt zählen
Steuerst du Tags über den Google Tag Manager, soll das automatische History-Tracking in GA aus bleiben. Sonst warnt Google vor doppelt gezählten Seitenaufrufen.
Fehler 2 · noindex per JavaScript entfernen
Steht noindex im ersten HTML, kann Google das Rendering überspringen. Dein Skript, das es später entfernt, läuft dann gar nicht.
Fehler 3 · Eine SPA bauen, wo keine nötig ist
Für Blog, Unternehmensseite oder Landingpage bringt eine SPA meist nur Zusatzaufwand. Ihre Stärke liegt in Anwendungen, die Nutzer länger bedienen: Portale, Konfiguratoren, Dashboards.
Häufige Fragen
Ist eine Single-Page-Application schlecht für SEO?
Nicht automatisch. Google rendert JavaScript, aber Fehler bei Links, Statuscodes und Metadaten wiegen schwerer. Am sichersten fährst du mit Server-Side Rendering oder Static Rendering.
Wie zähle ich in GA4 Seitenaufrufe in einer SPA?
Aktivier in der erweiterten Messung die Option für Seitenwechsel über Browserverlauf-Ereignisse und prüf das Ergebnis in DebugView. Läuft dein Tracking über den Tag Manager, lass diese Option aus.
Was ist der Unterschied zwischen SPA und MPA?
Bei einer Multi-Page-Application ist jede Ansicht eine eigene Seite vom Server, klassisch etwa bei WordPress. Bei einer SPA bleibt das Dokument dasselbe, und JavaScript tauscht nur den Inhalt.
Was ist eine Soft Navigation?
Chrome versteht darunter eine Nutzeraktion, die die sichtbare URL ändert und neuen Inhalt zeichnet, ohne ein neues Dokument zu laden. Für den Besucher sieht das aus wie ein Seitenwechsel.
Brauche ich als KMU überhaupt eine SPA?
Für eine normale Website fast nie. Ein gut gebautes WordPress reicht und ist für SEO einfacher. Eine SPA lohnt sich, wenn du eine echte Anwendung baust, etwa ein Kundenportal.
Quellen
- MDN Web Docs: SPA (Single-page application)
- Google Search Central: JavaScript-SEO-Grundlagen
- Google Search Central: Dynamic Rendering
- Google Analytics: Single-Page-Applications messen
- web.dev: Core Web Vitals und SPAs
- web.dev: Soft Navigations in CrUX
- Chrome for Developers: Soft Navigations
- web.dev: Rendering im Web
