Die wichtigsten SPA SEO-Herausforderungen und Möglichkeiten, um Ihre Web-App in der Suche auffindbar zu machen

Foto von Patrick Perkins auf Unsplash

Wenn Sie eine Single-Page-Applikation (SPA) entwickeln, sollten Sie sich vorher Gedanken über deren Sichtbarkeit im Web machen. SPA-SEO unterscheidet sich von der einer statischen Website, da Suchmaschinen- und Social-Media-Agenten mit JavaScript anstelle von HTML arbeiten müssen.

Seit 2015 ist der Googlebot in der Lage, JavaScript zu rendern und dynamische Inhalte auf SPAs zu indizieren, allerdings hat der Prozess noch einige Eigenheiten und Nachteile. Was die anderen Crawler betrifft, so können weder Bing, DuckDuckGo und Baidu noch die Bots von Facebook und Twitter bisher mit JavaScript umgehen.

Bedeutet das, dass SPAs schlecht für SEO sind? Nein, das sind sie nicht, wenn sie richtig gemacht werden. Viele SPA-Seiten sind bei Google hoch platziert und sehen gut aus, wenn in sozialen Netzwerken darauf verwiesen wird. Das können Sie auch. Unser Artikel und die SEO-Tipps für Single-Page-Apps von Pavel, Frontend-Entwickler bei Proxify, helfen Ihnen, häufige Fehltritte zu vermeiden und Ihr Projekt an die Spitze der Suchergebnisse zu bringen.

Beginnen wir mit kalten, harten Fakten über SPA SEO

Bei klassischen SPAs werden die Inhalte auf der Client-Seite (im Browser) gerendert. Wenn Ihre Anwendung geladen wird, sendet Ihr Server dem Browser eine leere HTML-Shell und etwas JavaScript-Code zur Ausführung. Der Browser führt den Code aus und füllt die Seite mit sinnvollen Inhalten. Wenn neue Codeteile ausgeführt werden, ändert sich der Inhalt

innerhalb der Shell dynamisch, so dass Benutzer durch verschiedene Ansichten Ihrer Anwendung navigieren können, ohne neue HTML-Seiten zu laden.

Die Art und Weise, wie SPAs funktionieren, verbessert die Benutzererfahrung, führt jedoch zu mehreren Engpässen, die für die SEO-Leistung Ihres Projekts entscheidend sind:

• Wenn Googlebot dynamische Seiten rendert und indiziert, hängt der Erfolg stark von der JavaScript-Rendering-Geschwindigkeit und -Stabilität der App ab.
• Um bei der Suche gefunden zu werden, sollte jede Ansicht Ihrer Anwendung eine eigene, saubere URL haben, obwohl sie auf einer einzigen HTML-Seite gerendert wird.
• Suchmaschinen- und Social-Media-Bots sollten Metadaten im statischen HTML-Code erhalten, um Ihre Seiten zu indizieren oder Vorschaubilder anzuzeigen, wenn die Seiten in sozialen Netzwerken verlinkt werden.

Gehen wir nun näher auf jeden dieser Punkte ein, um zu sehen, warum sie ein Problem darstellen und wie Sie Ihre Webanwendung in Bezug auf SEO optimieren können.

1. JavaScript-Code sollte schnell und fehlerfrei laufen

Wenn Sie sich für Client-seitiges Rendering für Ihre SPA entscheiden, müssen Sie die Verarbeitung durch Googlebot im Auge behalten und versuchen, die Aufgabe zu vereinfachen. Wie in der offiziellen Dokumentation beschrieben, hat Googlebot einen dreistufigen Arbeitsablauf für die Verarbeitung von JavaScript-Seiten, der Crawling, Rendering und Indexierung umfasst.

SEO-Fallen des clientseitigen Renderings

Aufgrund der zusätzlichen Phase, die für das Rendering erforderlich ist, dauert es im Vergleich zu statischen HTML-Seiten länger, bis SPA-Inhalte in der Suche erscheinen oder aktualisiert werden. Auch das Risiko von Indizierungsfehlern steigt. Möglicherweise stehen Sie vor folgenden Herausforderungen:

