Pagination: Unterschied zwischen den Versionen

Aktuelle Version vom 23. Januar 2024, 16:30 Uhr

Definition

Der Begriff Pagination kann mit “Seitennummerierung” ins Deutsche übersetzt werden und kommt zur Anwendung, wenn auf Websites Inhalte auf mehrere Seiten aufgeteilt werden, beispielsweise bei langen Auflistungen von Produkten in einem Online-Shop.

Anwendungsszenarien

Eine Pagination kann zum Beispiel bei langen Nachrichten- oder Blog-Artikeln notwendig sein, wenn der Inhalt zu umfangreich ist und deshalb auf mehrere Seiten aufgeteilt werden muss.

Außerdem stellen, wie oben bereits erwähnt, Produktauflistungen in Online-Shops einen beliebten Anwendungsbereich für eine Pagination dar. Dabei werden beispielsweise nur 25 Produkte einer Kategorie pro Seite angezeigt, da die Website ansonsten zu unübersichtlich und schwer navigierbar wird. Aus diesem Grund ist eine Pagination für sehr große Online-Shops häufig unverzichtbar.

Weiterhin werden Seitennummerierungen häufig in Foren mit sehr langen Threads oder in Kommentarbereichen von Websites eingesetzt.

Außerdem empfiehlt sich die Nutzung der Pagination bei langen Bilderstrecken in Online-Magazinen, bei denen häufig jedes Bild auf einer eigenen Seite dargestellt wird.

Vorteile

Die Verwendung einer Pagination kann sich aus vielen Gründen lohnen. Der wohl wichtigste Aspekt liegt hierbei in der Erhöhung der Übersichtlichkeit und Benutzerfreundlichkeit durch das Aufteilen von sehr umfangreichen Inhalten auf mehrere Seiten. Beispielsweise können sich User schnell überfordert fühlen, wenn alle 150 Produkte einer bestimmten Kategorie in einem Online-Shop auf einer Seite angezeigt werden, bei der der User sehr lange scrollen muss, um alle Produkte zu sehen. Werden stattdessen nur 20 Produkte pro Seite angezeigt, wirkt dies übersichtlicher und der User kann zudem bequem zwischen den einzelnen Teilseiten hin und her navigieren.

Die Reduzierung der Inhalte, die auf einer einzelnen Seite angezeigt werden, führt außerdem zu einer Reduktion der Ladezeit, da der komplette Inhalt der Auflistung nicht auf einmal geladen werden muss. Dies führt ebenfalls zu einer Verbesserung der Usability und wirkt sich positiv auf die Suchmaschinenoptimierung (SEO) aus.

Weiterhin entsteht insbesondere für Webmaster, die auf ihrer Website Werbung von Dritten einblenden, der Vorteil, dass sich mehr Page Impressions pro User sowie mehr Möglichkeiten für Werbeeinblendungen ergeben. Wird beispielsweise ein redaktioneller Artikel auf drei Seiten aufgeteilt, kann auf jeder dieser Seiten Werbung angezeigt werden (statt nur auf einer).

SEO-freundliche Pagination

Paginierungen tragen zwar aus Sicht der Nutzer zu mehr Übersichtlichkeit bei, allerdings können sich hinsichtlich der Suchmaschinenoptimierung auch Probleme ergeben. Dies lässt sich damit begründen, dass bei einer Pagination zusammengehöriger Content auf mehrere Seiten aufgeteilt wird, die alle einzeln indexiert werden. Infolgedessen weiß Google nicht, welche Seite für eine bestimmte Suchanfrage relevanter ist (da sich alle Teilseiten auf dasselbe Thema beziehen) und zeigt dem User deshalb in den Suchergebnissen möglicherweise nicht die Seite an, die am hilfreichsten für ihn wäre. Darüber hinaus führt die unabhängige Indexierung der Teilseiten dazu, dass die einzelnen Seiten miteinander konkurrieren, wodurch das Ranking jeder einzelnen Seite beeinträchtigt wird, da sich die Link Power entsprechend aufteilt.

Um diesen Problemen zu begegnen, gibt es zwei Konfigurationsmöglichkeiten für eine SEO-freundliche Pagination, nämlich die Erstellung einer View-All-Seite oder die Nutzung der Attribute rel=”next” und rel=”prev”.

View-All-Seite

Abbildung: View-All-Seite - Autor: Seobility - Lizenz: CC BY-SA 4.0

Bei Anwendung der ersten Variante wird eine View-All-Seite genutzt, die den gesamten aufgeteilten Inhalt auf einer Seite bündelt und von Google zur Indexierung herangezogen werden soll. Im obigen Online-Shop-Beispiel würden also alle Produkte einer Kategorie zusätzlich auf einer einzelnen Seite zusammengefasst werden. In den Suchergebnissen werden solche Übersichtsseiten von Usern bevorzugt, da sie alle Informationen, nach denen der User sucht, auf einer Seite vereinen und deshalb nicht mehrere Seiten geladen werden müssen.

