SEO und SEA im Kreuzfeuer von AJAX und Single-Page-Applications

Kategorie: Technologie

Web-Anwendungen bestehen aus einzelnen Seiten, die durch den Klick auf Navigations-Buttons geladen werden müssen. Dies war vor einigen Jahren (und ist teilweise auch heute noch) alltäglich. Der Nachteil in dieser Praxis besteht in unschönem Flackern der Inhalte, wenn neuer Content nachgeladen wird. Der neue Trend deshalb: SPA.

SPA steht für “Single-Page-Application”. Aktuelle Shops, Blogs und Social-Media Plattformen scheinen durch diese Technik wie aus einem Guss. Während das initiale Laden der Anwendung etwas länger erscheint, navigiert man danach im besten Fall wie auf einer Wolke durch alle Bereiche. Inhalte verschmelzen, tauchen wie von Geisterhand auf oder verschwinden. Maximal kleine Hinweise deuten auf das Nachladen einzelner Komponenten.

Dynamisches Nachladen von Inhalten

Natürlich wird beim ersten Start der Webseite nicht alles geladen und angezeigt, auch wenn die Bezeichnung “Single-Page-Application” das vermitteln mag.
Die Hauptdatei (index.html oder index.php) lädt je nach Navigation des Besuchers genau die Inhalte nach, die gerade benötigt werden. Anschließend werden diese passend angezeigt.

So taucht die Detailansicht des angeklickten Produktes mit einem fade-Effekt auf, ohne dass die gesamte Seite neu geladen wird und wir völlig aus unserem Shopping-Flow gerissen werden.
Gleichzeitig wird ein neuer “Page-Request” gespart, die Geschwindigkeit der Seite steigt spürbar. Und auch die eigene Domain wird in der URL-Leiste sauber ausgegeben.

Die Technik unter der Haube

Dynamisches Laden (Stichwort AJAX) bedeutet nichts anderes, als das im Hintergrund Anfragen an verschiedene Server gestellt werden, um zum Beispiel Bilder, Kommentare, relevante Inhalte oder auch Werbung zu laden und bei erfolgreicher Lieferung in die Seite einzubetten.
Klarer Vorteil: Während dieses asynchronen Ladens wird der Nutzer auf der Seite nicht unterbrochen. Nicht selten werden viele Inhalte gleichzeitig asynchron nachgeladen.

Die SEO- und Customer Journey-Problematik

Und genau hier entstehen die Probleme:
Search-Engine-Crawler benötigen eine eindeutige URL in einer Form ähnlich „index.html?area=shop&article_id=4711“ mit den dazugehörigen internen Links, alias HTML Tags (a href='...'). Die URL sollte im Optimalfall zudem “sprechend” sein, d.h. für Mensch und Maschine lesbare Informationen zum Seiteninhalt liefern. Das hat unter anderem den Vorteil, dass das Snippet in den Suchergebnissen besonders aufmerksamkeitsstark ist:

suchergebnis-beispiel

Nur durch individuelle URLs mit individuellen Inhalten können aktuell bestimmte Keywords optimal bedient werden.

Auch in der Customer Journey zeigen sich Stolperfallen. Ohne einen eindeutigen Link zum Produkt kann dieser nicht weitergegeben werden, bspw. an Bekannte oder in Social-Media-Kommentaren. Zudem ist die Analyse einer nach dieser Technik aufgebauten Seite erschwert, da die passenden Tools nur eine Datei (unsere index.html oder index.php) geliefert bekommen.

Manipulation der Browserzeile

Durch die Manipulation der URL mit Javascript konnte man diese Problematik zum Teil umgehen.
Fähige Web-Entwickler denken sogar daran, dass auch die Browser-Historie inklusive Back-/Forward-Buttons noch korrekt funktioniert. Dazu werden “States” mit “Stateparams” verwaltet. Bisher wurden diese Techniken teilweise recht dirty mit Javascript-Plugins wie history.js oder der BBQ-Erweiterung für jQuery realisiert. Auch eine umfangreiche Implementierung speziell für das Google AngularJS-Framework wird mit Angular-ui-Router angeboten.
Die resultierenden Urls ähneln dann dem Format “index.html/#/shop/articles/4711”. Manchmal mit dem sogenannten Hashbang “#!” als Trenner. Manche Server sind sogar so eingerichtet, dass auf das Hash-Zeichen komplett verzichtet werden kann. Für diese Alternative wird HTML5 benötigt, welches spätestens in ein paar Monaten vorausgesetzt werden darf.

Serverseitige Einstellungen via .htaccess-Datei sorgen dafür, dass beim Auflösen der URL nicht Unterverzeichnisse erwartet werden, sondern der Teil nach der eigentlichen Top-Level-Domain als Query-String erkannt wird.

Solche zusammengebauten Links können als Fake bezeichnet werden, weil dahinter keine richtige Seite steht, sondern nur ein Wegweiser, durch den die Anwendung erkennt, welche Teile geladen werden sollen. So wird ein Crawler dort keine sauber strukturierte Datei finden – mit HTML-Meta-Tags wie Titel, Description und wie oben erwähnt auch ohne direkt erkennbare Links.
Das wirkt sich natürlich negativ auf das Ranking bei Suchmaschinen aus.
Umgangen wird diese Problematik für “wichtige” Bereiche, indem tatsächlich wieder komplette Seiten und teilweise ganze Landing-Pages erstellt werden.

Fazit

Aktuell sind im Zusammenhang mit Single-Page-Applications die Fähigkeiten der großen Suchmaschinen noch unbefriedigend – die ultimative Lösung ist im Bereich SEO noch nicht gefunden.
Die recht frische HTML5-API bietet zwar schon gute Möglichkeiten für versierte Programmierer die Browser-Historie zu manipulieren, ist aber aktuell noch nicht auf allen Geräten angekommen.
Google geht in seiner 2.0 Version von AngularJS einen sehr vielversprechenden Weg des Routings. Allerdings wird hier komplett auf die neueste Javascript Version (ECMA6) gesetzt, welche zum aktuellen Zeitpunkt noch von kaum einem Browser unterstützt wird.

Im Moment steckt das Thema “SEO/SEA und AJAX” mitten in einer Phase der Selbstfindung und Optimierung. Aber wie immer wird auch bei dieser Problematik das Internet eine Lösung finden. Ganz getreu dem Motto: “Niemals war die Entwicklung neuer Web-Technologien so rasant wie heute.