Ihre SPA-Seiten müssen möglicherweise einige Zeit in der Rendering-Warteschlange verbringen, was bei der Anzahl der täglich im Internet erstellten und aktualisierten Seiten sehr lang sein kann. Ihr JavaScript-Code sollte schnell genug ausgeführt werden, um in das Rendering-Budget des Googlebots zu passen. Andernfalls werden einige Teile Ihrer Seiten möglicherweise nicht richtig gerendert und mit unvollständigem Inhalt indexiert. Bei Rendering-Fehlern kann das von Googlebot generierte HTML fehlerhaft oder leer sein, was dazu führen kann, dass Ihre gesamten Seiten nicht indexiert werden.

Die oben genannten Bedenken wurden durch unabhängige SEO-Experimente mit einer einzigen Seite bestätigt. Die Ergebnisse zeigen, dass Googlebot den Inhalt, der unmittelbar nach dem Laden einer SPA-Seite generiert wird, immer indiziert. Sie haben auch bewiesen, dass Inhalte, die bei Bedarf (beim Scrollen oder bei Aktionen auf der Seite) oder nach einer langen Verzögerung (Inhalte aus externen Ressourcen oder animierter Text) gerendert werden sollen, aufgrund des begrenzten Renderbudgets nicht immer indiziert werden.

"Für SEO ist es wichtig, einen kleinen JS-Code zu haben, damit die Seite schnell geladen wird. Es betrifft sowohl SPAs mit clientseitigem Rendering als auch mit serverseitigem Rendering. Die Implementierung von Lazy Loading löst das Problem der langsamen Webanwendungen sehr gut", Pavel, Frontend-Entwickler

Es gibt noch eine weitere wichtige Sache, die der Google-Bot nach dem Rendern Ihres JavaScript-Codes durchführt. Es analysiert das generierte HTML nach Links und gibt alle gefundenen URLs an die Crawling-Warteschlange zurück. Da die Links für den Crawler erst nach dem Rendering verfügbar sind, kann Googlebot einige von ihnen im Falle von Fehlern bei der Codeausführung übersehen. Selbst wenn sie entdeckt werden, kann es vorkommen, dass die URLs Ihrer App für den Crawler unfreundlich erscheinen.

2. URLs und interne Verlinkung sollten SEO-freundlich sein

Sie möchten vielleicht, dass verschiedene Ansichten Ihrer Anwendung als eigenständige Seiten indiziert werden und in der Suche ranken. Zu diesem Zweck sollten Sie Googlebot helfen, alle Ihre URLs zu finden und durch Ihre App-Architektur zu navigieren. Beachten Sie, dass Crawler empfindlich auf die Art und Weise reagieren, wie Sie die Weiterleitung zwischen verschiedenen Ansichten Ihrer Webanwendung implementieren.

SPAs sind auf Router angewiesen, die ihre Benutzeroberfläche und Inhalte mit den sich ändernden URLs synchron halten, ohne die Seite zu aktualisieren. Bei den SPA-Routing-Modi haben Sie zwei Möglichkeiten: Hash-basiertes Routing und History-API-Routing. Nur letzteres ist SEO-freundlich.

SEO-Fallen von SPA-URLs

Wenn Ihr Router im Hash-Modus arbeitet, fügt er #hash-Fragmente zu Ihrer Homepage-URL hinzu, um eindeutige URLs für verschiedene Teile Ihres SPA-Inhalts zu erzeugen. Crawler ignorieren Hash-URLs immer, da sie Teile derselben Seite anzeigen. Wenn Sie Hash-basiertes Routing verwenden, werden die verschiedenen App-Ansichten nicht als separate Seiten indiziert.

Wenn Ihr Router im History-Modus arbeitet (History-API), erhalten die Crawler eine eindeutige normale URL für jeden einzelnen Inhalt. Alle diese URLs existieren jedoch nicht auf dem Server Ihrer Anwendung, was zu 404-Fehlern führen kann, wenn ein Benutzer versucht, direkt auf eine nicht existierende URL zuzugreifen.

