SPA SEO erklärt: So werden Single Page Apps sichtbar

Früher nutzten Webentwickler HTML für Inhalte, CSS für das Design und JavaScript (JS) für interaktive Elemente. Mit JS lassen sich Features wie Pop-up-Dialoge oder ausklappbare Inhalte auf Webseiten realisieren. Heute setzen über 98 % aller Websites auf JavaScript – vor allem, weil es Inhalte dynamisch anpassen kann, abhängig davon, wie der Nutzer mit der Seite interagiert.

Ein vergleichsweise neuer Trend ist der Einsatz von JavaScript für Single Page Applications (SPAs). Anders als klassische Websites, die bei jedem Bedarf erneut HTML-, CSS- und JS-Dateien vom Server abrufen, laden SPAs ihre Ressourcen nur einmal initial. Die weitere Verarbeitung übernimmt der Browser, ohne den Server zusätzlich zu belasten.

Das Ergebnis: deutlich schnellere Websites – und das ist entscheidend, denn Studien zeigen, dass Online-Käufer erwarten, dass eine Seite innerhalb von drei Sekunden lädt. Jede zusätzliche Sekunde Ladezeit kostet potenzielle Kunden. Die SPA-Architektur kann hier eine wirksame Lösung sein, birgt jedoch erhebliche SEO-Risiken, wenn sie falsch umgesetzt wird.

In diesem Beitrag erfährst du, wie Single Page Apps aufgebaut sind, welche besonderen Herausforderungen sie für die Optimierung mitbringen und wie du SPA SEO richtig angehst. Machst du alles korrekt, verstehen Suchmaschinen deine SPAs und belohnen sie mit starken Rankings.

SPA kurz erklärt

Eine Single Page Application (SPA) ist eine spezielle, JavaScript-basierte Technologie für die Webentwicklung, bei der nach dem initialen Laden keine weiteren kompletten Seitenaufrufe mehr nötig sind. Zu den beliebtesten JavaScript-Frameworks für den Aufbau von SPAs gehören React, Angular und Vue. Sie unterscheiden sich vor allem in den unterstützten Bibliotheken und APIs, verfolgen jedoch alle dasselbe Ziel: schnelles Client-Side-Rendering.

SPAs steigern die Geschwindigkeit einer Website erheblich, da sie die Anzahl der Anfragen zwischen Server und Browser minimieren. Für Suchmaschinen ist dieser JavaScript-Trick jedoch weniger attraktiv. Suchmaschinen interagieren nicht wie ein Nutzer mit einer Website. Dadurch kann es an zugänglichen Inhalten fehlen. Wird eine Single Page Application nicht korrekt umgesetzt, besteht die Gefahr, dass Suchmaschinen dynamisch geladene Inhalte nicht erkennen und stattdessen nur leere Seiten indexieren.

Endnutzer profitieren von der SPA-Technologie, weil sie sich ohne zusätzliche Ladezeiten und störende Layout-Verschiebungen bequem durch die Inhalte einer Website bewegen können. Da Single Page Applications nach dem initialen Laden alle Ressourcen im lokalen Speicher ablegen, lassen sie sich auch bei instabiler Internetverbindung weiter nutzen. Diese Vorteile für die Nutzer sorgen dafür, dass sich die Technologie weiterhin durchsetzt, auch wenn sie aus SEO-Sicht durchaus anspruchsvoll ist.

Beispiele für SPAs

Viele bekannte Websites setzen auf eine Single-Page-Application-Architektur. Zu den populärsten gehören:

• Google Maps

Google Maps ermöglicht es, Karten anzusehen und Routen zu planen. Beim Aufruf der Website wird nur eine einzige Seite geladen, alle weiteren Interaktionen erfolgen dynamisch über JavaScript. Nutzer können die Karte verschieben und zoomen, woraufhin die Anwendung den Kartenausschnitt aktualisiert – ohne die Seite neu zu laden.

• Airbnb

Airbnb ist eine beliebte Plattform zur Buchung von Unterkünften und nutzt ein Single-Page-Design, das sich dynamisch anpasst, wenn Nutzer nach Unterkünften suchen. Filterfunktionen und die Detailansicht einzelner Objekte funktionieren ohne das Laden neuer Seiten.

• Facebook 

Nach dem Login bei Facebook ist kein Seiten-Reload erforderlich. Stattdessen steht den Nutzern eine einzige Seite zur Verfügung, auf der sie mit Posts, Fotos und Kommentaren interagieren können.

• Trello

Trello ist ein webbasiertes Projektmanagement-Tool, das komplett als SPA umgesetzt ist. Das Single-Page-Design ermöglicht es, Projekte, Karten und Listen zu erstellen, zu verwalten und gemeinsam zu bearbeiten, ohne die Seite neu zu laden.

• Spotify 

Spotify ist ein populärer Musikstreaming-Dienst. Nutzer können auf einer einzigen Seite Musik durchsuchen, suchen und abspielen – ganz ohne Neuladen oder das Wechseln zwischen Seiten.

