SEO für eine One-Page-Website

von Nicole Treipl
04.12.2018
One Pager Blog Post Header

Kleinere Webseiten werden heute oft als One-Page-Website umgesetzt. Das heisst alle Inhalte finden auf einer Seite Platz. Beim Navigieren zwischen den einzelnen Abschnitten des One Pagers findet nie ein Neuladen einer Seite statt, was für eine angenehme Nutzererfahrung sorgt. Die Navigation findet durch Scrollen zwischen den einzelnen Abschnitten oder Klicken auf Tabs statt, um weiterführende Inhalte sichtbar zu machen. One-Page-Design ist modern und kann die Übersichtlichkeit einer Seite erhöhen. In jedem Fall liegen One Pager weiterhin im Trend. Oft werden beim Entwickeln dieser Seiten jedoch wichtige SEO-Anforderungen ausser Acht gelassen.

Die folgenden Ausführungen gelten im Grundsatz auch für grosse Single Page Applications. Letztere sind Webseiten, die technisch gesehen ebenfalls nur aus einer Seite bestehen und zudem dem Client (Webbrowser) die Aufgabe geben, das Grundgerüst der Seite jeweils selbst zu erstellen (clientseitiges Rendering). Weil im Fall von SPAs aber noch weitere Spezialprobleme hinzukommen, konzentrieren wir uns hier auf einfache One Pager.

Das SEO-Problem von One Pagern

Im Kern liegt das SEO-Problem von One Pagern darin, dass Suchmaschinen wie Google Resultate belohnen, die spezifisch auf die Beantwortung der jeweiligen Suchanfrage gerichtet sind. One Pager enthalten aber oft eine Reihe von unterschiedlichen Inhalten. Selbst wenn ein One Pager sehr gute Inhalte für eine Suchanfrage “X” anbietet, wird er einfach darum Schwierigkeiten haben, gute Rankings zu “X” aufzubauen, weil gleichzeitig auch weitere völlig unterschiedliche Suchanfragen beantwortet werden. Grundsätzlich sollte aus SEO-Sicht jede Seite auf die Beantwortung einer spezifischen Gruppe von Suchanfragen ausgerichtet sein. Diese Bedingung wird von One Pagern oft nicht erfüllt.

Update Oktober 2020: Google hat vor kurzem angekündigt, dass sie eine neue «Passage Ranking»-Methode (siehe dazu seroundtable.com) in den Rankingalgorithmus integrieren werden. Damit soll es weniger wichtig werden, dass der inhaltliche Fokus der Seite insgesamt auf die Suchanfrage gerichtet ist, sondern es wird stärker isoliert auf den inhaltlichen Fokus einzelner Passagen geachtet. Das oben beschriebene Problem soll also entschärft werden. Wie gross der Einfluss dieser neuen Änderung ist, bleibt aber noch abzuwarten. 

Oft wird empfohlen, dieses Problem zu entschärfen, indem man die Seite für Suchmaschinen sehr gut strukturiert, indem man beispielsweise für jeden Abschnitt einen eigenen H1-Tag verwendet. Damit soll den Suchmaschinen signalisiert werden, dass es sich um inhaltlich eigenständige Abschnitte handelt. Das schwächt zwar das obige Problem ab, aber eine echte Lösung ist damit nicht gefunden. Zum Glück gibt es eine einfach umzusetzende Möglichkeit, One Pager fit für Suchmaschinen zu machen.

Die Lösung – Separate URLs und AJAX

Die im Folgenden beschriebene Lösung ist nicht neu. Sie wurde in Grundzügen bereits 2014 in einem Blogpost von Google beschrieben. Allerdings wurde der Lösungsvorschlag, gerade auch in der SEO-Szene, kaum beachtet. Vorherrschend blieb weiterhin die Meinung, dass One-Page-Webseiten natürliche Rankingnachteile mit sich bringen.

