Zurück zur Übersicht

One Page Layouts: automatisches Scrollen für Inhalte, die nicht „Above the fold“ liegen

In diesem Artikel möchte ich eine Technik vorstellen, mit der man den sichtbaren Bereich des Browserfensters automatisch zentrieren oder scrollen kann – auch, wenn ein Besucher über eine Suchmaschine kommt. Dies kann zum Beispiel bei One Page Layouts nützlich sein, wenn nach einem bestimmten Begriff gesucht wird, dieser sich aber nicht „Above the fold“ befindet.

Beispielszenario: eine Gastronomiewebseite wurde im One Page Layout entworfen. Above the fold, d.h. im unmittelbar sichtbaren Bereich der Webseite, ist die Navigation, das Logo sowie einige Begrüßungsworte angebracht. Um das Tagesmenü zu sehen, muss die Navigation verwendet oder in den entsprechenden Bereich hinabgescrollt werden.

Wenn nun aber ein möglicher Gast per Google nach „Restaurant XY Tagesmenü“ sucht und anschließend über die Suchergebnisse auf die Webseite gelangt, wird ihm wiederum nur der Inhalt Above the fold angezeigt. Obwohl er nach dem Tagesmenü gesucht hatte, muss er nun entweder die Navigation oder die Scrollbalken bemühen. Das ist schlecht. Ein Besucher will, dass die Inhalte, die er angezeigt bekommt, im Zusammenhang stehen mit seinen Suchbegriffen, sonst kann es sein, dass er die Webseite nach nur wenigen Augenblicken wieder verläßt.

Um das Browserfenster auf den relevanten Bereich zu zentrieren, wäre ein Hash (#) in der URL nötig. Das Problem ist, dass keine Suchmaschine die Hashs mitindiziert.

Lösungsansatz: Anstatt eines Hashs verwenden wir einen Endpoint. Den Endpoint übergeben wir als Javascript-Variable an die Funktion, welche den Bildschirm nach dem Laden der Seite automatisch zentriert.

 

1. Endpoint registrieren

Wir registrieren für die Permalinkstruktur unserer Webseite einen Endpoint mit Hilfe der Endpoint API.

2. Endpoint als Javascript-Variable übergeben

Mit Hilfe der Funktion wp_localize_script() kann man PHP-Variablen an Javascript übergeben. Folgendermaßen kann das aussehen:

Das Javascript-Objekt mytheme_vars hat nun die Eigenschaft viewport, welche den Wert aus unserem Endpoint enthält. Diesen können wir auslesen und wie einen Hash an die Scroll-Funktion übergeben.

3. Bereich automatisch scrollen

In der Datei mytheme.js können wir folgende Funktion notieren:

Ein Live-Beispiel folgt in Kürze.

Mögliche Probleme: Die Endpoint-Struktur erzeugt eine Reihe von neuen URLs, welche jedoch keine eigenen Inhalte abbilden. Dies führt zu doppelten Inhalten, was wiederum bei Google & Co. problematisch sein kann. Abhilfe schafft hier z.B. der Canonical-Tag. Im <head> unserer Seite notieren wir:

Das war’s! Unsere Webseite scrollt nun, wenn jemand über eine Suchmaschine und die entsprechende URL kommt, automatisch zum relevanten Bereich.

 

 

Schreibe einen Kommentar