One Pager SEO Blueprint

Für SEO entstehen dadurch folgende Probleme:

• Eine URL muss für alle Themen Keywords ranken
• Keyword Targeting mit dem Title Tag ist praktisch unmöglich, da sich alle Bereiche einen einzigen Title Tag teilen
• User, die über ein Suchresultat auf die Seite gelangen, landen stets am Anfang der Seite, anstatt auf dem relevanten Bereich, der möglicherweise in der Mitte der Seite zu finden ist
• Links und Social Shares führen stets zum Anfang der Seite und nicht zum relevanten Abschnitt der Seite

Auch Matt Cutts sieht potentielle Probleme mit dem One Pager Modell:

Um diese Probleme zu lösen, sollte jeder Abschnitt des Onepagers auf einer eigenen URL zu finden sein. Für den User muss der gesamte Inhalt weiterhin auf einer einzelnen Seite präsentiert werden, während Suchmaschinen SEO optimierte Landingpages inklusive Title Tags vorfinden, die dann für die Ziel Keywords ranken können.

AJAX + HTML5 History API = Best Friends Forever

Um das Problem mit den URLs zu lösen, erstellen wir zunächst eine gewöhnliche Seite mit Landingpages, Title Tags und Navigation. Der Content der einzelnen Seiten wird dann via AJAX in einen Onepager zusammengeführt. Mit Hilfe der – seit HTML5 verfügbaren – Browser History API, können wir beim Scrollen den Status der Adresszeile verändern, so dass Shares und Links immer auf die relevante Sektion zeigen. Anschließend brauchen wir nur noch eine Funktion, die den User zur relevanten Sektion der Seite scrollt abhängig von der URL über die ein User auf die Seite gelangt.

Ein großer Vorteil dieser Lösung ist, dass jedes beliebige CMS dazu verwendet werden kann. Zusätzlich werden Sektionen als getrennte Seiten behandelt, was das Content Management erheblich erleichtert.

Der Ajax Script

Um die einzelnen Unterseiten in einen Onepager zusammenzufügen, können wir Ajax verwenden. Dazu ist es am besten, die Navigation der statischen Seite zu “ajaxifizieren”. Das Script sollte durch jeden Menüpunkt in der Navigation iterieren und den Content auf der URL entnehmen, um ihn auf der aktuellen Seite zu inkludieren. Dadurch bleibt die Seite wartbar und es können neue Seiten hinzugefügt werden, ohne das Script anpassen zu müssen. Jede Unterseite wird dann clientseitig als Sektion in den Onepager eingefügt.

Beachten:

• Die Reihenfolge der Sektionen sollte der Reihenfolge der Links in der Navigation entsprechen
• Nur der Content Teil der Seiten sollte inkludiert werden, nicht Navigation, Footer oder andere Template Elemente (auch nicht die HEAD Section)
• Das Script sollte auf jeder Seite laufen
• Die URLs sollten auch in der Sitemap wiedergegeben werden

Der History API Script

Der History API Script erfüllt zwei Funktionen:

1. User die auf die Seite landen werden zur relevanten Sektion gescrollt
2. Wenn ein User zur einer Sektion scrollt, wird ein neuer Eintrag in die Browserhistory eingetragen und die Adresszeile zeigt die URL der aktuellen Sektion an. Der Backbutton sollte dann den User zur vorherigen Sektion scrollen.

So sollte das ganze funktionieren:

Die Scrollposition ist auf 0. Der User befindet sich auf der ersten Sektion, entsprechend wird in der Adressleiste des Browsers seite1.html angezeigt:

Wenn der User zur zweiten Sektion scrollt ändert sich auch die URL in der Adresszeile:

Beachten:

• Der History Stack des Browsers muss durch einen speziellen Skript gemanaged werden um unvorhergesehenes Verhalten bei Back Button Navigation zu vermeiden. Das Anklicken des Back Buttons sollte nicht in einen neuen Eintrag in die History resultieren.
• Ein User, der über eine bestimmte URL auf die Seite gelangt, sollte zur jeweiligen Sektion hingescrollt werden.
• Die URLs sollten nicht mit Hashtags umgesetzt werden, da Google diese ignoriert (wofür brauchen wir sonst die history api?!)

Die Navigation

Sowohl für Google als auch für die Ajaxifizierung ist eine statische Navigation, die unsere optimierten Unterseiten verlinkt, wichtig. Je nach Design könnte die Navigation allerdings nicht erwünscht sein.

Wenn die Navigation nicht erwünscht ist

Wenn die Navigation nicht erwünscht ist, sollte diese durch Javascript aus dem DOM entfernt werden, jedoch weiterhin im Quellcode verfügbar sein. Verstecken mit CSS wäre auch eine Option, die meiner Meinung nach allerdings riskanter wäre, da Google dieses Vorgehen als manipulativ einstufen könnte.

Wenn die Navigation erwünscht ist

Falls die Navigation vorhanden bleiben soll, muss das Default-Verhalten der Links ausgehebelt werden. Wenn ein User einen Link anklickt, sollte keine neue Seite geladen werden, sondern stattdessen zu der jeweiligen Position der Ziel Sektion gescrollt werden.

Beachten:

• Links in der Navigation sollten wie alle gewöhnlichen Links implementiert werden
• Die Sektionen sollten eigene “normale” URLs haben (keine Hashtags)
• Links sollten am besten den vollen Pfad enthalten

Alternative Anwendungen

Diese Methode eignet sich auch hervorragend für andere moderne User Interfaces, die aus SEO Sicht problematisch sein können:

• Tabs
• Accordions
• Webapps
• Lightboxes
• Lazyloading
• Infinite Scrolling