Mit Hashbangs SEO-freundliche Single-Page Seiten entwickeln

© kuklos - Fotolia.com

Single-Page Webseiten gehören heute zum Web: In manchen Bereichen ist es schon fast ein Standard-Layout. In Ihrer einfachsten Form stehen diese Internetseiten jedoch mit Suchmaschinen auf dem Kriegsfuß. Hashbangs sind eine Lösung, die SEO und Single-Page miteinander versöhnen. Der Einsatzbereich dieser Technologie, die auch als Shebang bezeichnet wird, liegt insbesondere bei Webseiten, die auch bei alten Browsern gut wegkommen sollen.

Single-Pages und SEO

Für die SEO sind Single-Pages kompliziert. Laden Single-Page Seiten Daten nach, erfolgt dies für gewöhnlich per AJAX. Suchmaschinen können der Datenverarbeitung nicht folgen. Ein grundsätzlicher Verzicht auf Single-Page Webseiten kommt sicher nicht in Betracht. Daher ist für die Suchmaschinenoptimierung eine Lösung gefragt, die die Daten auch den Crawlern präsentiert. Hashbangs sind dabei eine populäre Lösung.

Warum Suchmaschinen ein Problem mit AJAX-Webpages haben

AJAX manipuliert das DOM von Webseiten. Daten werden im Hintergrund nachgeladen und neue Inhalte dynamisch im aktuellen Dokument integriert. Bei Bedarf lässt sich praktisch der komplette Inhalt der HTML-Page austauschen. Für Suchmaschinen ist genau dies ein Problem. Das klassische Crawling kann mit solchen Seiten nicht umgehen. Ganz unterschiedliche Inhalte können nur einer URL zugeordnet werden. Die Klick- bzw. Interaktionspfade, die unterschiedliche Daten auf den Bildschirm befördern, können Suchmaschinen nicht in den Suchergebnisseiten abbilden. Den Ausweg bieten Löungen wie Hashbangs, die Inhalte auch für Suchmaschinen auffindbar machen.

Was ist ein Hashbang?

Als Hashbang wird die Kombination #! bezeichnet. Diese ist ein Kunstgriff: Während der Programmablauf auf dem Server von dem Anker in der URL unberührt bleibt, kann diese client-seitig ausgelesen werden. Inhalte auf AJAX-Webseiten werden so auch für Suchmaschinen wie Google lesbar. Nach dem Hashbang wird eine Alternativ-URL zu einer statischen Unterseite angegeben, die der aktuellen AJAX-Darstellung entspricht. Diese Unterseite ist dann für die Suchmaschinenbots crawlbar.

Aufgabe der Entwickler ist es, die Web-App so zu implementieren, dass Alternativ-URLs in den Hashbang codiert werden. Zudem muss die Webanwendung unter der Alternativ-URL eine entsprechende statische Darstellung der Unterseite bzw. des Anwendungszustandes liefern.

So funktioniert der Hashbang

Ein Beispiel für eine Hashbang-URL: http://example.com/eineseite.html#!anwendungsstart

Die Raute in der URL ist formal gesehen ein Verweis auf einen Anchor. Anchors werden auf Webseiten für seiteninterne Links verwendet. Paradebeispiel für die Nutzung dieser Verzeichnisse ist die Wikipedia. Das Inhaltsverzeichnis der Artikel ist über solche internen Verweise realisiert. Ein Klick auf den Link führt nicht zum Abrufen einer neuen Seite, sondern zum seiteninternen Sprung zur Anchor-Marke. Die URL in der Adresszeile im Browser wird dabei verändert. Genau diese Eigenschaft nutzen Hashbangs. Die Unterscheidung zwischen Hashbang und Anchor ist dabei durch die für Anchors nicht übliche Kombination von Bezeichnern und dem ! möglich.

HTML Snapshot liefert den Content für die Suchmaschinencrawler

Der eigentliche Hashbang ist nur ein Teil des Ganzen. Damit dieses Verfahren funktioniert, wird ein HTML-Abbild der App benötigt. Dafür kommen in der Praxis zahlreiche unterschiedliche Verfahren zum Einsatz. Ein Weg ist dabei die Legacy-Methode. Bei dieser werden statische Seiten als Crawler-Replacement für die dynamische Single-Page Version erstellt. Geeignet ist diese Lösung allerdings nur, wenn die Content-Menge überschaubar ist und nur selten geändert wird. Auch müssen bei jedem Update die statischen Seiten ebenfalls aktualisiert werden. Das lässt Raum für Versäumnisse und Fehler. Häufiger ist der Einsatz serverseitiger Lösungen via Skriptsprachen. Setzt eine Single-Page App auf client-seitige Erzeugung des Contents, sind Browser-Emulatoren die Lösung. HTML Unit ist ein solches Beispiel. Weitere Informationen zum Erstellen von HTML Snapshots liefert auch noch Google Developers.

Alternativen für Hashbangs

Taufrisch sind Hashbangs nicht mehr. Die modernere Lösung ist die PushState API. Hier wird die URL im Browser per JavaScript abgeändert. Zudem werden Back- und Forward-Button unterstützt. Doch die PushState / History API wird nicht von allen alten Browsern unterstützt. Praktisch optimal lösen gute JavaScript Frameworks dieses Dilemma. Sie unterstützen die PushState API und haben gleichzeitig für alte Browser Hashbangs als Fallback-Lösung implementiert.