Eine Single Page Application (SPA) ist eine Webanwendung, die alle erforderlichen HTML-, JavaScript- und CSS-Inhalte auf einer einzigen Website in einem Zug komplett lädt. Was sich zunächst gut anhört, kann aber die SEO-Performance beeinträchtigen. Die SEO-Expert:innen von diva-e zeigen die Hintergründe auf und stellen Maßnahmen vor, mit denen Sie das Problem lösen können.
Strukturelle Unterschiede zwischen SPAs und regulären Website
Im Gegensatz zu herkömmlichen Websites, bei denen beim Aufruf einer Seite jedes Mal das HTML und weitere Seiteinhalte geladen werden müssen, wenn der Benutzer eine neue Seite anzeigen möchte, wird die Seite bei SPAs nur einmal geladen. SPAs aktualisieren die Seite dynamisch auf der Grundlage von Benutzerinteraktionen, anstatt für jede Aktion des Benutzers neue Seiteinhalte zu laden. Dadurch verkürzt sich die Zeit, die der User für die Interaktion mit der Anwendung benötigt. Man kann sich SPAs als großen Trainingsraum vorstellen, in dem alle Geräte gleichzeitig stehen und man von einem Trainingsgerät zum nächsten wechseln kann, ohne den Raum zu verlassen.
Reguläre Websites hingegen haben eine striktere Trennung und Unterteilung ihrer Inhalte je nach Seiten. Alle Trainingsgeräte von Sportart A stehen in Raum A (Seite A), alle Geräte von Sportart B in Raum B (Seite B) usw.
SPAs sind abhängig von JavaScript
SPAs basieren immer auf JavaScript und werden von einer Vielzahl von JavaScript Frameworks unterstützt, z. B. React, Angular und Vue, die teils extra für die Erstellung von SPAs konzeptioniert wurden. Single Page Applications können aufgrund ihrer Art und Technologie mit dem Google Crawling in Konflikt geraten. Alle SPA-Seiteninhalte werden anhand von JavaScript dynamisch generiert. Wenn ein regulärer Google Crawler, der kein JavaScript ausführt, eine SPA aufruft, sind deren Inhalte für diesen Crawler nicht auswertbar. Generell gestalten sich Crawling und Rendering der SPA-Inhalte aufwendig und komplizierter als bei regulären Websites.
Technische Maßnahmen, um Single Page Application und SEO zu vereinbaren
Zudem ist es als Entwickler von SPAs teilweise notwendig, künstliche URLs und künstliche Seiten (Räume) innerhalb der Single Page Application zu erstellen, damit Google die Inhalte (im oberen Beispiel Trainingsgeräte) voneinander abgegrenzt wahrnehmen und indexieren kann. Sind alle Inhalte unter einer einzigen URL bzw. Seite erreichbar, erschwert das Google die Indexierung der Inhalte, was sich negativ auf die Suchmaschinenoptimierung auswirken kann.
Außerdem sollte man als SEO bzw. Entwickler sicherstellen, dass alle Seiten innerhalb der Webseiten-Architektur mit ihren definierten URLs verlinkt und erreichbar sind. Weiterhin ist zu gewährleisten, dass jede einzelne Seite geeignete Meta Tags verwendet. Einerseits um die Indexierung der Seite steuern zu können. Andererseits um ihr durch die Pflege von Title und Meta Description mehr Kontext zu geben und die Darstellung in den Suchergebnissen steuern zu können.
Ladeperformance kann bei SPAs leiden
Da alle Ressourcen im Voraus geladen werden, können SPAs außerdem ressourcenintensiver sein als herkömmliche Webanwendungen. Nicht nur kann das auf langsameren Geräten zu Leistungsproblemen führen. Auch die für SEO wichtigen Core-Web-Vital-Werte können bei nicht optimierten SPAs leiden. Um SPAs für Google und SEO besser geeignet zu machen, sollten Entwickler die Implementierung von serverseitigem Rendering in Betracht ziehen. Die JavaScript-Inhalte werden vorab auf dem Server gerendert und erst dann an den Browser gesendet. Dadurch ist der Inhalt für die Crawler von Google als HTML verfügbar und leichter zu indexieren.
