Single-Page-Applications (SPAs) sind im Kommen. Jeder will eine, alle haben eine. Das einzige Problem: Google, Bing und Co.! Denn: die so wichtige Suchmaschinenoptimierung – kurz SEO – und Single-Page-Applications werden einfach nicht wirklich warm miteinander. Schuld daran ist, dass Suchmaschinen so ihre Probleme mit JavaScript haben und deshalb den Inhalt der Seite nicht komplett laden können. Das führt dazu, dass die Seite für sie nicht sichtbar ist. Keine Sichtbarkeit in Suchmaschinen bedeutet auch keine Sichtbarkeit bei potentiellen Nutzern. Und was nützt schon so eine tolle SPA, wenn sie niemand bewundern kann? – Doch findet man die Seite denn wirklich gar nicht oder gibt es ein paar Tipps und Tricks für eine höhere Präsenz? Lest selbst.
Grundlegendes zur Single-Page-Application
Das besondere an der Single-Page-Application ist, dass sie aus einem einzigen HTML-Dokument besteht, dessen Inhalte dynamisch nachgeladen werden. Dieses Websiten-Design steht im Gegensatz zur klassischen Website, die aus mehreren, untereinander verlinkten HTML-Dokumenten besteht.
Anders gesagt, ist es eine webbasierte Anwendung, die auf einer einzigen Seite stattfindet. Dies zeigt auch einen großen Vorteil der SPA. Statt wie bei den klassischen Websites bei jedem Klick eine neue Seite komplett zu laden, begnügt sich die Single-Page-Application mit einer einzigen Webseite und lädt alle Inhalte, die für die Navigation des Nutzers gerade benötigt werden, Stück für Stück nach. So werden nur geringe Datenmengen über das Web übertragen. Da die HTML-Struktur, CSS, JavaScript und Bilder nur einmal ausgeliefert werden, profitieren gerade mobile Anwendungen stark vom Konzept der Single-Page-Application.
Ein bisschen Technik und das SEO-Problem dahinter
Die Web-Anwendung gibt eine klare Schnittstelle zwischen Frontend und Backend. Im Backend – das in Skript – und Programmiersprachen, wie z.B. PHP, Java oder Node.js, geschrieben ist – werden Daten gespeichert und verarbeitet. Das Frontend beruht neben HTML und CSS sehr stark auf JavaScript und entsprechenden Frameworks. Über JavaScript stellt das Frontend Anfragen an das Backend und bekommt daraufhin Daten zurück. Diese setzt das JavaScript an der benötigten Stelle ein.
Und hier ist der Haken: Da die Inhalte über JavaScript nachgeladen werden, fällt es Suchmaschinen schwerer Single-Page-Applications zu durchsuchen. Die Crawler der Suchmaschinen benötigen eindeutige URLs, die im besten Fall auch logisch zum Inhalt der Seite passen sollten. Auch bei der Customer Journey kann es zu Stolperfallen kommen, da es ohne eine URL schwierig ist, das Produkt zu empfehlen oder es erneut zu finden. Und zu guter Letzt fällt auch die wichtige Analyse der Seite nicht so einfach aus, da zum Beispiel Pfade nicht eindeutig abgebildet werden können. Das bedeutet zunächst per se für den Betreiber der Seite, dass sie rein aus Sicht der Suchmaschinenoptimierung nicht zur Darstellung von informationsbasierten Webseiten geeignet ist.
Die gute Nachricht: Ganz so ist es nicht mehr. Spätestens seit eines der wichtigsten JavaScript Frameworks (AngularJS) von Google stammt, hat sich an dieser Stelle wirklich viel getan. Mittlerweile hat Google JavaScript beim Crawlen aktiviert, was dazu führt, dass Single-Page-Applications für Suchmaschinen immer besser durchsuchbar werden. Dennoch ist die durchschlagende Lösung noch nicht gefunden.
Daher ist es hier besonders wichtig, dass man sich an einige Standards hält, um den Crawlern das Finden und Durchsuchen der Seite zu erleichtern. Deshalb haben wir euch im Folgenden 4 Tipps aufgeschrieben, die ihr bei der Erstellung euer Single-Page-Application beachten solltet:
Unsere 4 Tipps
- Definiere einzelne Abschnitte auf der Seite
- Jeder Abschnitt der Seite sollte vollkommen unabhängig behandelt werden. Dazu gehören spezielle Keywords, eigene Bilder und Texte.
- Gib jedem Abschnitt einen neuen H1-Tag
- Die Überschrift H1 signalisiert einen einzelnen, individuellen Teil und kann deshalb auch dafür genutzt werden, um verschiedene Abschnitte zu verdeutlichen. Bitte nur eine H1 pro Abschnitt nutzen.
- Unterteile die einzelnen Abschnitte durch DIVs
- Jeder Teil sollte durch einen eigenen DIV-Container getrennt werden.
- Nutze Anchor Links
- Ein Anchor-Link bringt dich zu einem beliebig-bestimmten Platz auf der Website. Man kann zum Beispiel jedem einzelnen Abschnitt einen anderen Anchor-Link geben, um zum einen die Usability der Seite zu optimieren als auch das Keyword-Ranking dadurch zu verbessern.
Um einen Anchor Link zu erstellen,
benenne den DIV-Container mit einer ID
<div id="jobs-karriere">
verlink es
<a href="#jobs-karriere">Jobs + Karriere</a>
Die Verlinkung für externe Quellen
<a href="https://www.flyacts.com/app-agentur/#jobs-karriere">Jobs + Karriere</a>
Was bewirkt der Anchor Link?
Wie bereits oben angedeutet, sorgt das Stück für Stück nachladen der Website für Probleme beim Crawlen. Hier kommen die Anchor Links ins Spiel. Durch die Anchor Links werden alternative URLs zu den einzelnen Abschnitten ausgegeben, die der aktuellen Darstellung der Website entspricht. Diese einzelnen Abschnitte können von den Suchmaschinenbots nun gecrawlt werden.
So kann man einerseits innerhalb der Seite von Abschnitt zu Abschnitt springen, ohne jedes Mal komplett durchzuscrollen und ohne eine neue Seite zu laden. Auch ist es damit möglich von externen Quellen, wie andere Websites, auf einen speziellen Abschnitt zu verlinken. Dies erleichtert gleichzeitig auch die Customer Journey bzw. das Empfehlen von Produkten.
Fazit
Suchmaschinenoptimierung und Single-Page-Applications sind nicht mehr auf Kriegsfuß aber derzeit ist noch nicht die durchschlagende Lösung gefunden wurden, um beide Seiten komplett zufrieden zu stellen. Anhand der Anstrengungen rund um AngularJS von Google erkennt man allerdings, dass hier noch einiges auf uns zu kommt und wir dürfen wieder einmal gespannt sein, was für Lösungen uns das Internet noch so bereit hält.
Quellen
https://www.getambassador.com/blog/single-page-webapp-seo
http://searchenginewatch.com/sew/how-to/2358775/seo-strategies-for-javascript-heavy-single-page-applications-or-ajax-sites
