zurück zur Glossar-Übersicht
Webdesign Glossar: Pagination
Veröffentlicht von: Alexander Gildernstern
Kurz und knapp: Was bedeutet Pagination auf Websites?
Pagination teilt lange Ergebnislisten in mehrere Seiten und zeigt Nutzer Position und Umfang. Für Google zählt, dass Folgeseiten über HTML-Links mit href (anchor links) erreichbar sind und jede Seite eine eigene URL sowie Canonical-URL (rel=“canonical“) hat. URL-Fragmente (#) vermeiden.
Inhaltsverzeichnis
Welche UX-Muster gibt es neben Pagination?
Im Webdesign geht es bei Pagination um Navigation und Leistung: Große Listen (Produkte, Suche, Kommentare) werden geteilt, damit die erste Seite schneller lädt. Google nennt drei Muster: Pagination, „Load more“ und Infinite scroll. Pagination zeigt Nutzer Ergebnisgröße und Position, während Infinite scroll laut Google „scrolling fatigue“ und unklare Größe riskieren kann. Load more bleibt auf einer Seite, ist aber bei sehr großen Ergebnissätzen limitiert. Die Tabelle fasst die Pros und Cons aus Googles Dokumentation zusammen.
| UX-Muster | Vorteile | Nachteile |
|---|---|---|
| Pagination | Einblick in Ergebnisgröße und Position. | Komplexere Steuerung; Inhalte auf mehrere Seiten; mehr Seitenaufrufe. |
| Load more | Eine Seite; Gesamtzahl am Button möglich. | Für sehr große Ergebniszahlen ungeeignet. |
| Infinite scroll | Eine Seite; intuitiv weiter scrollen. | Unklare Ergebnisgröße, „scrolling fatigue“; für sehr große Ergebniszahlen ungeeignet. |
Kostenloses
Webdesign Beratungsgespräch
Wir gestalten deine Webseite so, wie du sie dir schon lange wünschst.
100 % Transparenz
Alle Leistungen und Preise sind von Anfang an transparent für dich einsehbar.
Langfristig an deiner Seite
Auf Wunsch übernehmen wir die fortlaufende Betreuung deiner Website und reagieren schnell auf Änderungen oder technische Fehler.
Google Bewertungen
Basierend auf 5 Bewertungen
Wie setzt du Pagination so um, dass Suchmaschinen alles finden?
Für SEO ist entscheidend, dass Suchmaschinen-Bots (Crawler) die Folgeseiten finden. Google crawlt URLs, die im href-Attribut von HTML-Links (anchor links) stehen, und „klickt“ keine Buttons oder JavaScript-Aktionen, die erst nach Nutzerinteraktion Inhalte laden. Darum sollte jede Pagination-Seite über echte Links erreichbar sein (crawlable links). Google empfiehlt, Seiten in der Sequenz aufeinander zu verlinken und zusätzlich von jeder Seite zurück zur ersten zu verlinken, um den Start der Sammlung zu betonen. Jede Seite braucht eine eigene, eindeutige URL (z.B. ?page=2) und eine eigene Canonical-URL (rel=“canonical“) – die erste Seite darf nicht als Canonical für alle anderen dienen. Nutze keine #Fragmente für Seitenzahlen, weil Google Fragment-IDs ignoriert. Und wichtig für alte Setups: Google nutzt rel=“next/prev“ heute nicht mehr, auch wenn andere Suchmaschinen diese Angaben ggf. noch verwenden.
Wie machst du Infinite scroll und Load more indexierbar?
„Load more“ und Infinite scroll sind gebaut, für die Indexierung aber nur sicher, wenn sie SEO-freundlich umgesetzt werden. Google betont: Die Suche interagiert nicht mit der Seite; Verfahren, die auf Scrollen oder Klicken als Auslöser angewiesen sind, können Inhalte verstecken. Für Infinite scroll empfiehlt Google daher paginierte „Chunks“ (content chunks) mit eigenen, persistenten URLs. Jede Portion sollte immer denselben Inhalt liefern, idealerweise mit absoluten Seitenzahlen wie ?page=12 statt relativen Parametern wie ?date=gestern. So bleiben Inhalte unter einer URL stabil auffindbar. Die URLs müssen sequenziell verlinkt sein (Pagination), damit Crawler die Reihe entdecken können. Wenn beim Scrollen ein neuer Abschnitt zur Hauptansicht wird, soll die URL per History API (History API) aktualisiert werden. Zum Prüfen empfiehlt Google die URL Inspection in der Search Console, um gerendertes HTML (rendered HTML) zu kontrollieren.
Welche Accessibility-Details verbessern Pagination im Webdesign?
Gute Pagination ist Barrierefreiheit (Accessibility). Das GOV.UK Design System empfiehlt, die Steuerung als Navigationselement (nav) mit aria-label zu kennzeichnen, Links mit klaren Labels zu versehen und die aktuelle Seite per aria-current=“page“ zu markieren. Zusätzlich soll die Seitenzahl im Seitentitel (HTML title) stehen, z.B. „Suchergebnisse – Seite 2 von 4“, damit Screenreader den Kontextwechsel ansagen. Bei vielen Seiten helfen Ellipsen (…) und eine reduzierte Anzahl an Seitenzahlen, damit die Leiste auf kleinen Displays nicht überläuft. Für die Bedienung gilt: „Previous“ und „Next“ sollten als Text vorhanden sein und nicht nur als Icon, und auf der ersten oder letzten Seite werden die jeweiligen Links weggelassen. Performance-seitig empfiehlt Google für den Wechsel zur nächsten Seite Techniken wie prefetch und preload (resource hints), damit die Folgeseite schneller wirkt. Große Klickflächen (hit areas) sind dabei hilfreich.
Fazit: Was ist bei Pagination entscheidend?
Pagination funktioniert dann am besten, wenn UX und Technik zusammenspielen: echte HTML-Links mit href (anchor links), eindeutige URLs und self-referencing Canonicals (rel=“canonical“) sorgen dafür, dass Crawler Folgeseiten finden. Für Infinite scroll gilt: Nur mit persistenten, verlinkten Seiten-URLs und URL-Updates (History API) bleibt der Inhalt teilbar und indexierbar.
zurück zur Glossar-Übersicht
Weitere Glossar-Artikel
Gildenstern Webdesign & Online Marketing
Sichere Dir jetzt Dein kostenloses Erstgespräch
Warte nicht wieder Wochen, bis dich deine Webseite erneut stört. Du weißt längst, dass sie nicht mehr zu dir passt – also warum es nicht jetzt angehen?
Du musst nichts buchen, keine Entscheidung treffen. Lass uns einfach ins Gespräch kommen und gemeinsam herausfinden, ob unsere Arbeit zu dir und deinem Vorhaben passt.