von Siegfried Stepke
Ein One Pager - oft auch als Squeeze Page, Long Page, Single Page oder Standalone Landingpage bezeichnet - ist ein Designformat, bei dem alle Informationen einer Webseite auf einer einzelnen Seite zu finden sind. Der User navigiert durch Scrollen anstelle von Klicken.
Die Methoden und Kanäle im Datadriven Marketing entickeln sich rasant. Wir bleiben stets up to date und teilen unsere Erkenntnisse und Empfehlungen in Form von Blogartikeln, e-Books, Whitepapers oder Webinaren. Praktische Tipps & Tricks, die Ihnen helfen, Ihre Marketingaktivitäten zu optimieren.
Mehr ErfahrenFür SEO entstehen dadurch folgende Probleme:
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.
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.
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.
Der History API Script erfüllt zwei Funktionen:
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:
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, 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.
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.
Diese Methode eignet sich auch hervorragend für andere moderne User Interfaces, die aus SEO Sicht problematisch sein können:
Wir freuen uns auf Ihre Anfrage und beraten Sie gerne unverbindlich! Füllen Sie dazu einfach das Kontaktformular aus oder rufen uns direkt an.
Jetzt kontaktierenNewsletter
Holen Sie sich unsere Online Marketing-Insights und Trends direkt in Ihr Postfach!