Sind Single Page Applications gut für SEO?

Ja – wenn sie klug umgesetzt werden.

Der SPA-Ansatz ist bei Webentwicklern beliebt, weil er hohe Geschwindigkeit und schnelle Entwicklungszyklen ermöglicht. Auf Basis desselben Codes können verschiedene Plattform-Versionen erstellt werden, was die Entwicklung von Desktop- und Mobile-Apps deutlich beschleunigt und effizienter macht.

Auch wenn SPAs zahlreiche Vorteile für Nutzer und Entwickler bieten, stellen sie die Suchmaschinenoptimierung vor einige Herausforderungen. Da Suchmaschinen traditionell auf HTML-Inhalte angewiesen sind, um Websites zu crawlen und zu indexieren, kann es bei stark JavaScript-lastigen SPAs zu Problemen beim Zugriff auf Inhalte kommen. Das führt nicht selten zu Einschränkungen bei Crawlability und Indexierbarkeit.

Für Nutzer wie auch für die SEO-Optimierung kann der Ansatz lohnend sein – vorausgesetzt, es werden die richtigen Schritte unternommen, um eine einfache Indexierung und Crawlbarkeit sicherzustellen. Mit einer durchdachten Optimierung kann eine SPA genauso SEO-freundlich sein wie eine klassische Website.

Als Nächstes erfährst du, wie du SEO Single Page App einsetzt, um deine Websites effektiv zu optimieren.

Warum die Optimierung von SPAs schwierig ist

Bevor JavaScript im Web-Development dominierte, crawelten und indexierten Suchmaschinen ausschließlich textbasierte Inhalte aus HTML. Mit dem steigenden Einsatz von JS erkannte Google die Notwendigkeit, JavaScript-Ressourcen zu verarbeiten und Seiten zu verstehen, die stark darauf setzen. Die Google-Crawler haben in den vergangenen Jahren große Fortschritte gemacht, um Inhalte von Single Page Applications zugänglich zu machen.

Auch andere Suchmaschinen arbeiten daran, JavaScript-Websites besser zu crawlen. Bing empfiehlt – wie auch Google – serverseitiges Pre-Rendering. Diese Technologie ermöglicht es dem Bingbot (und anderen Crawlern), auf statisches HTML zuzugreifen, das als vollständigste Version einer Website gilt. Da DuckDuckGo und Yahoo! ihre Suchergebnisse größtenteils von Bing beziehen, können auch sie SPAs crawlen.

Obwohl die Diskussion über die Auswirkungen von JavaScript auf Sichtbarkeit und Rankings weiterläuft, ist es falsch zu behaupten, dass JavaScript oder seine Frameworks die Website-Optimierung grundsätzlich gefährden. Unsachgemäße Implementierung kann jedoch dein Ranking-Potenzial erheblich schmälern – halte dich daher unbedingt an die Best Practices für SPA SEO, die wir im nächsten Abschnitt vorstellen.

Crawling-Herausforderungen

Damit Googlebot versteckte Inhalte erkennt, muss er das JavaScript einer Seite zunächst parsen, kompilieren und ausführen. Zunächst sieht er meist nur einen einzelnen Link zur JS-Datei. Erst nach diesem Verarbeitungsschritt kann Googlebot den gesamten Seiteninhalt in den HTML-Tags erfassen. Lange Zeit gab es hierbei Verzögerungen, sodass clientseitig geladenes JS nicht immer vollständig erkannt oder korrekt indexiert wurde.

Heute verarbeitet die Google-Suche JavaScript fast genauso gut wie herkömmliche Webseiten. Das bestätigt eine Studie von Vercel und MERJ, die über 100.000 Googlebot-Abrufe auf verschiedenen Websites analysierte. Google verbessert kontinuierlich die Fähigkeit des Googlebots, Websites zu crawlen und zu indexieren, indem neueste Web-Technologien integriert werden.

Ein wichtiger Meilenstein war die Einführung des Evergreen-Googlebot, der stets auf der aktuellsten Version der Chromium-Rendering-Engine (derzeit Version 114) basiert. Dadurch stehen ihm zahlreiche Features moderner Browser zur Verfügung, was die Fähigkeit zur Darstellung und zum Verständnis von Inhalten und Strukturen moderner Websites – einschließlich Single Page Applications – deutlich verbessert. Inhalte können heute effizienter gecrawlt und indexiert werden.

Allerdings gilt: Auch wenn Google JS-lastige Seiten inzwischen zuverlässig rendern kann, ist dieser Prozess deutlich ressourcenintensiver als bei statischem HTML. Das Herunterladen, Parsen und Ausführen großer JavaScript-Mengen erfordert erheblich mehr Rechenleistung.

URL-Struktur und Routing