Was also ist zu tun? Die einzelnen, thematisch getrennten Bereiche eines One Pagers sollten, um das obige Problem zu lösen, separat indexiert werden. Dies kann und muss man damit erreichen, dass sie unter unterschiedlichen URLs erreichbar sind. Suchmaschinen erlauben nicht zwei Indexeinträge mit derselben URL. Zu beachten: Es darf nicht mit Sprungmarken-URLs (URLs mit “#”) gearbeitet werden, weil Suchmaschinen nur Dokumente an sich und nicht einfach einzelne Browserzustände indexieren.

Separate URLs für die einzelnen Abschnitte bedingen, dass der Server für jeden Abschnitt des One Pagers eine separate HTML-Datei sendet. Der One Pager besteht dann nur noch oberflächlich aus bloss einer Seite, aber auf die Nutzererfahrung hat dies keinen Einfluss, wenn sichergestellt wird, dass alle Abschnitte über jede dieser URLs erreichbar sind. Diese Bedingung könnte man natürlich einfach erfüllen, indem man Kopien des One Pagers unter unterschiedlichen URLs speichert. Das würde jedoch das oben beschriebene SEO-Problem nicht lösen.

Um dieses Problem zu lösen, muss sichergestellt werden, dass die Suchmaschinen nur die Inhalte sehen, die zum Abschnitt der zugewiesenen URL gehören. Man stellt also für jeden Abschnitt eine HTML-Datei zur Verfügung, die nur die Inhalte dieses Abschnitts enthält und sorgt dafür, dass die weiteren Inhalte per AJAX erst dann geladen werden, wenn der Nutzer weiter scrollt. Da Crawler nicht scrollen können (vgl. diesen Artikel von Search Engine Roundtable), können sie, im Gegensatz zum normalen Nutzer, unter einer bestimmten URL des One Pagers nur die Inhalte des jeweiligen Abschnitts erreichen.

Zur Illustration haben wir einen One Pager erstellt, der diese Anforderungen erfüllt: rankingcheck.ch/seo-fuer-one-pager

Wie erwartet, hat Google bereits nach einem Tag für jeden Abschnitt einen separaten Indexeintrag erstellt:

Links

Damit die Suchmaschinen die einzelnen URLs des One Pagers erreichen, müssen sie natürlich verlinkt werden. Idealerweise erfolgt dies auf dem One Pager selbst. Wenn die spezifische Nutzererfahrung auf einem One Pager konsequent gesichert werden soll, ergibt es natürlich kaum Sinn, die URLs in einer normalen, für die Nutzer erreichbaren, Navigation zu verlinken. Denn bei einem Klick auf normale HTML-Links wird eine HTTP-Anfrage ausgelöst und die Seite neu geladen. Stattdessen sollte man die Links nur sichtbar bzw. klickbar machen, wenn JavaScript deaktiviert ist. Beispiele: 1. Auf der Seite der swiss international advisory group rufen Klicks auf die Menüpunkte (in der Navigation links) nur eine neue Seite auf, wenn JavaScript deaktiviert ist. 2. Im Beispiel des jQuery-Plugins Infinite AJAX Scrolling werden die entsprechenden Links sogar erst sichtbar, wenn JavaScript deaktiviert wird.

Damit wird nebenbei sichergestellt, dass alle Abschnitte auch für Nutzer erreichbar sind, die JavaScript standardmässig deaktiviert haben.

Wichtig ist zu beachten, dass die Links auf die einzelnen Abschnitte von jedem Startpunkt aus, d. h. von jedem Abschnitt aus für die Crawler erreichbar sind.

Manipulation der Browser History

Um die Nutzererfahrung zu verbessern, sollte man dafür sorgen, dass sich die im Browser angezeigte URL beim Scrollen von Abschnitt zu Abschnitt ändert. Damit kennen Nutzer jederzeit die URL unter welcher die einzelnen Abschnitte erreichbar sind und können sie direkt verlinken. Da die im Browser angezeigte URL normalerweise nur geändert wird, wenn eine Seite geladen wird, muss zu einem Trick gegriffen werden: Die Manipulation der Browser History. Möglich wurde dies mit HTML5, siehe dazu den Leitfaden von Mozilla. Mit der JavaScript-Funktion replaceState() kann die aktuell im Browser angezeigte URL verändert werden, ohne eine neue Seite zu laden, d. h. ohne eine neue Serveranfrage auszuführen. Wir haben diese Funktion auch auf der oben verlinkten Beispielseite implementiert.

Können wir Sie bei der der Erstellung oder Optimierung Ihres eigenen One Pagers unterstützen? Zögern Sie nicht, uns zu kontaktieren.

Neuste Blog Artikel zu diesem Thema

Umsteigen auf HTTP/3? Wir klären auf!
SEO, Technical SEO, Web Analytics, Web Design & Development
Umsteigen auf HTTP/3? Wir klären auf!
Bei den Core Web Vitals dreht sich alles um Page Experience. Besonders oft werden Webseiten mit dem LCP (Largest Contentful Pai...
17.07.2022
Die 6 besten Tipps im Umgang mit schlechten Bewertungen auf Google, Tripadvisor & co.
Online Reputation Management, SEO
Die 6 besten Tipps im Umgang mit schlechten Bew...
Gestern rauschten auf Google, Tripadvisor und Kununu gerade noch Lobeshymnen über Ihre kompetenten Mitarbeitenden und das Wahns...
24.06.2022
Core Web Vitals in der Schweiz – Es wird höchste Zeit diese Rankingfaktoren zu kennen
SEO
Core Web Vitals in der Schweiz – Es wird ...
Im Juni 2021 rollt Google das “Page Experience” Update aus und beginnt in diesem Zusammenhang, die sogenannten Core W...
27.04.2021
Mobile-First wird zu Mobile-Only-Indexing
SEO, Technical SEO
Mobile-First wird zu Mobile-Only-Indexing
Mobile-optimierte Websites werden immer wichtiger: Im Frühling 2021 wird der "Mobile-Only-Indexing" von Google eingeführt. Rein...
26.02.2021
SEO für Restaurants in der Coronakrise (und darüber hinaus)
Local SEO, SEO
SEO für Restaurants in der Coronakrise (und dar...
Gastronomiebetriebe dürfen in der Schweiz aktuell nur noch einen Take-Away-Service bzw. einen Lieferservice anbieten. Viele Res...
01.04.2020
Tools für den SEO-Check
SEO, SEO Audit
Tools für den SEO-Check
Ahrefs, Search Metrics, Ubersuggest und Seerobots – die Masse an SEO-Tools hat sich zu einem buschigen Technik-Urwald verdichte...
28.10.2019
JavaScript-SEO: Folgt Google JavaScript-Links?
SEO, Technical SEO
JavaScript-SEO: Folgt Google JavaScript-Links?
Die Verwendung von JavaScript zur Darstellung von Inhalten war im Zusammenhang mit SEO lange problematisch. Früher konnten Such...
22.10.2019
Keyword-Analyse: Von Suchvolumen, Suchabsicht und dem Potential der Clusterung
SEO
Keyword-Analyse: Von Suchvolumen, Suchabsicht u...
Suchmaschinen sind längst über das Niveau von Keywords hinaus: Keyword-Stuffing von immer dem gleichen Keyword ist heute schädl...
26.09.2019
6 Digital Marketing Tipps zu Suchmaschinen-Optimierung SEO
SEO
6 Digital Marketing Tipps zu Suchmaschinen-Opti...
Die ganze Arbeit, die Sie in Ihre Website stecken, nützt nichts, wenn Ihre Website in den Suchmaschinen nicht gefunden wird. Hi...
29.01.2019
SEO für eine One-Page-Website
SEO, Technical SEO
SEO für eine One-Page-Website
Kleinere Webseiten werden heute oft als One-Page-Website umgesetzt. Das heisst alle Inhalte finden auf einer Seite Platz. Beim ...
04.12.2018