Einseitige Anwendungen (SPAs) in SEO

27 März 2024

Lesezeit: 12 minuten

Senior SEO-specialist

Meine Strategie für SEO für einseitige Anwendungen (SPAs)

Das Internet und die Art, wie die Menschen es nutzen, verändern sich ständig. Hier müssen SEO-Spezialisten ständig reagieren, indem sie interaktive Online-Erlebnisse schaffen. Dies kann z.B. durch die Verwendung von Single-Page Applications (SPAs) geschehen.

SPAs ermöglichen es dem Benutzer, den Inhalt einer Website auf dynamische Weise zu sehen, aber in Wirklichkeit besteht die Website nur aus einer Seite. Auf diese Weise verkürzt sich die Ladezeit und der Nutzer kann schneller scrollen.

Die Verwendung von SPA bietet viele Vorteile, wirft aber auch Fragen in Bezug auf SEO auf. Der optimale Einsatz von SPAs muss ein Gleichgewicht zwischen kreativem Verständnis für das Nutzererlebnis und technischem Fachwissen herstellen. In diesem Artikel gehe ich auf diese Probleme ein und erkläre, wie die Verwendung von SPAs für bessere Suchergebnisse sorgen kann, um einen höheren Rang in Google zu erreichen.

Inhaltsübersicht anzeigen

Die Bedeutung von SPA

SPA – auch bekannt als Single-Page Application – ist eine wichtige Innovation in der Online-Welt, die eine andere Art des Browsens bietet. Anstelle herkömmlicher Websites, die in Rubriken mit neuen Seiten darunter unterteilt sind, zeigt SPA alle Inhalte auf einer Seite an. So müssen neue Seiten nicht immer wieder neu geladen werden. Nur das erste Laden der Seite ist notwendig.

Eine SPA lädt jedoch weiterhin die erforderlichen Daten, oft über AJAX-Anfragen. JavaScript wird verwendet, um neue Informationen in die bestehende Webseite zu integrieren. Das bedeutet, dass sich der Inhalt ändert, ohne dass sich die URL ändert. Dies beschleunigt die Benutzererfahrung.

Bei einer SPA wird die Benutzeroberfläche in Echtzeit aktualisiert. Dies geschieht auf die gleiche Weise, wie Desktop-Anwendungen eine Seite aktualisieren. Da sich die URL nicht ändert, besteht für den Nutzer eine kontinuierliche Interaktion. Moderne JavaScript-Frameworks wie React, Angular oder Vue verwalten diese dynamischen Updates und sind für den Betrieb der Anwendung verantwortlich.

Neben den Vorteilen der SPA bringt sie auch einige Herausforderungen mit sich, insbesondere im Bereich der Suchmaschinenoptimierung. SEO-Spezialisten müssen andere Wege finden, um sicherzustellen, dass die Suchmaschinen den Inhalt trotzdem crawlen und indexieren. Technische Kenntnisse und Fähigkeiten werden mit strategischer Planung kombiniert, um die SPA sichtbarer und besser auffindbar zu machen. Diese Herausforderungen sind jedoch nicht sehr häufig. Insbesondere bei Schnittstellen, die nicht indiziert sind, entstehen leichter Probleme.

Beispiele SPAs

Viele moderne Anwendungen und Websites sind SPAs. Dabei werden die Schnittstellen oft an die persönlichen Vorlieben der Nutzer angepasst. Dies sind einige Beispiele für bekannte SPAs:

Gmail. In Google Mail werden alle Nachrichten auf 1 Seite angezeigt. Alle Aufgaben, die Sie ausführen können, fallen unter dieselbe URL.
Facebook. Es ist möglich, endlos durch einen Facebook-Feed zu scrollen und verschiedene Aktionen auszuführen, ohne die App oder Website neu zu laden.
Google Maps. Der Abruf von Routen und die Anzeige der Karte von Google Maps kann auch erfolgen, ohne dass die Seite jedes Mal neu geladen werden muss.
Netflix. Mit Netflix können Sie schnell durch das gesamte Angebot blättern und einen Film oder eine Serie auswählen.
X (früher Twitter). X ist offiziell eine PWA, aber die Hauptwebsite enthält SPA-Funktionen. Der Inhalt wird hier dynamisch geladen.
Instagram. Auf Instagram werden die Inhalte dynamisch angezeigt. Ein Großteil von Instagram ist daher ein SPA.
Airbnb. Auf einer Seite können Sie durch alle Unterkünfte blättern, ohne die URLs zu ändern.
GitHub. Die Weboberfläche von GitHub enthält SPA-Elemente, insbesondere in den Bereichen Projektmanagement und Code-Exploration.