SPAs bieten zwar eine optimierte User Experience, doch ihre oft unklare URL-Struktur und das komplexe Routing erschweren den Aufbau einer effektiven SEO-Strategie. Im Gegensatz zu klassischen Websites, die für jede Seite eine eigene URL haben, besitzen SPAs in der Regel nur eine einzige URL für die gesamte Anwendung und aktualisieren Inhalte dynamisch über JavaScript.

Entwickler müssen die URLs daher gezielt so gestalten, dass sie intuitiv, beschreibend und inhaltlich aussagekräftig sind und das visuelle Seiten-Content korrekt widerspiegeln.

Um diese Herausforderungen zu meistern, kannst du Server-Side-Rendering oder Pre-Rendering einsetzen. Damit werden statische Versionen der SPA erzeugt. Eine weitere Möglichkeit ist die Nutzung der History API bzw. der pushState()-Methode. Diese erlaubt es, Ressourcen asynchron abzurufen und URLs zu aktualisieren, ohne Fragment-Identifiers zu verwenden. In Kombination mit der History API entstehen so URLs, die den tatsächlich angezeigten Inhalt präzise widerspiegeln.

Tracking-Herausforderungen

Google-Analytics-Tracking stellt eine weitere Herausforderung bei der SEO Single Page App dar. Klassische Websites zählen jeden Seitenaufruf zuverlässig, da der Analytics-Code bei jedem Laden oder Neuladen einer Seite ausgeführt wird. In einer SPA wird der Code jedoch nur einmal beim ersten Aufruf ausgelöst – das Navigieren zwischen einzelnen Ansichten erzeugt keine zusätzlichen Pageviews.

Da Inhalte dynamisch nachgeladen werden, erhält Google Analytics für jede Ansicht keine separate Serverantwort. Deshalb liefern Standardberichte in GA4 in diesem Szenario nicht die erforderlichen Daten. Diese Einschränkung lässt sich jedoch umgehen, indem du die Enhanced Measurement-Funktion von GA4 nutzt und den Google Tag Managerentsprechend konfigurierst. 

Auch Paginierung kann für das SPA SEO problematisch sein, da Suchmaschinen Schwierigkeiten haben können, dynamisch geladene paginierte Inhalte zu crawlen und zu indexieren. Glücklicherweise gibt es Methoden, um Nutzeraktivitäten auf SPA-Websites dennoch präzise zu tracken – diese erfordern jedoch zusätzlichen Aufwand. Auf diese Methoden gehen wir später noch genauer ein.

So optimierst du SPAs für SEO

Bevor du unsere Tipps für Single Page Application SEO umsetzt, brauchst du ein zuverlässiges Tool, um einen vollständigen Website-Audit durchzuführen und alle bestehenden Probleme zu identifizieren.

Wir empfehlen das Website-Audit von SE Ranking. Dieses Tool prüft deine Website anhand von über 110 Parametern – darunter User Experience, Indexierung, Sicherheitsaspekte, Lokalisierung, interne Verlinkung und vieles mehr. In der Version 2.0 verfügt es über eine JavaScript-Rendering-Funktion, mit der sich clientseitig gerenderte Websites wie jede andere analysieren lassen. Aktiviere diese Funktion einfach in den Einstellungen, um sie zu nutzen.

Werfen wir nun einen Blick auf die Best Practices für Single Page Application SEO.

Server-Side-Rendering (SSR)

Beim Server-Side-Rendering wird eine Website auf dem Server gerendert und anschließend an den Browser gesendet. Diese Technik ermöglicht es Suchmaschinen-Bots, den gesamten Website-Content zu crawlen – auch Inhalte, die auf JavaScript basieren. Für Crawlability und Indexierung ist SSR daher oft ein echter Lebensretter, kann jedoch die Ladezeit verlängern. Ein wichtiger Punkt: SSR unterscheidet sich vom typischen SPA-Ansatz. Single Page Applications setzen primär auf Client-Side-Rendering, das ihre schnelle, interaktive und nahtlose User Experience ermöglicht und zudem den Deployment-Prozess vereinfacht.

Isomorphes JavaScript

Eine mögliche Rendering-Lösung für Single Page Applications ist isomorphes oder auch universelles JavaScript. Isomorphes JS übernimmt einen großen Teil der Seitenerstellung auf dem Server und erspart Suchmaschinen-Crawlern so die Ausführung und das Rendering von JS-Dateien.

Der „Magie“-Effekt isomorpher JavaScript-Anwendungen liegt in ihrer Fähigkeit, sowohl auf dem Server als auch im Browser zu laufen. Für den Nutzer wirkt es so, als würde der Inhalt direkt im Browser gerendert – tatsächlich greift er jedoch auf eine HTML-Datei zu, die auf dem Server erzeugt wurde.

Für jedes gängige SPA-Framework gibt es passende Tools für die Entwicklung isomorpher Anwendungen. Beispiele aus dem React-Ökosystem sind Next.js und Gatsby: Next.js generiert HTML bei jeder Anfrage, während Gatsby eine statische Website erstellt und das HTML in der Cloud speichert. Für Vue gibt es Nuxt.js, das JavaScript serverseitig in HTML rendert und die fertigen Daten an den Browser sendet.