Um saubere und SEO-freundliche URLs zu verwenden und gleichzeitig die 404-Probleme zu vermeiden, müssen Sie eine Fallback-Route für Ihren Server hinzufügen, um Anfragen auf Ihre index.html-Seite umzuleiten, auf der sich Ihre Anwendung befindet. Obwohl dies zusätzlichen Aufwand erfordert, bieten alle gängigen JavaScript-Frameworks und -Bibliotheken eine solche Option.

Eindeutige URLs reichen für die Indizierung aus, aber nicht für eine hohe Platzierung bei der Suche. Um Ihre URLs wettbewerbsfähig zu machen, müssen Sie sie mit einzigartigen Titeln, Beschreibungen und Vorschaubildern versehen. Und wenn Sie wollen, dass sie nicht nur von Googlebot, sondern auch von anderen Agenten erfasst werden, müssen sie in statischem HTML vorliegen.

"Stellen Sie sicher, dass Sie eine XML-Sitemap für Ihr Projekt erstellen. Sie wird bei Google, Bing und anderen Suchmaschinen eingereicht, damit sie Ihre Website besser crawlen können." - Pavel, Frontend-Entwickler

3. Meta-Tags sollten für jede URL eindeutig sein

Der Header Ihrer SPA gehört zum statischen HTML-Teil Ihrer Anwendung. Sie enthält standardmäßig Meta-Tags, die sich nicht ändern, wenn ein anderer Seiteninhalt gerendert wird. Sie sollten jedoch Titel und Beschreibungen verwenden, die sowohl den Nutzern als auch den Bots verdeutlichen, welche Informationen sie unter jeder Ihrer URLs finden können.

Sie können dieses Problem mit speziellen Hilfsprogrammen lösen, die in Frontend-Frameworks und -Bibliotheken verfügbar sind. Sie helfen Ihnen, dynamische Metadaten zu generieren und in die Kopfzeile Ihrer Seite zu integrieren. Es muss jedoch noch etwas JavaScript-Code ausgeführt werden, bevor die Metadaten gecrawlt und indiziert werden können. Dadurch ist sie für Suchmaschinen und Social-Media-Agenten, die kein JavaScript verarbeiten, nicht verfügbar.

Um Ihre Metadaten für alle Bots zugänglich zu machen, sollten Sie sie beim Laden Ihrer Seite mit dem anfänglichen HTML-Code senden. Die Umgehung dieses Problems besteht darin, dass Sie vom clientseitigen Rendering für Ihre SPA auf dessen Alternativen umsteigen.

Können alle SEO-Probleme von Single-Page-Apps auf einmal gelöst werden?

Sicherlich. Beliebte JavaScript-Frameworks wie React.js, Angular.js oder Vue.js bieten Pre-Rendering und serverseitiges Rendering (SSR) als Möglichkeit, die SEO-Herausforderungen von Single-Page-Anwendungen zu bewältigen. Diese Lösungen sind umfassend und bewährt, haben aber auch einige Nachteile.

Sowohl Pre-Rendering als auch SSR erhöhen die Komplexität Ihrer SPA und erfordern die Einstellung erfahrener Entwickler. Diese Methoden erfordern auch eine Erweiterung des technischen Stapels Ihrer Anwendungen und höhere Anforderungen an Ihre Server. Bevor Sie sich für eine der beiden Optionen entscheiden, sollten Sie daher abwägen, ob die erwarteten Vorteile die zusätzlichen Entwicklungs- und Wartungskosten wert sind.

Im Hinblick auf die Suchmaschinenoptimierung können Sie mit Pre-Rendering und SSR das Rendering Ihres JavaScript von den Crawlern entlasten und die Indexierung Ihrer App-Inhalte optimieren. Schauen wir uns genauer an, wie diese Methoden funktionieren und wann man sich für eine von ihnen entscheiden sollte.