Die oben genannten Websites verwenden SPA mit dem Ziel, den Nutzern ein schnelles und dynamisches Erlebnis zu bieten. Dies ist besonders nützlich für komplexe Websites mit vielen Benutzerinteraktionen.

Technische Herausforderungen

SPAs verwenden JavaScript, das das Laden von Inhalten erleichtert, ohne dass eine vollständige Aktualisierung der Seite erforderlich ist. Dies ist manchmal mit technischen Herausforderungen verbunden. Um die Herausforderungen zu minimieren, haben Suchmaschinen wie Google in eine bessere Fähigkeit zur Handhabung von JavaScript investiert. Die Beschränkungen wurden daraufhin verringert, sind aber noch nicht vollständig beseitigt.

Die Ausführung von Aktionen durch den Benutzer ist eine solche Herausforderung. Bei einer solchen Aktion wird neuer Inhalt geladen. In einigen Fällen können Suchmaschinen diese dynamischen Aktualisierungen nicht erkennen, und es entsteht eine Diskrepanz zwischen der Ansicht des Nutzers und der Indexierung durch die Suchmaschine.

Darüber hinaus stützen sich SPAs oft auf das Client-Site-Rendering, bei dem JavaScript-Frameworks im Browser ausgeführt werden, um die Seite zu erstellen (siehe meine Artikel über dynamisches Rendering und Server-Side/Client-Side-Rendering). Dadurch wird die Diskrepanz nur noch größer.

Das Client-Rendering sorgt für ein reibungsloses und interaktives Nutzererlebnis, aber beim Crawlen einer Website erhält der Bot zunächst nur die bloße HTML-Vorlage, die noch nicht mit Inhalt gefüllt ist. Der Bot indiziert möglicherweise eine leere Seite und senkt damit die Ergebnisse der Suchmaschine.

Auch die Verwaltung des Kriechbudgets ist eine Herausforderung. Suchmaschinen haben nur begrenzte Ressourcen für das Crawlen einer Website. SPAs sind oft komplex und abhängig von JavaScript, was das Budget schnell aufzehrt.

Die Vorteile von SPA für SEO

Neben den oben genannten Herausforderungen der SPA für SEO, gibt es auch Vorteile für die Verbesserung einer SEO Roadmap.

Früher war HTML die Grundlage des Webinhalts, CSS war für die Formatierung zuständig und JavaScript wurde für interaktive Funktionen verwendet. Heute ist JavaScript auf mehr als 98 % aller Websites vorhanden und kann den Inhalt einer Seite an die Aktionen des Benutzers anpassen.

SPAs hingegen machen HTML, CSS oder JavaScript für jede Aktion überflüssig. Anstatt für jede Aktion verschiedene Quellen anzufordern, werden beim Öffnen der Website alle Quellen auf einmal angefordert, so dass der Browser seine Arbeit erledigen kann.

Diese neue Arbeitsweise sorgt dafür, dass die Websites wesentlich schneller sind. Dadurch wird die Benutzerfreundlichkeit erheblich verbessert. Untersuchungen haben gezeigt, dass Besucher maximal drei Sekunden auf das Laden einer Seite warten und die Seite verlassen, wenn die Ladezeit länger ist. Mit einer SPA ist die Ladezeit im Allgemeinen kürzer, aber wenn sie falsch implementiert ist, kann das Gegenteil passieren und sich negativ auf die Suchmaschinenoptimierung auswirken.

SPAs in den Grundlagen

Angular, React und Vue sind die bekanntesten Frameworks für die Erstellung von SPAs. Der Unterschied zwischen den Tools liegt hauptsächlich in den unterstützenden Bibliotheken und APIs, aber sie haben gemeinsam, dass ihr clientseitiges Rendering von guter Qualität ist.