Pre-Rendering

Eine weitere bewährte Lösung für Single Page Applications ist das Pre-Rendering. Dabei werden alle HTML-Elemente im Voraus geladen, im Server-Cache gespeichert und anschließend an Suchmaschinen-Crawler ausgeliefert. Dienste wie Prerender oder BromBone fangen Anfragen an eine Website ab und zeigen Suchmaschinen-Bots und echten Nutzern unterschiedliche Versionen der Seite: Den Crawlern wird das gecachte HTML präsentiert, während menschliche Besucher die „normale“, JavaScript-reiche Version sehen.  

Es gibt auch andere – allerdings zeitaufwendigere – Methoden, um Crawlern statisches HTML bereitzustellen. Ein Beispiel ist der Einsatz von Headless Chrome in Kombination mit der Puppeteer-Bibliothek. Diese wandeln die einzelnen Routen einer Website in hierarchische Bäume aus HTML-Dateien um. Dafür müssen jedoch der Bootstrap-Code entfernt und die Serverkonfiguration so angepasst werden, dass Suchmaschinen-Crawler die statischen HTML-Dateien finden.

Progressive Enhancement mit Feature Detection

Bei dieser Technik wird die Benutzererfahrung schrittweise durch verschiedene Code-Ressourcen erweitert. Die Basis bildet eine einfache HTML-Seite, die sowohl für Suchmaschinen-Crawler als auch für Nutzer zugänglich ist. Darauf aufbauend werden zusätzliche Funktionen – etwa CSS- oder JavaScript-Elemente – je nach Browserunterstützung aktiviert oder deaktiviert. 

Für die Feature Detection schreibst du separate Code-Blöcke, die prüfen, ob jede benötigte Feature-API mit dem jeweiligen Browser kompatibel ist. Praktischerweise helfen Bibliotheken wie Modernizr dabei, diesen Prozess zu vereinfachen und Zeit zu sparen.

Views als URLs crawlbar machen

Wenn Nutzer durch eine SPA scrollen, durchlaufen sie verschiedene Bereiche der Website. Technisch gesehen besteht eine SPA jedoch nur aus einer einzelnen Seite (einer einzigen index.html-Datei), während es sich für Besucher so anfühlt, als würden sie mehrere Seiten aufrufen. Diese sogenannten Views sind HTML-Abschnitte, die von Nutzern wie einzelne Screens oder Seiten wahrgenommen werden.

