SPA SEO: Vom Albtraum zur Erfolgsgeschichte

Single Page Applications (SPAs) sind aus der modernen Webentwicklung nicht mehr wegzudenken. Anwendungen wie Facebook oder Gmail sind prominente Beispiele für ihre Leistungsfähigkeit. Während sie für ihre Geschwindigkeit und reibungslose Benutzererfahrung gefeiert werden, galt die Suchmaschinenoptimierung (SEO) für SPAs lange Zeit als ein wahrer Albtraum. Doch diese Sichtweise ist überholt. Es gibt effektive Wege, die außergewöhnliche Geschwindigkeit und das nahtlose Nutzererlebnis von SPAs mit der Auffindbarkeit herkömmlicher Webanwendungen zu verbinden. In diesem umfassenden Artikel beleuchten wir die Herausforderungen und stellen Ihnen bewährte Strategien vor, mit denen Sie Ihre SPA für Suchmaschinen sichtbar machen.

Warum sind Single Page Applications (SPAs) schlecht für SEO?

Traditionell nutzten Websites Server-Side-Rendering (SSR) für ihre HTML-Inhalte. Bei diesem Ansatz wird der gesamte HTML-Code auf dem Server generiert und an den Browser des Nutzers gesendet. Dies ermöglicht es Suchmaschinen-Bots, auch bekannt als Web-Crawler oder Spiders, den Inhalt der Website problemlos zu indizieren. Dieser Prozess des Crawlens ist entscheidend dafür, wie Suchmaschinen Inhalte auf Ihrer Website entdecken und der Öffentlichkeit zugänglich machen.

Dynamische Inhalte, wie sie in SPAs typisch sind, schaffen jedoch Probleme für das herkömmliche Server-Side-Rendering. Wenn sich auch nur ein kleiner Teil der Daten auf einer Seite ändert, müsste der Server die gesamte Seite komplett neu rendern und dann die neue Version an den Browser senden. Dies ist ineffizient und langsam.

Das Client-Side-Rendering (CSR) hingegen ermöglicht es Single Page Applications, dynamische Inhalte anzuzeigen, ohne die gesamte Seite neu zu laden. Ihr Browser empfängt einen "nackten" HTML-Container und rendert dann den Inhalt der Seite mithilfe von JavaScript. Wenn sich nun ein Teil des Inhalts auf einer Seite ändern muss, sendet Ihr Browser einen AJAX-Aufruf an den Server. Der Server sendet im Gegenzug die Daten (meist im JSON-Format), die Ihr Browser zur Aktualisierung der Seite benötigt.

Gleichzeitig ist das Client-Side-Rendering schlecht für die Crawler. Da die meisten Inhalte dynamisch über JavaScript geladen werden, haben Spiders Schwierigkeiten, SPAs korrekt zu indizieren. Für sie ist der Inhalt (wie er von einem Benutzer gesehen wird) auf der Seite nicht vorhanden. Und ohne Inhalt gibt es nichts in den Suchergebnissen anzuzeigen. Auch Social-Media-Bots haben Schwierigkeiten beim Crawlen von SPAs.

So kann Ihre brandneue Website/Web-App schnell zu einem SEO-Desaster werden, wenn keine entsprechenden Maßnahmen ergriffen werden.

Vergleich: Server-Side-Rendering (SSR) vs. Client-Side-Rendering (CSR) für SEO

Lösungsansätze für effektives SPA-SEO

1. Vermeiden Sie Googles veraltetes AJAX-Crawling-Schema