Wie Maile Ohye in einem Google Webmaster Video beschreibt, erkennt Google solche View-All-Seiten und zieht sie automatisch zur Indexierung heran, wobei die Link Power aller Einzelseiten auf die Übersichtsseite gebündelt wird. Wer trotzdem auf Nummer sicher gehen will, kann einen Canonical Tag auf die Teilseiten setzen, der Google zusätzlich auf die Übersichtsseite hinweist:

“If you have a view-all page available, Google will automatically try to detect that, send searchers there as well as consolidate your indexing properties. [...].The second option is to actually use rel=”canonical” to explicitly hint to Google what is your view-all page.” (Maile Ohye, Developer Programs Tech Lead)

Dieser Link kann zum Beispiel folgendermaßen aussehen:

<link rel=”canonical” href=”http://www.example.com/page/view-all/”>

Wenn Webmaster sich für eine View-All-Seite entscheiden, ist es jedoch wichtig, darauf zu achten, dass die Ladezeit dieser Übersichtsseite nicht zu lang ist. Dabei sollte ein Richtwert von etwa 4 Sekunden nicht überschritten werden. Zudem muss die Seite für den User immer noch einfach zu navigieren sein, um die Usability nicht einzuschränken. Da es jedoch insbesondere bei sehr großen Websites nicht immer möglich (oder gewünscht) ist, eine View-All-Seite zu erstellen, die diesen Anforderungen gerecht wird, gibt es eine zweite Alternative für die Konfiguration einer Pagination, nämlich die Verwendung der Attribute rel=”next” und rel=”prev”.

rel=”next”/”prev”

Abbildung: rel="next"/"prev" - Autor: Seobility - Lizenz: CC BY-SA 4.0

Durch das Einfügen der Attribute rel=”next” und rel=”prev” im Head-Bereich einer Webseite signalisiert man Google die Zusammengehörigkeit einzelner Seiten. Die Attribute zeigen den jeweiligen Vorgänger (rel=”prev”) und Nachfolger (rel=”next”) einer Seite an.

Nachfolgendes Beispiel soll die richtige Verwendung der Attribute verdeutlichen: Angenommen, eine Website verwendet eine Pagination bestehend aus drei Einzelseiten mit den folgenden URLs:

Seite 1: http://www.example.com/page1.html

Seite 2: http://www.example.com/page2.html

Seite 3: http://www.example.com/page3.html

Da Seite 1 keinen Vorgänger, sondern nur einen Nachfolger besitzt, wird im Head-Bereich nur das rel=”next” Attribut verwendet:

<link rel=”next” href=”http://www.example.com/page2.html”>

Auf Seite 2 hingegen sind beide Attribute erforderlich:

<link rel=”prev” href=”http://www.example.com/page1.html”>

<link rel=”next” href=”http://www.example.com/page3.html”>

Auf der letzten Seite ist dann wiederum nur ein rel=”prev” Attribut nötig:

<link rel=”prev” href=”http://www.example.com/page2.html”>

Bei korrekter Umsetzung dieser Anmerkungen behandelt Google die einzelnen Seiten als Einheit und bündelt deren Relevanz. In der Regel wird dann die erste Seite in den Suchergebnissen angezeigt, da diese meist am relevantesten für die Nutzer ist. Die Nutzung der Attribute empfiehlt sich auch, wenn zwar eine View-All-Seite vorhanden ist, aber der Webmaster möchte, dass stattdessen eine Teilseite indexiert und in den Suchergebnissen angezeigt wird.

Bei Anwendung dieser Alternative ist zu beachten, dass Parameter wie Session-IDs, die den Inhalt der Seite nicht verändern, auch in den rel=”next”/”prev” Attributen enthalten sein sollten.

Ein Canonical Link auf die erste Seite der Pagination darf in diesem Fall nicht verwendet werden, da dieser nur für Duplicate Content bestimmt ist und der Inhalt von Teilseite 2 nicht dem Inhalt von Teilseite 1 entspricht.

Weiterhin ist zu beachten, dass die Attribute nur einen Hinweis an Google darstellen und deren Berücksichtigung für die Suchmaschine nicht verpflichtend ist.

Weitere Aspekte im Hinblick auf die Pagination

Auch wenn in den obigen Ausführungen der Canonical Link für View-All-Seiten empfohlen wurde und die rel=”next”/”prev” Attribute als alternative Konfigurationsmöglichkeit beschrieben wurden, sollten Webmaster beachten, dass es sich hierbei um voneinander unabhängige Ansätze handelt und deshalb beide Anmerkungen gleichzeitig auf einer Seite vorhanden sein können. Konkret bedeutet das, dass zusätzlich zu den rel=”next”/”prev” Links auch ein Canonical Link vorhanden sein kann, mit dem die Seite auf sich selbst verweist.