In einer klassischen SPA ändert sich die URL beim Wechsel zwischen Bereichen oft nur im Hash-Teil (z. B. http://website.com/#/about oder http://website.com/#/contact). Das JavaScript-Skript weist den Browser an, den entsprechenden Content anhand dieser Fragment-Identifier (Hash-Änderungen) zu laden. 

Damit Suchmaschinen verschiedene Bereiche als eigenständige Seiten erkennen, solltest du eindeutige URLs mit der History API implementieren. Diese standardisierte HTML5-Methode ermöglicht die Manipulation des Browserverlaufs. Google Codelabs empfiehlt ausdrücklich, die History API anstelle von hashbasiertem Routing zu verwenden, um sicherzustellen, dass Suchmaschinen die unterschiedlichen Content-Fragmente als separate Seiten behandeln. So kannst du Navigationslinks in Pfade statt in Hashes umwandeln.

Beispiel: Eine SPA mit den Bereichen „Homeseite“, „Über uns“ und „Kontakt“ kann mithilfe der History API beim Klick auf einen Link die URL in yourwebsite.com/about, yourwebsite.com/home oder yourwebsite.com/contact ändern – ohne die Seite neu zu laden.

Auch Google-Analyst Martin Splitt rät dazu, Views als eigenständige URLs zu behandeln und dabei die History API zu nutzen. Er betont außerdem, dass Links für Suchmaschinen crawlbar sein müssen – verwende dafür stets das <a>-Tag mit einem href-Attribut, anstatt nur auf ein onclick-Event zu setzen. JavaScript-onclick-Links sind für Google unsichtbar und können nicht gecrawlt werden.

Grundregel: Links müssen crawlbar sein. Halte dich an die Google-Standards für SPA SEO, sodass Links beispielsweise so aussehen:

<a href="https://yoursite.com">
<a href="/services/category/SEO">

Zwar kann Google versuchen, abweichend formatierte Links zu interpretieren, es gibt jedoch keine Garantie, dass dies funktioniert. Vermeide Link-Formate wie:

<a routerLink="services/category">
<span href="https://yoursite.com">
<a onclick="goto('https://yoursite.com')">

Beginne damit, Links ausschließlich mit dem <a>-HTML-Element anzulegen, da Google dies als klassischen Link erkennt. Die darin enthaltene URL muss gültig, funktionsfähig und URI-konform sein. Andernfalls können Website und Inhalte nicht korrekt gecrawlt oder indexiert werden.

Views für Fehlerseiten

Bei Single-Page-Websites übernimmt der Server in der Regel kein eigenes Error-Handling und gibt stets den Statuscode 200 zurück – auch dann, wenn ein Fehler vorliegt. Das signalisiert (in diesem Fall fälschlicherweise), dass alles in Ordnung ist.

Da Nutzer jedoch gelegentlich eine falsche URL aufrufen können, sollte es unbedingt eine Möglichkeit geben, Fehlermeldungen korrekt darzustellen. Google empfiehlt, separate Views für jeden relevanten Fehlercode (z. B. 404, 500 usw.) anzulegen und die JavaScript-Datei so anzupassen, dass der Browser gezielt zu der entsprechenden Fehleransicht geleitet wird.

Titel und Beschreibungen für Views

Meta Titles und Descriptions sind zentrale Elemente des On-Page-SEO. Gut formulierte Titel und Beschreibungen verbessern sowohl die Sichtbarkeit einer Website in den SERPs als auch die Klickrate.

Im SPA SEO ist die Verwaltung dieser Meta-Tags jedoch eine besondere Herausforderung, da in der Regel nur eine einzelne HTML-Datei und eine URL für die gesamte Website vorhanden sind. Gleichzeitig gehören doppelte Titel und Descriptions zu den häufigsten SEO-Problemen.

Der Schlüssel liegt darin, für jeden Abschnitt deiner Single-Page-Website eigene Views zu erstellen – und ihnen individuelle Titel und Beschreibungen zuzuweisen, die den jeweiligen Content exakt widerspiegeln.

Nutze Tools, die dir helfen, solche und andere SEO-Probleme zu identifizieren und zu beheben. Der On-Page SEO Checker von SE Ranking ist hierfür ideal geeignet: Er ermöglicht die Optimierung deines Seiteninhalts auf deine Ziel-Keywords sowie die Anpassung von Seitentitel, Description und weiteren Elementen.

Eine strategische Herangehensweise an die On-Page-Optimierung ist entscheidend, um deine SPA sowohl für Suchmaschinen als auch für Nutzer optimal aufzustellen. Hier findest du den vollständigen On-Page-SEO-Guide mit den wichtigsten Strategien für die On-Site-Optimierung.

Entwickler können in einer SPA mithilfe von JavaScript sowohl die Meta-Description als auch das <title>-Element setzen oder ändern.

Robots-Meta-Tags verwenden

Robots-Meta-Tags geben Suchmaschinen vor, wie sie die Seiten einer Website crawlen und indexieren sollen. Richtig eingesetzt stellen sie sicher, dass Suchmaschinen die wichtigsten Bereiche einer Website erfassen und gleichzeitig Duplicate Content oder falsche Indexierungen vermeiden.

Beispielsweise verhindert die Anweisung nofollow, dass Suchmaschinen Links innerhalb einer bestimmten View folgen. Mit der Anweisung noindex im Robots-Meta-Tag kannst du wiederum bestimmte Views oder Abschnitte einer SPA vollständig von der Indexierung ausschließen:

<meta name="robots" content="noindex, nofollow">

Du kannst Robots-Meta-Tags auch per JavaScript hinzufügen. Allerdings gilt: Befindet sich auf einer Seite ein noindex-Tag, wird Google auf dieser Seite weder JavaScript rendern noch ausführen. In diesem Fall sind Änderungen oder das Entfernen des noindex-Tags per JavaScript wirkungslos, da Google den entsprechenden Code gar nicht erst liest.

Führe unbedingt einen SPA-Audit durch, um potenzielle Probleme mit Robots-Meta-Tags zu identifizieren und zu beheben.

Soft-404-Fehler vermeiden

Ein Soft-404-Fehler tritt auf, wenn eine Website eigentlich den HTTP-Statuscode 404 (Not Found) zurückgeben sollte, stattdessen aber den Code 200 (OK) sendet.

Für SPA-Websites kann dies aufgrund ihrer Architektur und Technologie besonders problematisch sein. Da SPAs stark auf JavaScript setzen, um Inhalte dynamisch zu laden, erkennt der Server nicht immer zuverlässig, ob die angeforderte Seite tatsächlich existiert. Client-Side-Routing, das bei clientseitig gerenderten SPAs üblich ist, erschwert zudem die Vergabe aussagekräftiger HTTP-Statuscodes.

Du kannst Soft-404-Fehler vermeiden, indem du eine der folgenden Techniken anwendest:

• Verwende einen JavaScript-Redirect zu einer URL, die vom Server korrekt den Statuscode 404 zurückgibt.
• Füge über JavaScript ein noindex-Tag zu Fehlerseiten hinzu.

Lazy Loaded Content

Beim Lazy Loading werden Inhalte – zum Beispiel Bilder oder Videos – nur dann geladen, wenn sie tatsächlich benötigt werden, etwa wenn der Nutzer nach unten scrollt. Diese Technik kann die Ladegeschwindigkeit und Nutzererfahrung erheblich verbessern, insbesondere bei SPAs, bei denen ansonsten große Mengen an Content auf einmal geladen würden.

Wird Lazy Loading jedoch falsch umgesetzt, kann es passieren, dass Inhalte für Google unsichtbar bleiben. Deshalb solltest du sicherstellen, dass Google alle Inhalte deiner Seite sehen und indexieren kann. So gehst du vor:

• Native Lazy-Loading für Bilder und iframes mithilfe des loading-Attributs einsetzen.
• IntersectionObserver API verwenden, um zu erkennen, wann ein Element in den Viewport eintritt oder ihn verlässt. Ergänze bei Bedarf ein Polyfill für Browserkompatibilität.
• JavaScript-Bibliothek einsetzen, die das Nachladen von Inhalten beim Eintritt in den Viewport erleichtert.

Überprüfe unbedingt, ob die gewählte Methode einwandfrei funktioniert. Führe lokale Tests mit einem Puppeteer-Skript durch und nutze das URL-Inspection-Tool in der Google Search Console, um sicherzugehen, dass alle Bilder korrekt geladen wurden.

Social Shares und strukturierte Daten

Die Optimierung für Social Sharing wird von Websites oft vernachlässigt. Auch wenn sie auf den ersten Blick nebensächlich erscheint, trägt die Implementierung von XCards und Facebook Open Graph dazu bei, dass Inhalte auf den wichtigsten Social-Media-Plattformen ansprechend und einheitlich geteilt werden – was wiederum deiner Sichtbarkeit in den Suchergebnissen zugutekommt. Ohne diese Protokolle kann es passieren, dass beim Teilen deines Links ein zufälliges und unter Umständen irrelevantes Vorschaubild angezeigt wird.

Ebenso wertvoll ist der Einsatz strukturierter Daten, um unterschiedliche Content-Typen für Suchmaschinen-Crawler verständlicher zu machen. Schema.org bietet dafür Markup-Optionen für Inhalte wie Videos, Rezepte, Produkte und viele weitere.

Du kannst die erforderlichen strukturierten Daten in Form von JSON-LD auch per JavaScript für deine SPA generieren und in die Seite einfügen. JSON-LD ist ein leichtgewichtiges Datenformat, das sich einfach erstellen und verarbeiten lässt.

Führe unbedingt einen Rich-Results-Test in Google durch, um festzustellen, welche Datentypen aktuell zugewiesen sind, und um Rich Snippets für deine Webseiten zu aktivieren.

Eine SPA auf SEO testen

Es gibt verschiedene Möglichkeiten, die SEO-Performance deiner SPA-Website zu überprüfen. Du kannst Tools wie die Google Search Console oder den Mobile-Friendly-Test einsetzen oder deine Inhalte direkt in den Suchergebnissen inspizieren. Im Folgenden zeigen wir dir, wie du diese Methoden nutzt.

URL-Überprüfung in der Google Search Console

Im Bereich URL-Überprüfung der Google Search Console erhältst du grundlegende Informationen zum Crawlen und zur Indexierung deiner Website. Zwar bietet dieser Bereich keine vollständige Vorschau darauf, wie Google deine Seite rendert, doch er liefert wichtige Basisdaten, darunter:

• Ob die Suchmaschine deine Website crawlen und indexieren kann
• Das gerenderte HTML
• Seitenressourcen, die von Suchmaschinen nicht geladen oder verarbeitet werden können

Zusätzlich kannst du die zugehörigen Berichte öffnen, um Details zur Seitenindexierung, mobilen Nutzerfreundlichkeit, HTTPS und Logos einzusehen.

Mobile-Friendly-Test

Seit 2019 setzt Google auf Mobile-First-Indexing – das bedeutet, dass für das Ranking primär die mobile Version einer Seite herangezogen wird. Wenn Inhalte auf mobilen Geräten nicht zugänglich sind, riskierst du, in den Suchergebnissen übergangen zu werden. Deine Website sollte daher immer einwandfrei aussehen, leicht zu bedienen sein und auf mobilen Endgeräten wie Smartphones, Tablets oder E-Readern optimal funktionieren.

Mit dem Mobile-Friendly-Test-Tool kannst du die Mobilfreundlichkeit deiner Website prüfen. Es bewertet sowohl technische Faktoren (z. B. Ladegeschwindigkeit) als auch Usability-Aspekte (Viewport-Einstellungen, Textgröße, Touch-Elemente und Darstellung der Inhalte auf dem Bildschirm).

Ein weiteres hervorragendes Test-Tool für SPAs ist Headless Chrome. Es eignet sich auch, um zu beobachten, wie JavaScript ausgeführt wird. Anders als herkömmliche Browser verfügt ein Headless-Browser zwar nicht über eine vollständige Benutzeroberfläche, bietet aber dieselbe Umgebung, die auch echte Nutzer erleben. 

Zusätzlich kannst du mit Tools wie BrowserStack testen, wie deine SPA in verschiedenen Browsern dargestellt wird.

Lies auch unseren Mobile-SEO-Guide (auf Englisch), um Profi-Tipps für die Erstellung mobiler Websites zu erhalten.

Gecachte Versionen deiner Seiten prüfen

Seit Google die Cache-Links entfernt und die Cache-Funktion deaktiviert hat, müssen Nutzer andere Wege finden, um archivierte Seiten zu überprüfen.

Eine Möglichkeit ist der Einsatz des Google Cache Checker – ein kostenloses und einfaches Tool, mit dem du die gespeicherte Version deiner Seiten abrufen kannst. Das Tool leitet dich anschließend zum Web Archive weiter und zeigt die zuletzt gesicherte Kopie an.

Content in den SERPs prüfen

Es gibt mehrere Möglichkeiten, zu überprüfen, wie deine SPA in den Suchergebnissen erscheint: 

• Suche in den SERPs nach direkten Zitaten aus deinem Content, um festzustellen, ob die Seite mit diesem Text indexiert ist.
• Verwende den site:-Befehl, um deine URLs in den Suchergebnissen zu überprüfen.

Kombiniere beide Methoden: Gib zum Beispiel site:deinedomain.de “Content-Zitat” ein. Wenn der Inhalt gecrawlt und indexiert wurde, erscheint er in den Suchergebnissen.

An grundlegender SEO führt kein Weg vorbei

Neben den spezifischen Herausforderungen von Single Page Applications gelten auch hier die bewährten Grundlagen der Suchmaschinenoptimierung. Achte insbesondere auf folgende Basiselemente:

• Sicherheit: Deine Website sollte mit HTTPS abgesichert sein. Ohne Verschlüsselung riskierst du nicht nur, dass Suchmaschinen deine Seite herabstufen, sondern setzt auch Nutzerdaten einem erhöhten Risiko aus. Website-Sicherheit ist keine einmalige Aufgabe, sondern erfordert regelmäßige Kontrolle. Überprüfe dein SSL/TLS-Zertifikat regelmäßig mit dem Website-Audit-Tool von SE Ranking, um sicherzustellen, dass deine Seite jederzeit sicher erreichbar ist.

• Content-Optimierung: Wie bereits besprochen, solltest du für jede View in deiner SPA eigene Title-Tags und Meta-Descriptions erstellen – so wie bei einer klassischen Multi-Page-Website. Die Grundlage dafür ist jedoch eine saubere Content-Optimierung: Inhalte sollten klar auf die Nutzerintention abgestimmt, gut strukturiert, visuell ansprechend und reich an nützlichen Informationen sein. Ohne eine gezielte Keyword-Recherche wird es schwierig, den Content zu liefern, den deine Zielgruppe sucht.
• Linkbuilding: Backlinks sind für Google ein zentrales Signal, wie vertrauenswürdig andere Quellen deine Website einschätzen. Ein starkes Backlinkprofil ist daher ein entscheidender SEO-Faktor. Dabei ist nicht jeder Link gleich viel wert: Hochwertige Backlinks können dein Ranking deutlich verbessern, während Spam-Links deiner Sichtbarkeit schaden. Informiere dich über die Merkmale guter Backlinks und halte dich an Best Practices, um dein Linkprofil gezielt zu stärken. 
• Wettbewerbsanalyse: Wahrscheinlich hast du schon in einer frühen Projektphase Wettbewerbsanalysen durchgeführt. Dennoch ist es wichtig, deine Nische kontinuierlich im Blick zu behalten. Datenstarke Tools ermöglichen es, die Strategien deiner Konkurrenten im organischen und bezahlten Bereich zu verfolgen. So kannst du Marktbewegungen erkennen, Entwicklungen bei den wichtigsten Wettbewerbern verfolgen und dich von erfolgreichen Keywords oder Kampagnen inspirieren lassen, die bereits in ähnlichen Projekten gut funktionieren.

Single Page Applications tracken

SPA-Tracking mit GA4

Das Nutzerverhalten auf SPA-Websites zu erfassen, kann eine Herausforderung sein – doch Google Analytics 4 (GA4)bietet die passenden Funktionen dafür. Der Einsatz von GA4 für SEO hilft dir, das Engagement der Nutzer auf deiner Website besser zu verstehen, Optimierungspotenziale zu erkennen und datenbasierte Entscheidungen zur Verbesserung der User Experience zu treffen.

Falls du Google Analytics noch nicht installiert hast, wirf zuerst einen Blick in unseren GA4-Setup-Guide, um den Dienst schnell und korrekt einzurichten. 

Bist du bereit, folge diesen Schritten:

• Gehe in deinem GA4-Konto in den Bereich Admin und öffne Data Streams. Klicke auf deinen Web-Data-Stream.

• Stelle sicher, dass der Schalter für Enhanced Measurement aktiviert ist. Klicke auf das Zahnradsymbol.

• Öffne in der Page Views-Sektion die erweiterten Einstellungen und aktiviere die Option Page changes based on browser history events. Speichere die Änderungen. Deaktiviere alle Standard-Trackings, die nicht mit Pageviews zusammenhängen, da sie die Genauigkeit beeinträchtigen können.
• Öffne den Google Tag Manager und aktiviere den Preview & Debug Mode.
• Open Google Tag Manager and enable the Preview and Debug mode.
• Navigiere durch verschiedene Seiten deiner SPA-Website.
• Im Preview-Modus zeigt dir der GTM-Container die History Change-Events an.
• Klickst du im Preview-Modus auf deine GA4-Mess-ID neben dem GTM-Container, siehst du mehrere Pageview-Events, die an GA4 gesendet werden. 

Wenn diese Schritte funktionieren, kann GA4 deine SPA-Website erfolgreich tracken. Sollte es dennoch nicht klappen, kannst du Folgendes tun:

• Implementiere den History Change Trigger im GTM.
• Bitte deine Entwickler, einen dataLayer.push-Code zu aktivieren.

SPA-Tracking mit dem Rank Tracker von SE Ranking

Ein weiteres leistungsstarkes Tracking-Tool ist der Rank-Tracker von SE Ranking. Damit kannst du Single Page Applications für deine Ziel-Keywords überwachen – sogar standortbasiert, geräteübergreifend und in verschiedenen Sprachen. Das Tool unterstützt gängige Suchmaschinen wie Google, Google Mobile, Yahoo! und Bing.

So startest du mit dem Tracking:

• Erstelle auf der SE-Ranking-Plattform ein Projekt für deine Website.
• Füge deine Keywords hinzu, wähle die gewünschten Suchmaschinen aus und definiere deine Wettbewerber.

Sobald dein Projekt eingerichtet ist, wechsle zum Rankings-Tab, der aus mehreren Berichten besteht:

• Zusammenfassung
• Details
• Historische Daten

Wir konzentrieren uns hier auf den Standardbericht Details – meist der erste Report, den du nach dem Anlegen deines Projekts siehst. Oben in diesem Bereich findest du Diagramme zu:

• Durchschnittliche Position
• Traffic-Prognose
• Sichtbarkeit
• SERP Features
• Prozentanteil in den Top 10
• Keyword-Liste 

Unterhalb dieser Diagramme zeigt eine Keyword-Tabelle Details zu jedem Keyword, für das deine Website rankt – darunter Ziel-URL, Suchvolumen, SERP Features, Ranking-Entwicklung und mehr. Über den Spalten-Filter kannst du zusätzliche Parameter einblenden.

Das Tool erlaubt es dir, deine Keywords nach beliebigen Parametern zu filtern. Du kannst auch Ziel-URLs und Tags festlegen, Ranking-Daten für verschiedene Zeitpunkte abrufen und Ergebnisse miteinander vergleichen.

Der Keyword-Rank-Tracker liefert außerdem zwei zusätzliche Berichte:

• Ranking-Daten deiner Website – mit allen Suchmaschinen, die du im Projekt hinterlegt hast. Diese findest du im Tab Detailed.
• Historische Daten – mit allen Schwankungen deiner Rankings seit dem Ausgangsdatum. Diese findest du im Tab Historical Data.

Weitere Anleitungen zur Überwachung deiner Website-Positionen findest du in unserem Guide zum Rank Tracking in verschiedenen Suchmaschinen. 

Single Page Applications richtig umsetzen

Nachdem du nun alle Details zu Single Page Application SEO kennst, ist der nächste Schritt, die Theorie in die Praxis umzusetzen. Sorge dafür, dass deine Inhalte für Crawler leicht zugänglich sind – so bringst du deine Website auch in den Augen der Suchmaschinen zum Strahlen.

Während du Besuchern dynamisch ladende Inhalte, beeindruckende Geschwindigkeit und nahtlose Navigation bietest, solltest du Suchmaschinen stets auch eine statische Version deiner Website bereitstellen. Achte zudem darauf, eine korrekte Sitemap zu haben, eindeutige URLs statt Fragment-Identifier zu verwenden und unterschiedliche Inhaltstypen mit strukturierten Daten zu kennzeichnen.

Der Trend zu Single-Page-Erlebnissen, die von JavaScript angetrieben werden, entspricht den Erwartungen moderner Nutzer, die sofortige Interaktion mit Webinhalten wünschen. Um die UX-Vorteile von SPAs zu bewahren und gleichzeitig Top-Rankings zu erzielen, setzen Entwickler zunehmend auf das, was Airbnb-Ingenieur Spike Brehm „den harten Weg“ nennt – eine gekonnte Balance zwischen Client- und Server-Seite der Webentwicklung.