Wie die Optimierung von SPAs gelingt

SPA SEO

Kontakt aufnehmen

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. 

MVV
diva-e sorgte für die Anbindung eines Commerce Systems in die SAP-Landschaft und entwickelte ein Self-Service Portal für Kunden.
Schott
diva-e schafft durch die Online Plattform des Glas-Weltmarktführers ein einzigartiges Bestellerlebnis im B2B.
dmTech
diva-e setzt gemeinsam mit dmTech neue Maßstäbe sowohl in der Softwareentwicklung als auch in der digitalen Beratung.
Weleda
diva-e begleitet Weleda seit mehreren Jahren auf dem Weg der digitalen Transformation. Als großer Meilenstein der Digitaloffensive ging im Februar 2024 der Online-Shop in Deutschland live.
Vergölst
diva-e bringt die Kundenansprache bei Vergölst durch optimierte Bestandskundenansprache mit Adobe Campaign ins Rollen.
Talanx
diva-e bildete im Projekt mit der Talanx Gruppe für den Relaunch der Corporate Website sowie das neue Karriereportal die gesamte digitale Wertschöpfungskette ab.
STAUFF
diva-e entwickelt eine skalierbare und zukunftssichere Architektur und integriert diese in die bereits bestehenden Backendsysteme.
Hertha BSC
diva-e entwickelte für Hertha BSC eine neue State-of-the-Art Website mit emotionalem Design.
Klöckner & co
diva-e begleitet Stahlhandelsriesen Klöckner bei der Digitalisierung und realisiert Online Shops mit Marktplatzfunktion.
FC Bayern München
diva-e setzt für den deutschen Rekordmeister und seine Fans neue Maßstäbe mit maßgeschneiderten digitalen Erlebnissen.
EDEKA
diva-e realisiert für den Einzelhandelsriesen eine dynamische E-Food-Plattform und sorgt so für mehr Transaktionen.
MVV
diva-e sorgte für die Anbindung eines Commerce Systems in die SAP-Landschaft und entwickelte ein Self-Service Portal für Kunden.
Schott
diva-e schafft durch die Online Plattform des Glas-Weltmarktführers ein einzigartiges Bestellerlebnis im B2B.
dmTech
diva-e setzt gemeinsam mit dmTech neue Maßstäbe sowohl in der Softwareentwicklung als auch in der digitalen Beratung.
Weleda
diva-e begleitet Weleda seit mehreren Jahren auf dem Weg der digitalen Transformation. Als großer Meilenstein der Digitaloffensive ging im Februar 2024 der Online-Shop in Deutschland live.
Vergölst
diva-e bringt die Kundenansprache bei Vergölst durch optimierte Bestandskundenansprache mit Adobe Campaign ins Rollen.
Talanx
diva-e bildete im Projekt mit der Talanx Gruppe für den Relaunch der Corporate Website sowie das neue Karriereportal die gesamte digitale Wertschöpfungskette ab.
STAUFF
diva-e entwickelt eine skalierbare und zukunftssichere Architektur und integriert diese in die bereits bestehenden Backendsysteme.
Hertha BSC
diva-e entwickelte für Hertha BSC eine neue State-of-the-Art Website mit emotionalem Design.
Klöckner & co
diva-e begleitet Stahlhandelsriesen Klöckner bei der Digitalisierung und realisiert Online Shops mit Marktplatzfunktion.
FC Bayern München
diva-e setzt für den deutschen Rekordmeister und seine Fans neue Maßstäbe mit maßgeschneiderten digitalen Erlebnissen.
EDEKA
diva-e realisiert für den Einzelhandelsriesen eine dynamische E-Food-Plattform und sorgt so für mehr Transaktionen.
weleda logo
Logo von Talanx
weleda logo
Logo von Talanx

We

our partners