Eine häufige Vorgehensweise, die allerdings nur bedingt zu empfehlen ist, ist die Verwendung von “noindex, follow” im Robots Meta Tag, um die Indexierung der Seiten 2 bis n einer Pagination zu verhindern. Dies ist deshalb problematisch, da Google den Links auf noindex Seiten ab einem gewissen Zeitraum nicht mehr folgt. Somit können beispielsweise bei Online-Shops wichtige interne Links für einzelne Produkte verloren gehen. Darüber hinaus ist die Verwendung von “noindex, follow” für die Seiten 2 bis n auch bei redaktionellen Artikeln nicht sinnvoll, da sich die Information, nach der ein User sucht, beispielsweise auch auf Seite 2 eines Artikels befinden kann. Zudem würde dann nicht der vollständige Text für die inhaltliche Einordnung des Artikels durch Google zur Verfügung stehen. Aus diesem Grund sollte man die Anweisung nur dann verwenden, wenn sich auf den Folgeseiten einer Pagination keine wichtigen Inhalte oder internen Verlinkungen befinden.

Ein weiterer wichtiger Aspekt betrifft die gestalterische Umsetzung der Pagination. Diese sollte grundsätzlich immer mit Zahlen statt nur mit “Vor” und “Zurück” Links realisiert werden, da dies nicht nur für User übersichtlicher sondern auch für Google besser verständlich ist. Google selbst liefert hierfür ein gutes Beispiel:

Screenshot mit Pagination von google.de

Dieses Beispiel verdeutlicht zudem einen weiteren Aspekt, der bei Seitennummerierungen beachtet werden sollte: die aktuelle Seite (also hier Seite 3) sollte nicht mit einem Link versehen sein und dafür optisch hervorgehoben werden.

Außerdem ist es empfehlenswert, immer die erste und letzte Seite der Pagination mit anzugeben, wie es beispielsweise hier der Fall ist:

Screenshot mit Pagination von kleiderkreisel.de

Dies ermöglicht es dem Google Crawler die vollständige Pagination schnell zu erfassen, ohne dass er sich durch mehrere Ebenen der Website navigieren muss (also z.B. von Seite 1 zuerst auf Seite 5, dann auf Seite 10 usw. bis er bei Seite 18 ankommt).

Hinsichtlich des Aufbaus der Pagination kann außerdem die Usability erhöht werden, indem mit sprachlichen Elementen (“Zurück”, “Weiter”, “letzte Seite”, “erste Seite”) gearbeitet wird, die für den User im Gegensatz zu unterschiedlichen Pfeil-Varianten unmissverständlich sind.

Weiterhin ist (insbesondere bei der Verwendung von Zahlen) auf einen ausreichend großen Abstand zwischen den einzelnen Links zu achten.

Praxisbeispiele

Ein Beispiel für eine Pagination, bei der eine View-All-Seite vorhanden ist, findet sich bei zeit.de. Hier werden die Artikel auf mehrere Seiten aufgeteilt und es wird außerdem für jeden Artikel eine zusätzliche View-All-Seite bereitgestellt, auf der der vollständige Artikel zu finden ist. Allerdings wird auf der Website ebenfalls mit rel=”prev”/”next” gearbeitet und jede Teilseite enthält zusätzlich einen Canonical Link auf sich selbst. Das Beispiel verdeutlicht, dass sich die Verwendung einer View-All-Seite und der Attribute rel=”next”/”prev” nicht ausschließen müssen und dass es nicht immer erwünscht ist, dass die View-All-Seite in den Suchergebnissen angezeigt wird.

Screenshot mit Pagination von zeit.de

Screenshot mit Canonical Link und rel=”prev”/”next” von zeit.de

Ein weiteres gutes Beispiel für eine Pagination ohne View-All-Seite findet man bei bonprix.de. Hier wird die Pagination im HTML-Code ebenfalls mit den Attributen rel=”next”/”prev” umgesetzt.

Screenshot mit Pagination von bonprix.de

Screenshot mit rel=”prev”/”next” Attributen von bonprix.de

Die Beispiele zeigen, dass die Verwendung der rel=”next”/”prev” Attribute meist die bevorzugte Variante darstellt und eine View-All-Seite somit nicht zwingend für eine Pagination vorhanden sein muss.

Weiterführende Links

• https://www.sistrix.de/frag-sistrix/onpage-optimierung/wie-sieht-eine-optimale-paginierung-von-seiten-mit-vielen-inhalten-aus/
• https://www.internetwarriors.de/blog/seitenpaginierung-optimieren-seo-vs-usability/
• https://moz.com/blog/seo-guide-to-google-webmaster-recommendations-for-pagination

Ähnliche Artikel

• Interne Verlinkung
• Noindex

Über den Autor

Das Seobility Wiki Team besteht aus SEO-, Online-Marketing- und Web-Experten mit praktischer Erfahrung in den Bereichen Suchmaschinenoptimierung, Online-Marketing und Webentwicklung. Alle unsere Artikel durchlaufen einen mehrstufigen Redaktionsprozess, um Dir die bestmögliche Qualität und wirklich hilfreiche Informationen bieten zu können. Mehr Informationen über das Seobility Wiki Team.