JavaScript reduziert die Anzahl der Anfragen an den Server-Browser. Die Geschwindigkeit der Benutzererfahrung steigt, aber die Verwendung von JavaScript hat negative Auswirkungen auf die Suchmaschinenergebnisse. Suchmaschinen erleben die Website anders als Nutzer und sehen meist unzugängliche Inhalte. Die Suchmaschinen denken, die Seite sei noch leer, während die Nutzer dynamische Inhalte sehen, die ständig neu geladen werden.

Vor allem die Nutzer profitieren am meisten von den SPAs. Nicht nur wegen der Geschwindigkeit, sondern auch, weil SPAs mit schwachen Verbindungen immer noch leicht zugänglich sind. Dies liegt daran, dass SPAs alle benötigten Ressourcen unmittelbar nach der ersten Anfrage lokal zwischenspeichern. Außerdem verschiebt sich das Layout nicht.

Obwohl zusätzliche Anstrengungen zur Verbesserung der Suchmaschinenoptimierung erforderlich sind, bieten SPAs genügend Vorteile, um dauerhaft angewendet zu werden. Außerdem trägt eine gute Nutzererfahrung zu einer besseren Suchmaschinenoptimierung bei.

Herausforderungen von SPAs für SEO

Wie bereits erwähnt, kann die Verwendung von JavaScript bei dynamisch geladenen Inhalten zu Problemen mit Suchmaschinen führen, da diese nur eine leere Seite sehen. Das liegt daran, dass herkömmliche Suchmaschinen darauf ausgelegt sind, statische HTML-Inhalte zu indizieren und zu crawlen, während SPAs aus leerem HTML bestehen. Erst wenn das JavaScript ausgeführt wird, wird der HTML-Code mit Inhalt gefüllt. Die Suchmaschinen sind also mit unvollständigen Informationen konfrontiert.

Außerdem werden bei der Suchmaschinenoptimierung für jede Inhaltsseite unterschiedliche URLs verwendet. Da Spas nur eine HTML-Seite verwenden und sich daher die URL nicht ändert, muss ein SPA geändert werden, um für Suchmaschinen relevant zu sein. Es ist wichtig, dass SPAs mit relevanten SEO-Metadaten für jeden einzelnen Abschnitt innerhalb der Anwendung versehen werden.

Die Tatsache, dass SPAs komplexer sind, hilft der Suchmaschinenoptimierung auch nicht. Das Crawl-Budget wird sie schneller durchlaufen, was dazu führen kann, dass Teile der Website innerhalb der Zeit, die Suchmaschinen für das Crawlen einer Website vorsehen, übersehen werden.

Die SEO-Optimierung erfordert eine angemessene Architektur von SPAs unter Verwendung von Server-seitigem Rendering (SSR). SSR generiert die Inhalte serverseitig, bevor sie an den Client gesendet werden. Sie können eine vollständige Seite in der Vorschau anzeigen, indem Sie Pre-Rendering-Techniken anwenden.

Um sicherzustellen, dass die Suchmaschinen jeden Abschnitt der SPA als einzigartiges Element behandeln, sollten dynamische Meta-Tags und strukturierte Daten in geeigneter Weise eingesetzt werden.

Im Folgenden finden Sie eine Zusammenfassung der größten Herausforderungen:

Herausforderung	Beschreibung
Indizierung von Inhalten	SPAs laden Inhalte dynamisch mit JavaScript, wodurch der Inhalt für Suchmaschinen, die nur HTML indizieren, unsichtbar werden kann.
Effizienz beim Kriechen	Umfangreiches JavaScript kann das Crawl-Budget überschreiten und Suchmaschinen daran hindern, den gesamten Inhalt der SPA zu indizieren.
Verwendung von Meta-Tags	Dynamisch geladenen Seiten innerhalb einer SPA fehlen oft eindeutige Meta-Tags pro Abschnitt. Diese sind für eine gute Indexierung der Seite unerlässlich.
URL-Verwaltung	SPAs verwenden oft nur eine URL. Dies führt zu SEO-Problemen, da für jeden Inhalt eine eigene URL erforderlich ist.
Aufbau von URLs	Die Tatsache, dass die SPAs keine traditionelle Linkstruktur aufweisen, macht die Links weniger auffindbar und mindert ihren Wert.
Server-seitiges Rendering (SSR)	SSR ist notwendig, um SPAs für Suchmaschinen vorzuladen. Ihre Umsetzung kann komplex sein.
Vor-Rendering	Pre-Rendering erzeugt statische Snapshots für Crawler. Dies erfordert zusätzliche Einrichtung und Wartung.
Engagement der Nutzer	Obwohl SPAs die Interaktion verbessern, kann es zu Messproblemen kommen, da die herkömmliche Analytik nicht für SPAs optimiert ist.
Strukturierte Daten	Die dynamische Einbindung strukturierter Daten in SPAs stellt eine größere technische Herausforderung dar als bei herkömmlichen Websites.