Wie Pre-Rendering die SEO für Single-Page-Apps verbessert

Pre-Rendering ist eine einfachere und leichtere Lösung. Das funktioniert gut, wenn Sie nur eine Handvoll Marketingseiten zu optimieren haben. In diesem Fall müssen Sie lediglich statische HTML-Dateien für bestimmte Routen Ihrer Anwendung zur Erstellungszeit vorrendern. Auf diese Weise behalten Sie Ihre Marketing-Assets in Form einer statischen Website, die für Bots leicht zu konsumieren ist.

Für das Pre-Rendering Ihrer SPA benötigen Sie ein spezielles Plugin oder einen Dienst eines Drittanbieters, wie prerender.io, der mit Ihrem JavaScript-Framework oder Ihrer Bibliothek kompatibel ist. Diese Tools rufen die Desktop- und mobilen HTML-Versionen Ihrer Seiten ab und speichern sie im Cache. Das Cashing gewährleistet eine schnelle Antwortzeit auf die Anfragen der Nutzer und Crawler.

Wie dynamisches Rendering Single-Page-Apps SEO-freundlich macht

Das dynamische Rendering baut auf dem Pre-Rendering-Verfahren auf und wird von Google empfohlen. Dieser Ansatz ermöglicht es, denselben Inhalt für Nutzer und Bots unterschiedlich zu präsentieren. Ihre Nutzer können weiterhin das clientseitige Rendering nutzen, während Bots auf einen dynamischen Renderer umgeleitet werden, der ihnen vorgerendertes HTML liefert.

Um es einzurichten, muss Ihr Webserver zwischen Crawlern und Benutzern unterscheiden können, indem er den User Agent überprüft. Sie erhalten eine Liste von Agenten, die Ihr statisches HTML erhalten sollen, z. B. Bingbot, Googlebot, Linkedinbot usw. Ihr Server leitet die Anfragen der aufgeführten Crawler an Ihren dynamischen Renderer weiter, der ihnen zwischengespeicherte HTML-Seiten sendet.

Der Wechsel zwischen clientseitig gerenderten und vorgerenderten Inhalten ermöglicht es Ihrer Anwendung, das Beste aus beiden Welten zu nutzen. Sie werden so viele Inhalte wie möglich an Bots weitergeben, ohne dass das Nutzererlebnis darunter leidet.

Die Einschränkung des Pre-Rendering besteht darin, dass es für große Anwendungen mit häufigen Inhaltsaktualisierungen nicht gut geeignet ist. Es kann einfach zu viele Ressourcen beanspruchen, jede Route in Ihrer SPA vorzuproduzieren und zwischenzuspeichern. In solchen Fällen sollten Sie stattdessen das serverseitige Rendering verwenden.

Wie SSR die SEO für Single-Page-Anwendungen verbessert

Das serverseitige Rendering ist schwieriger zu implementieren. Wenn Sie jedoch einen Online-Shop oder eine App mit unzähligen dynamischen Seiten planen, die von Suchmaschinen indiziert werden sollen, ist die Entscheidung für SSR mehr als sinnvoll.

Für SSR müssen Sie einen Node.js-Server einrichten. Mit dieser Technologie können universelle (isomorphe) Webanwendungen erstellt werden, die JavaScript-Code sowohl clientseitig als auch serverseitig ausführen. Die universelle App-Architektur macht Ihre App skalierbar und sorgt für schnelle Reaktionszeiten auch bei hoher Belastung.

Mit SSR werden alle Anfragen von Benutzern und Crawlern an den Server gesendet. Der Server führt Ihren JavaScript-Code in der Node.js-Laufzeitumgebung aus, rendert HTML-Seiten in Echtzeit und sendet sie als Antwort zurück. Auf diese Weise brauchen Browser und Bots keinen JavaScript-Code zu verarbeiten. Ihre SPA wird genauso SEO-freundlich wie statische HTML-Websites.