Im Jahr 2009 führte Google einen Workaround ein, um SPAs SEO-freundlich zu machen. Dieses Schema umfasste das Hinzufügen von Hashbangs (#!) zur URL der Seite und das Erstellen eines HTML-Snapshots der Seite, der dann den Web-Crawlern über eine spezielle URL (?_escaped_fragment_=) zur Verfügung gestellt wurde. So konnten Crawler den Inhalt der Seite indizieren und die ursprüngliche URL in den Suchergebnissen anzeigen.

Wichtig: Google hat dieses AJAX-Crawling-Schema im Jahr 2015 offiziell als veraltet erklärt und seine Unterstützung 2018 eingestellt. Neuere Tests zeigen, dass Google im Allgemeinen in der Lage ist, JavaScript auf Client-gerenderten Anwendungen auszuführen. Allerdings gilt dies nicht für alle Suchmaschinen (Baidu, Yandex, Bing, Yahoo machen immer noch einen erheblichen Anteil der Suchanfragen aus) und Social-Media-Bots. Diese haben weiterhin Schwierigkeiten beim Crawlen von JavaScript-basierten Inhalten.

Verlassen Sie sich daher nicht allein auf die JavaScript-Crawling-Fähigkeiten von Google. Stellen Sie sicher, dass Ihre SPA mit den im Folgenden beschriebenen Methoden auch von anderen Suchmaschinen indexiert werden kann.

2. Nutzen Sie Server-Side-Rendering (SSR)

Obwohl Google nun behauptet, JavaScript crawlen zu können, ist es besser, auf Nummer sicher zu gehen. Fälle wie der von Hulu, die einen Sichtbarkeitsverlust von fast 60% erlitten, zeigen, dass das Unterlassen von Vorsichtsmaßnahmen katastrophale Ergebnisse haben kann. Deshalb ist Server-Side-Rendering eine der effektivsten Strategien, um die Auffindbarkeit von SPAs zu verbessern.

Sie können eine Anwendung, die auf einem Client-Side-JavaScript-Framework wie React, Angular oder Vue.js basiert, auf Ihrem Server in statisches HTML und CSS rendern. Wenn der Browser des Benutzers eine erste Anfrage an den Server sendet, erhält der Browser vollständig gerenderte HTML-Inhalte und nicht nur einen leeren HTML-Container, wie es bei traditionellen SPAs der Fall ist. Während JavaScript noch im Hintergrund lädt, sehen die Benutzer bereits die HTML-Version Ihrer Website.

Dies erhöht die wahrgenommene Ladegeschwindigkeit und verbessert die Benutzererfahrung erheblich! Web-Crawler haben ebenfalls Zugriff auf die vollständige HTML-Version der Seite, die sie indizieren und in den Suchergebnissen anzeigen können. Bei nachfolgenden Anfragen verwendet Ihre Single Page Application natürlich das reguläre Client-Side-Rendering, um sicherzustellen, dass der Inhalt sowohl beim ersten als auch bei den unzähligen weiteren Besuchen schnell lädt.

3. Progressive Enhancement und Feature Detection anwenden

Die Verwendung von Progressive Enhancement und Feature Detection ist die aktuelle SEO-Empfehlung von Google für Single Page Apps. Beginnen Sie damit, eine einfache HTML-Seite zu erstellen, die sowohl von Web-Crawlern als auch von Benutzern aufgerufen und indiziert werden kann.

Nutzen Sie dann die Feature Detection, um das Erlebnis schrittweise mit CSS und JavaScript zu verbessern. Erkennen Sie die Funktionen, die vom Browser des Benutzers unterstützt werden, und aktivieren/deaktivieren Sie diese entsprechend. Überprüfen Sie, ob die Feature-APIs verfügbar sind, und verwenden Sie niemals den User-Agent des Browsers, um die Funktionen der Anwendung zu aktivieren oder zu deaktivieren. Denken Sie daran, Ihre SPA vor dem Start für zahlreiche Browser zu testen.

• Inhalte beim ersten Laden bereitstellen: Setzen Sie auf Server-Side- oder Hybrid-Rendering, um Ihren Benutzern den Inhalt bei der ersten Anfrage bereitzustellen.
• Deep Linking: Stellen Sie sicher, dass Deep Linking für Ihre SPA funktioniert. Leiten Sie Ihre Kunden niemals auf Ihre Homepage um, anstatt sie zum gewünschten Deep-Linked-Inhalt zu führen.
• Responsives Design: Verwenden Sie ein responsives Design, das sich an mehrere Geräte anpasst.
• Konsistenter Inhalt: Liefern Sie niemals unterschiedliche Inhalte an Benutzer und Suchmaschinen. Diese Regel gilt auch, wenn Sie Dynamic Serving verwenden, um das Design der Website für verschiedene Geräte zu ändern.
• Iterative Entwicklung: Migrieren Sie Ihre alte Website nicht auf einmal zu einer progressiven SPA. Entwickeln Sie sie stattdessen in Iterationen. Das Hinzufügen einer Funktion nach der anderen ermöglicht es Ihnen, zu sehen, wie sich jede einzelne auf die SEO auswirkt.
• Google Search Console nutzen: Verwenden Sie die Search Console. Sie erkennt auch die Existenz von strukturierten Daten, Rich Cards, Sitelinks und AMPs.
• Schema.org strukturierte Daten: Fügen Sie Notationen mit Schema.org strukturierten Daten hinzu. Dies ermöglicht es Ihnen, die wichtigsten Teile Ihres Inhalts in einem maschinenlesbaren Format zusammenzufassen. Stellen Sie sicher, dass diese Metadaten korrekt sind, und kennzeichnen Sie Ihren Inhalt niemals mit dem falschen Datentyp.
• Cross-Browser-Tests: Testen Sie Ihre SPA für mehrere Browser mit Tools wie BrowserStack.com und Browserling.com.
• Geschwindigkeitsoptimierung: Optimieren Sie Ihre SPA auf Geschwindigkeit, bevor Sie sie der Öffentlichkeit zugänglich machen. Obwohl Googlebot möglicherweise länger als 5-20 Sekunden warten kann, bevor Ihre Seite indiziert wird, werden nur wenige echte Benutzer so lange warten.

Weitere Schritte zur Optimierung der Auffindbarkeit Ihrer SPA

1. Erstellen Sie eine vollständige Liste der Seiten Ihrer Website (Sitemap.xml)

SEO-Experten empfehlen, für jede Webanwendung eine Sitemap.xml zu erstellen. Auch nach der Ankündigung, dass Googlebot JavaScript-Anwendungen crawlen kann, berichten Website-Betreiber weiterhin von nicht indizierten Seiten. Eine Sitemap.xml ist eine Datei, die alle URLs Ihrer Anwendung enthält. Sie sollten Ihre Sitemap als Leitfaden verwenden, um sicherzustellen, dass Crawler keinen entscheidenden Teil Ihrer App übersehen haben.

Beachten Sie, dass Sitemaps beworben werden müssen. Fügen Sie daher die folgende Zeile zu Ihrer robots.txt-Datei hinzu, damit Googlebot den Speicherort Ihrer Sitemap kennt:

Sitemap: [Ihre-Sitemap-URL.xml]

Anschließend sollten Sie Ihre Sitemap bei der Google Search Console einreichen, was die Indizierung Ihrer Website auslöst. Obwohl der <meta name="fragment" content="!"> Tag einst genutzt wurde, um Googlebot auf eine SPA hinzuweisen, ist dies mit der Deprecation des AJAX-Crawling-Schemas weniger relevant geworden, da Google JavaScript besser verarbeitet.

2. Nutzen Sie das "Abruf wie Google"-Tool

Die Google Search Console bietet die Option "Abruf wie Google" (Fetch as Google). Dieses Tool ist unglaublich nützlich für SPAs, da es Ihnen ermöglicht zu sehen, welche JS- und CSS-Elemente nicht für die Indizierung verfügbar sind. Durch die Verwendung des Tools können Sie feststellen, dass die Suchmaschine Ihre SPA unvollständig anzeigt oder wichtige Funktionen ignoriert.

Geben Sie die URL einer Seite ein und lassen Sie sie so abrufen, wie es die Google-Crawler beim Indizieren Ihrer Website tun würden. Die Ausführung der Google Search Console ermöglicht es Ihnen, Ihre Anwendung aus den Augen des Crawlers zu sehen und zu entdecken, welche zusätzlichen Schritte Sie unternehmen müssen, um Ihre Suchrankings zu verbessern.

• "Abrufen" (Fetch): Sendet die HTTP-Antwort Ihrer Seite zusammen mit dem vollständigen Download ihres Quellcodes, wie er von Web-Spiders gesehen wird.
• "Abrufen und Rendern" (Fetch and Render): Sendet die HTTP-Antwort sowie zwei Screenshots der Seite: einen, wie er von Googlebot gesehen wird, und einen weiteren aus der Sicht Ihrer Benutzer. Es zeigt auch, welche Ressourcen Googlebot nicht abrufen konnte. So stellen Sie sicher, dass keine der notwendigen Ressourcen wie JS-Dateien, Serverantworten oder API-Aufrufe durch robots.txt blockiert sind.

Da Google das alte AJAX-Crawling-Schema abgeschafft hat, können Websites, die es noch verwenden, auf unerwartete Probleme stoßen. Als Vorsichtsmaßnahme empfiehlt Google nun, das Tool "Abrufen und Rendern" zu verwenden, um SPAs zu testen, die Hashbangs oder _escaped_fragment_-Tags in ihren URLs haben. Vergleichen Sie die Ergebnisse für die #!-Seiten und ?_escaped_fragment_=-URLs, um festzustellen, ob es Unterschiede gibt.

Sobald Sie eine Seite abgerufen haben, wird eine dritte Option, "Indizierung anfordern", verfügbar. Sie können diese verwenden, um die Indizierung zu starten, ohne auf die üblichen Crawling-Zyklen warten zu müssen.

3. Verwenden Sie rel=canonical-Links

Die rel=canonical-Links sind nicht nur nützlich, wenn Sie mehrere Seiten mit demselben Inhalt haben. Sie können Crawlern auch mitteilen, welcher Teil der URL obligatorisch ist und welcher nicht. Dies ermöglicht es Googlebot beispielsweise zu erkennen, ob ein Abfrageparameter das Rendering einer Seite beeinflusst (z.B. Paginierungsparameter wie ?page=11) oder nicht (z.B. Tracking-Parameter wie utm_source=facebook).

Wenn Sie eine Seite haben, die über mehrere URLs erreichbar ist (wie es oft bei E-Commerce-Websites der Fall ist) oder mehrere Seiten mit doppeltem Inhalt, machen Sie eine davon kanonisch. Wählen Sie die Seite aus, die Sie für wichtiger halten (oder diejenige mit den meisten Besuchern/Links). Fügen Sie nun den rel=canonical-Link hinzu, der von nicht-kanonischen Seiten auf die kanonische Seite verweist.

Auf diese Weise weiß Google, welche Version Ihres Inhalts "offiziell" ist, und zählt alle Links zu ihren Duplikaten als Links zu dieser kanonischen Seite. Um vom rel=canonical-Element zu profitieren, müssen Sie dynamische URLs verwenden. Denken Sie auch daran, dass kanonische und Sitemap-URLs identisch sein müssen. Und überprüfen Sie, ob rel=canonical-Links zu einer echten Website führen und robots.txt Googlebot erlaubt, Ihre Single Page Application zu indizieren.

4. Google Analytics einrichten

Google Analytics ist ein wichtiger Bestandteil der SEO-Bemühungen. Es funktioniert, indem es Seitenaufrufe jedes Mal protokolliert, wenn Benutzer auf Ihre Seite gelangen. Aber bei SPAs gibt es keine HTML-Antwort, die den Seitenaufruf generieren würde. Um von Google Analytics zu profitieren, müssen Sie einen anderen Weg finden.

Eine Möglichkeit hierfür ist über Plugins wie Angulartics. Da Single Page Applications HTML dynamisch laden, verwendet das Plugin kein Standard-Tracking. Stattdessen verfolgt Angulartics den virtuellen Seitenaufruf und zeichnet die gesamte Benutzernavigation innerhalb Ihrer SPA auf. Eine weitere Alternative für Google Analytics ist der Google Tag Manager, der eine flexible Implementierung von Tracking-Codes ermöglicht.

5. Open Graph und Twitter Cards nutzen

Social-Media-Shares können eine entscheidende Rolle bei Ihren SEO-Linkbuilding-Bemühungen spielen. Die Implementierung von Twitter Cards ermöglicht Ihrer SPA ein reichhaltiges Sharing auf Twitter. Um das korrekte Teilen über Facebook zu ermöglichen, sollten Sie die Implementierung von Open Graph in Betracht ziehen.

Wenn jemand den Link zum ersten Mal teilt, crawlt der Facebook-Spider die Seite, sammelt Informationen darüber und generiert ein visuelles Objekt, das später auf Facebook-Seiten angezeigt wird. Das Open Graph-Protokoll von Facebook ermöglicht es, die Daten, die Menschen über das soziale Netzwerk teilen, zu optimieren und zu strukturieren. Um Open Graph zu nutzen, müssen Sie bestimmte <meta>-Tags in den <head>-Bereich der HTML-Seite einfügen, die Sie im sozialen Netzwerk posten möchten.

Die nützlichsten Open Graph <meta>-Tags sind:

• og:title: Benennt den Titel der Seite.
• og:description: Beschreibt kurz, worum es in Ihrem Inhalt geht.
• og:type: Spezifiziert den Datentyp des Inhalts.
• og:image: Gibt die URL des Bildes an, das zur Illustration der Seite verwendet wird.
• og:url: Spezifiziert die kanonische URL der Seite.

Sie können das Debugger-Tool von Facebook verwenden, um Ihre OG-Tags zu testen. Dies reicht jedoch nicht aus, wenn es um Single-Page-Anwendungen ohne Server-Side-Rendering geht. Im Gegensatz zu Googlebot können Facebook-Crawler JavaScript noch nicht interpretieren! Selbst wenn Sie alle korrekten OG-Tags hinzugefügt haben, rufen die Spider nur das reine HTML ab. Das Ergebnis ist ein Beitrag, den niemand bei Verstand teilen würde.

Eine Möglichkeit, reichhaltiges Social Sharing für SPAs zu ermöglichen, besteht darin, eine bedingte Weiterleitung zu erstellen, die die Metadaten an die Bots von Facebook liefert. Auf diese Weise erhalten Crawler eine statische Datei, anstatt sich mit JavaScript auseinandersetzen zu müssen, und reguläre Benutzer werden zur URL mit dem tatsächlichen Inhalt weitergeleitet.

Häufig gestellte Fragen (FAQ) zu SPA-SEO

F: Kann Googlebot Single Page Applications (SPAs) indexieren?

A: Ja, Googlebot ist in den meisten Fällen in der Lage, JavaScript auszuführen und den Inhalt von SPAs zu indexieren. Allerdings gibt es immer noch Herausforderungen, insbesondere bei komplexen Anwendungen oder wenn die Inhalte erst nach längerer Zeit oder spezifischen Benutzerinteraktionen sichtbar werden. Andere Suchmaschinen haben hier oft noch Schwierigkeiten.

F: Ist Server-Side-Rendering (SSR) für jede SPA zwingend erforderlich, um gute SEO-Ergebnisse zu erzielen?

A: SSR ist nicht immer zwingend erforderlich, aber es ist eine der robustesten und empfohlenen Methoden, um die SEO-Fähigkeit einer SPA sicherzustellen. Es liefert den Suchmaschinen-Crawlern sofort einen vollständigen HTML-Inhalt, was die Indizierung erheblich erleichtert und die wahrgenommene Ladezeit für Benutzer verbessert.

F: Welche Tools kann ich verwenden, um die SEO meiner SPA zu überprüfen und zu optimieren?

A: Die Google Search Console, insbesondere das "Abruf wie Google"-Tool, ist unerlässlich. Für die Analyse der Benutzerinteraktion und des Traffics ist Google Analytics wichtig (oft mit speziellen Plugins für SPAs). Tools wie BrowserStack oder Browserling sind hilfreich für Cross-Browser-Tests, und für die Optimierung der sozialen Medien sind die Facebook Debugger und Twitter Card Validator nützlich.

Fazit

Wie Sie sehen, bedeutet der Bau von Single Page Applications nicht zwangsläufig das Aus für gute Suchmaschinenrankings. Mit ausreichend Mühe und den richtigen Strategien können Sie Ihre SPA absolut SEO-freundlich gestalten – genau wie jede traditionelle Webanwendung.

Modernste Technologien wie Progressive Enhancement und Server-Side-Rendering für SPAs ermöglichen es Ihnen, beeindruckende interaktive Erlebnisse zu schaffen, ohne deren Auffindbarkeit zu opfern. Vergessen Sie dabei auch nicht die allgemeinen SEO-Empfehlungen: Reduzieren Sie die Anzahl der benötigten JS-Dateien und Serverantworten, überprüfen Sie die Server-Header-Antworten, aktualisieren Sie den Cache auf den Hubpages und entwickeln Sie durchdachte Lösungen für Seiten mit Rendering-Problemen. Mit einem umfassenden Ansatz kann Ihre SPA im Web glänzen.

Wenn du andere Artikel ähnlich wie SPA SEO: Vom Albtraum zur Erfolgsgeschichte kennenlernen möchtest, kannst du die Kategorie Wellness besuchen.