Herausforderungen für SPAs in Bezug auf SEO.

Tipps für SEO bei der Verwendung von SPAs

Um SEO so effizient auf SPAs anzuwenden, sind die folgenden Tipps nützlich. An dieser Stelle möchte ich gleich darauf hinweisen, dass es wichtig ist, mit einem Spezialisten zusammenzuarbeiten, um eine maßgeschneiderte Strategie zu entwickeln, wenn Ihre Organisation ein SPA betreibt.

Setzen Sie einen Spezialisten ein: Die Komplexität von SEO im Zusammenhang mit SPAs erfordert einen Spezialisten, der eine gute, maßgeschneiderte Strategie entwickeln kann.
Verwenden Sie universelles JavaScript: Verwenden Sie universelles oder isomorphes JavaScript für die serverseitige Generierung der Seite, damit die Suchmaschinen nicht alle JavaScript-Dateien ausführen und rendern müssen.
HTML-Seiten vorladen: Laden Sie alle HTML-Seiten vor und speichern Sie sie im Server-Cache. So können diese den Suchcrawlern präsentiert werden und die Suchmaschinen werden nicht auf leere Seiten stoßen. Nutzen Sie dazu Dienste wie BromBone oder Prerender.
Implementierung der Feature-Erkennung: Implementieren Sie eine Feature-Erkennung, um die Erfahrung mit verschiedenen Code-Quellen zu verbessern. Auf diese Weise wird die Basisseite sowohl für Crawler als auch für Benutzer zugänglich.
Verwenden Sie unterschiedliche URLs: Obwohl SPAs nur eine URL verwenden müssen, ist es für die Suchmaschinenoptimierung besser, verschiedene URLs zu verwenden. Dies kann über die History-API erfolgen.
Anordnen von Fehlercodes: Bei Fehlercodes (einschließlich 404 und 500) ist es sinnvoll, separate Ansichten zu erstellen und die JavaScript-Dateien so zu ändern, dass die Browser zur richtigen Ansicht geleitet werden.
Geeignete Titel und Meta-Beschreibungen: Für eine optimale Suchmaschinenoptimierung sind geeignete und einzigartige Titel und Meta-Beschreibungen für jeden einzelnen Abschnitt unerlässlich.
Roboter Meta-Tags Robots-Meta-Tags geben den Suchmaschinen Anweisungen, wie sie die Seiten crawlen und indexieren sollen, um sicherzustellen, dass dies korrekt geschieht und Duplikate und falsche Indexierungen vermieden werden.

Zusammenfassung

Auch wenn SPAs auf den ersten Blick viele Herausforderungen für die Suchmaschinenoptimierung mit sich bringen, können Sie durch die Anwendung guter Techniken und Strategien die Suchmaschinenoptimierung so weit wie möglich optimieren. Verwenden Sie zum Beispiel isomorphes JavaScript, Feature Detection, Pre-Rendering und History API.

Verwalten Sie außerdem Meta-Tags dynamisch und implementieren Sie Robots-Meta-Tags in geeigneter Weise. Dadurch werden SPA-Inhalte für Suchmaschinen zugänglich und indizierbar. Mit den richtigen Strategien sind SPAs eine gute Ressource in einer sich schnell verändernden und wettbewerbsorientierten Welt, in der die Benutzererfahrung einen großen Teil der SEO ausmacht.

Das umfassendste Buch über Website-Geschwindigkeit

Ich habe so viel über die Beschleunigung von Websites und alles, was damit zusammenhängt, geschrieben, dass ich es in verschiedene Abschnitte unterteilen möchte: Allgemeines, Tools, Punkte zur Verbesserung der Geschwindigkeit und Tipps. Unter den folgenden Links finden Sie weitere Informationen über Tools und Tipps zur Beschleunigung Ihrer Website.