Um die SSR-Implementierung zu erleichtern, können Sie fertige Lösungen für die Erstellung isomorpher Anwendungen verwenden - Nuxt.js für das Vue.js-Framework oder Next.js für die React.js-Bibliothek. Lesen Sie mehr in unseren Beiträgen darüber, wie man Angular, Vue und React SEO-freundlich macht.

"SSR bringt Probleme mit der Leistung mit sich. Denn der Server rendert eine bestimmte Route Ihrer SPA, anstatt nur eine HTML-Seite an einen Benutzer zu senden. Ihre Anwendung benötigt eine leistungsfähigere Infrastruktur, um die Lasten zu bewältigen." - Pavel, Frontend-Entwickler

Brauchen Sie einen JavaScript-Ninja, um eine SEO-freundliche SPA zu erstellen?

Auf Proxify.io finden Sie den perfekten Software-Entwickler für Ihre Web-App. Da wir in unserem Netzwerk über Talente auf Senior-Level verfügen, können wir Sie innerhalb von zwei Wochen mit dem richtigen Spezialisten zusammenbringen. Verpassen Sie nicht die Gelegenheit, JavaScript-Entwickler zu Preisen ab 29 € pro Stunde einzustellen. Senden Sie uns eine Talentanfrage und beginnen Sie mit der Arbeit an Ihrem Projekt!

Kurze SPA SEO-Antworten

Sie fragen, wir antworten.

Ist JavaScript schlecht für SEO?

JavaScript ist nicht schlecht für die Suchmaschinenoptimierung, erhöht aber die Komplexität. Googlebot kann JS-Seiten crawlen, verarbeiten und indizieren. Im Vergleich zur Indizierung statischer HTML-Seiten benötigt der Bot jedoch mehr Zeit und mehr Ressourcen. Um den tatsächlichen Seiteninhalt zu sehen, muss Googlebot den JS-Code in seinem Headless-Chromium-Browser rendern. Manchmal können JS-Seiten in eine lange Rendering-Warteschlange geraten, das Rendering-Budget überschreiten oder nicht richtig gerendert werden, was zu Problemen bei der Indexierung von Inhalten führen kann.

Sind Single-Page-Bewerbungen SEO-freundlich?

Viele SPA-Seiten rangieren bei Google weit oben. Dennoch erfordern einseitige Anwendungen von ihren Entwicklern einige zusätzliche Anstrengungen, um sie SEO-freundlich zu gestalten. Die Entwickler sollten erfahren und qualifiziert genug sein, um eine SPA mit Blick auf SEO zu strukturieren und zu erstellen. Sie sollten einen optimalen Rendering-Typ für die Anwendung wählen, zusätzliche Tools verwenden, um Metadaten und URLs korrekt zu behandeln, und spezielle Techniken (Caching, Lazy Loading usw.) anwenden, um die Leistung der Anwendung zu optimieren.

Welche Art der HTML-Darstellung ist am SEO-freundlichsten?

Wenn Sie eine SPA für SEO optimieren, müssen Sie zwischen CSR (Client-seitiges Rendering), SSR (Server-seitiges Rendering) und Pre-Rendering wählen. Ihre Wahl hängt von der Art und Größe Ihrer Anwendung ab. CSR ist die am wenigsten empfohlene Option. SSR ist die komplexeste Lösung, eignet sich aber gut für große Anwendungen mit häufig wechselnden Inhalten. Pre-Rendering ist optimal für Anwendungen, die eine kleine Anzahl statischer Seiten benötigen, um bei Google zu ranken.

Warum sind einseitige Anwendungen die Zukunft?

Die Qualität der Nutzererfahrung wird für ein gutes Ranking immer wichtiger. Im Gegensatz zu statischen Websites werden SPAs mit modernen Web-Frameworks erstellt, die sich schnell weiterentwickeln. Diese Technologien bieten die Interaktivität und das Design, die Sie benötigen, um sowohl die Erwartungen der Nutzer als auch die technischen Anforderungen der Suchmaschinen zu erfüllen.