Infinite Scrolling

Der Begriff „Infinite Scrolling“ (Deutsch: „unendliches Scrollen“) bezeichnet ein scheinbar unendliches Scrollen.

Dabei werden weitere Inhalte am Ende der Seite automatisch nachgeladen, sobald der Anwender zum Seitenende gescrolled hat oder dort auf einen „mehr laden“ Button klickt.

Die klassische Alternative von Infinite Scrolling ist die soggenannte. „Pagination“.

Beispiele für Websites auf denen Infinite Scrolling verwendet wird, sind unter anderem Twitter oder Facebook aber auch viele Online-Shops gehen dazu über die Anzahl der Artikel per Infinite Scrolling anzuzeigen.

Was sollte man beachten?

Möglicherweise kann Infinite Scrolling zu Problemen führen, da der Footer nicht, bzw. nur sehr schwer zu erreichen ist. Sollten also Links, wie z. B. das Impressum im Footerbereich untergebracht sein, sollte man auf Infinite Scrolling verzichten oder aber statisch fixierte Header und Footer verwenden.

Außerdem sollten Seitenbetreiber eine Funktion einfügen, die sich die letzte Position des Users merkt, bevor das Infinite Scrolling beginnt. History.pushState hilft dabei: history.pushState(stateObject, title, URL); window.onpopstate = function(event) {window.location = window.location; }.

Achtet darauf, dass Google alle eure Inhalte auch indexieren kann. Idealerweise stellt man für Suchmaschinen alternativ auch eine paginierte Version der Seite bereit. Wichtig ist zudem auch, dass alle Inhalte auf eurer Seite einzeln verlinkt werden können. Der Googlebot ist jedoch so programmiert, dass er lediglich den Content indexiert, der im sichtbaren Bereich (also ohne Scrolling) des Browsers angezeigt wird. Damit die Inhalte von Google vollständig indexiert werden können nutzt man Interlinking. Damit erlaubst du Google, deine komplette Seite crawlen zu dürfen. So kannst du sicherstellen, dass Suchmaschinen wie Google alle Inhalte der jeweiligen Seite vollständig indexieren können.

Die Seite alternativ als „Pagination“ Version bereit zu stellen macht übrigens nicht nur aus SEO Sicht Sinn sondern auch aus Usability Sicht. Denn nur so können Nutzer, die JavaScript Display in ihrem Web Browser ausgeschaltet haben, sich die Seite überhaupt vollständig anzeigen lassen.

Als nächsten Schritt solltest du für jede Unterseite dringend eine eigene URL (beispielsweise site.com/page/A, site.com/page/B, et cetera) sowie eine einzigartige Unterschrift (website – Page A, website – Page B, et cetera) einfügen. Dies erleichtet die Arbeit der Suchmaschinen und auch die User haben die Möglichkeit, die einzelnen Unterseiten direkt zu verlinken. Zudem sollte eure Pagination immer einen „Zurück“- und „Nächste“-Button besitzen.

Wichtig: Um „Duplicate Content“ zu vermeiden solltest Du im System die REL und CANONICAL Meta Tags nutzen.

 

Implementierung vom Infinite Scrolling

Achtet bei der Implementierung darauf, dass ihr es stufenweise implementiert. Für eine „progressively improving“ muss das „Infinite Scroll“ die notwendigen JavaScript-Elemente laden. So funktionierts:

  1. Der Nutzer ruft eine Seite auf und erreicht den Content der Seite.
  2. Wenn das Limit beim Scrollen des Contents erreicht ist, fängt eine JavaScript-Funktion an zu laufen und fordert neuen Content vom Server an.
  3. Wenn der Server mit neuem Inhalt antwortet, dann formt eine andere JavaScript-Funktion die Daten in eine HTML-Page zusammen.
  4. Wenn dann noch mehr Inhalt zum Download bereit steht, antwortet der Server mit einem 404 error, der jedoch dem User nicht angezeigt wird. Vielmehr wird ihm eine Nachricht zugespielt, dass der Inhalt ausgelastet ist. Dieses Feature gilt für das Auf- und Abscrollen.