So erstellst du eine SEO-freundliche Paginierung zum Beispiel für deinen Online-Shop

Sam Underwood

Apr. 01, 202211 Min. Lesedauer
Pagination: SEO-freundliche Strategien für den E-Commerce
Teilen

INHALTSVERZEICHNIS

Paginierung kann ein kniffliges SEO-Problem sein und ernste Folgen haben, wenn die Umsetzung schiefgeht. Dies gilt insbesondere für E-Commerce-Websites mit einer großen Anzahl von Produkten, denn diese sind stark auf Paginierung angewiesen, damit Benutzer finden, wonach sie suchen.

Übrigens in E-Commerce gilt es auch, je schneller die Website, umso höher die Wahrscheinlichkeit, dass der Kunde auf der Website bleibt. So empfehle ich es auch, sich zum Beispiel mit dem Thema Shopify Optimierung zu beschäftigen, wenn man auf die Shop CMS setzt.

In diesem Artikel stellen wir SEO-Strategien zur Paginierung vor, die du überall anwenden kannst. Doch da Paginierungsprobleme auf E-Commerce-Websites häufiger auftreten und ich viel Erfahrung im Umgang damit habe, lege ich den Schwerpunkt auf diesen Bereich.

Was ist Paginierung?

Paginierung oder Pagination im Kontext einer Website ist die Anordnung von Archivseiten in einer geordneten Abfolge. Die gebräuchlichsten Beispiele für diese Seitentypen sind E-Commerce-Kategorieseiten sowie Blog-Archivseiten.

Paginierung ist entscheidend, um die Struktur und interne Verlinkung deiner Website zu verbessern und ist wie die Facetted Navigation eine wichtige E-Commerce SEO Disziplin.

Wie sieht die Paginierung auf E-Commerce-Seiten aus?

Vielleicht kannst du dir unter Paginierung nichts vorstellen – aber du hast bestimmt schon mal eine gesehen!

Die beiden häufigsten Formen einer Paginierung sind Schaltflächen zum Laden von weiteren Inhalten und eine Abfolge von Zahlen am unteren Rand der Seite.

Beides funktioniert, aber die Nutzung einer Schaltfläche "Mehr laden" erfordert einige zusätzliche Überlegungen, auf die ich weiter unten eingehe.

Beispiele für Pagination mit "Mehr laden"-Button:

Superdry

Screenshot Superdry: Pagination
"Mehr laden"-Schaltfläche in Shop-Kategorie

Asos

Screenshot Asos: Pagination
"Mehr laden"-Schaltfläche in Shop-Kategorie

Beispiele für Pagination mit Zahlenabfolge

AO (Appliances Online)

Screenshot Appliances Online: Pagination
Zahlenfolge zum Blättern in Online-Shop

Argos

Screenshot Argos: Pagination
Zahlenfolge zum Blättern in Online-Shop

Unendliches Scrollen ist eine weitere Möglichkeit für die Navigation in Archiven. Es verliert jedoch an Beliebtheit, da Studien gezeigt haben, dass es einige negative Auswirkungen auf die Nutzerfreundlichkeit hat. Zum Beispiel ist der Footer auf solchen Seiten schwer zu erreichen.

Warum sollte ich mich auf die Paginierung konzentrieren?

Eine nicht optimale Implementierung der Paginierung verursacht schwerwiegende Probleme, insbesondere bei E-Commerce-Websites. Einige davon, die ich persönlich erlebt habe, sind:

  • Verwaiste Produktseiten (ohne interne Verlinkung).
  • Unnötig tiefe Website-Strukturen.
  • Weniger Crawling von paginierten Seiten.

In diesem Artikel stelle ich die wichtigsten Punkte zusammen, die du über Paginierung wissen musst, um sicherzustellen, dass deine E-Commerce-Website sie suchmaschinenfreundlich implementiert.

1. Sei vorsichtig mit JavaScript

Eine großartige Möglichkeit, eine komfortable Nutzung deines Shops zu ermöglichen, besteht darin, die nächste Seite in deiner paginierten Sequenz clientseitig mit JavaScript zu laden, ohne die ganze Seite zu aktualisieren.

Ich bin ein großer Befürworter von AJAX und empfehle es auch für die Paginierung auf deiner Website. Bei der Implementierung gilt es jedoch äußerst vorsichtig zu sein.

AJAX-basierte Paginierung ist auf E-Commerce-Seiten sehr verbreitet und leider auch häufig auf nicht SEO-freundliche Weise implementiert. Bei einer Paginierung über AJAX besteht das Hauptkriterium darin, sicherzustellen, dass die href-Links zur nächsten Seite in der Abfolge noch vorhanden sind.

Das heißt, dass in deinem Produktarchiv die Links zu nachfolgenden Seiten wie beispiel.de/shop/schuhe/?seite=2 weiterhin im HTML-Quellcode der Seite oder zumindest im vom Browser erstellten DOM sichtbar sein sollten.


Wie sehe ich, was im DOM ist?

Am besten kannst du sehen, was der Browser im DOM erstellt hat, indem du die Entwicklungstools öffnest (normalerweise über die Taste F12) und dann in Chrome die Ansicht "Elements" aufrufst.

Screenshot: Elements in Chrome
Der vom Browser gerenderte Code in Chrome

Diese Ansicht unterscheidet sich von der Quellcode-Ansicht, denn hier siehst du, was der Browser tatsächlich gerendert hat, einschließlich aller ausgeführten JavaScripts.

Beachte, dass Google diese Links vielleicht nicht immer sieht, je nachdem, wie schnell die Seite gerendert wird. Wenn du dies überprüfen willst, empfehle ich, dich mit dem URL-Prüftool der Google Search Console vertraut zu machen.

Wenn du die Links in beiden Varianten nicht siehst, liegt das wahrscheinlich daran, dass du die zweite Seite des Archivs mit JavaScript lädst, ohne eine Nicht-JavaScript-Alternative bereitzustellen, d. h. klassische href-Links.

Wenn deine Paginierung auf diese Weise funktioniert, kann Google die nächste Seite im Archiv nicht sehen. Dies liegt daran, dass der Googlebot und andere Such-Bots nicht auf Elemente klicken, die JavaScript ausführen, wie es ein Benutzer tut.

Während also nur menschliche Nutzer die schöne AJAX-basierte Navigation für deine Paginierung erhalten, muss dennoch auch der Googlebot in der Lage sein, zur nächsten Seite zu navigieren, wobei jede Seite in der Abfolge eine bestimmte Auswahl von Produkten enthält, die sich nicht mit denen der anderen überschneidet.

Eine Website, die dies richtig macht, ist Argos. Auf den Kategorieseiten des Shops ( wie dieser) siehst du bei der Überprüfung der Elemente ihrer Paginierung die href-Links zu jeder Seite in der Sequenz.

Screenshot: Elemente/Argos
Die href-Links sind enthalten

AUFGEPASST!

Diese Links müssen idealerweise im HTML-Quelltext und nicht nur bei der Prüfung des Elements sichtbar sein. Andernfalls werden die Links nur mit JavaScript eingefügt, wodurch die Wahrscheinlichkeit verringert wird, dass Google sie sieht.

Dies ist ein tolles Beispiel für die korrekte Implementierung der AJAX-basierten Paginierung.

Argos verwendet sogar pushState aus der HTML5 History API, um die URL zu aktualisieren, sodass es so aussieht, als ob eine vollständige Seitenaktualisierung stattgefunden hätte.

Obwohl es weniger zwingend ist, würde ich auch empfehlen, dies mit einem AJAX-basierten Paginierungssystem umzusetzen. Hier findest du ein von John Mueller erstelltes Beispiel für die History-API in Aktion: eine Kombination aus unendlichem Scrollen und nummerierter Paginierungssequenz.

Wenn das ein bisschen viel ist - es gibt Bibliotheken, die den Prozess vereinfachen, zum Beispiel diese.

2. Lade nicht zu viele Buttons

Wenn du dich anstelle einer nummerierten Paginierung oder eines unendlichen Scrollens für "Mehr laden"-Schaltflächen entscheidest, musst du einige zusätzliche Punkte berücksichtigen.

Mit den obigen Ratschlägen wird deine Website immer noch unnötig tief, selbst wenn du bei der Lösung mit "Mehr laden" die href-Links hinzugefügt hast.

Dies liegt daran, dass du in diesem Szenario nur von Seite 1 auf Seite 2, dann von Seite 2 auf Seite 3 usw. verlinkst, während du mit einer nummerierten Paginierung beispielsweise Deeplinks von Seite 1 bis 6 hinzufügen kannst.

Dies trägt zu einer tiefen Website-Struktur bei, da mehr Klicks nötig sind, um weiter hinten (also tiefer) positionierte Produktseiten zu erreichen.

Schaubild: Klickpfad in Paginierung
Viele Klicks, tiefe Seitenstruktur

Dies wirkt sich negativ auf die Verteilung deiner Linkautorität auf die tieferen Produktseiten aus, wodurch diese für Longtail-Keywords schlechter gefunden werden.

Dies kannst du sowohl mit einer "Mehr laden"-Schaltfläche als auch mit einer nummerierten Paginierung umgehen. Dann profitierst du von der Nutzerfreundlichkeit einer Option "Mehr laden", ermöglichst es den Benutzern - und Google! - jedoch auch, zu einer bestimmten Seite zu springen.

Beispiel: Kombinierte Paginierung bei Argos
"Mehr laden" und Zahlenfolge als Pagination kombiniert

Diese Option verhindert die Probleme bei der Website-Struktur, die durch "Mehr laden"-Schaltflächen verursacht werden, und eröffnet dir die Vorteile der nummerierten Paginierung.

Schaubild: Website-Struktur mit nummerierter Pagination
Geringere Klicktiefe dank nummerierter Paginierung

Eine weitere Alternative bei Nutzung einer nummerierten Paginierung besteht darin, diese in ein <noscript>-Tag einzuschließen.

Das heißt, wenn ein Benutzer JavaScript deaktiviert hat, sieht er die Seitennummerierung und kann damit auf der Website navigieren. Der Nachteil dieser Option ist, dass es nicht 100 % sicher ist, dass Google den Inhalt des Noscript-Tags tatsächlich ausliest.

Zuletzt war zu hören, dass Google Inhalte in einem Noscript ignoriert, also teste Lösungen mit dieser Methode sorgfältig.

Wenn du nicht die Schaltfläche "Mehr laden" und die nummerierte Paginierung kombiniert anzeigen möchtest, kannst du die Letztere auch wie im obigen Mockup auf der Seite implementieren, aber ein display:none hinzufügen, um sie über CSS auszublenden.

Dann befinden sich die Links in der HTML-Quelle, sind im Frontend aber verborgen, sodass Google sie weiterhin sehen und wie gewohnt crawlen sollte. Wir haben jedoch durch das Reasonable-Surfer-Patent erfahren, dass Google den PageRank anscheinend anhand der Wahrscheinlichkeit eines Klicks auf einen Link verteilt.

Ein System erzeugt ein Modell basierend auf Merkmalsdaten, die sich auf verschiedene Merkmale eines Links von einem verlinkenden Dokument zu einem verlinkten Dokument beziehen, und Benutzerverhaltensdaten zu Navigationsaktionen, die mit dem Link verbunden sind. Außerdem weist das System einem Dokument basierend auf dem Modell einen Rang zu.

— Ranking documents based on user behavior and/or feature data

Obwohl das Patent nicht ausdrücklich auf versteckte Links eingeht, ist beim Verbergen von Links mit CSS Vorsicht geboten. Behalte bei solchen Lösungen am besten die Auswirkungen sowohl auf das Crawling als auch auf das Ranking im Auge.

3. Verwende eine Gesamtansicht, um deine E-Commerce-Struktur zu verflachen

Eine Möglichkeit, alle Komplikationen bei der Paginierung zu umgehen, besteht darin, auf deinen Kategorieseiten standardmäßig alle Produkte anzuzeigen.

Wenn bereits paginierte URLs vorhanden sind, kannst du ihre Canonical-Tags aktualisieren, um auf die URL der neuen Gesamtansichtsseite zu verweisen.

Schaubild: Kanonisierung einer Gesamtansichtsseite
Alternative zur Pagination: Alle Produkte auf einer Seite

Dies hat den Vorteil einer flacheren Website-Struktur - die Anzahl der Klicks, die nötig sind, um zu Produkten zu gelangen, wird reduziert. Doch während dieser Ansatz ein Plus für Nutzerfreundlichkeit und SEO ist, können damit Probleme bei der Ladezeit der Website entstehen.

Wenn du eine hohe Anzahl von Produkten in der Kategorie anbietest, könnten folgende Faktoren die Ladezeit verlängern:

  • Mehr HTML-Code, den der Browser rendern muss.
  • Mehr zu ladende Bilder.
  • Größere Datenbankaufrufe.

Der Effekt lässt sich teilweise durch Lazy Loading von Bildern, Seiten-Caching/statische Bereitstellung der Website und Laden dynamischer Elemente mit JS auffangen. Doch gründliche Tests und kontinuierliches Monitoring sind nötig, um sicherzustellen, dass die Leistung gut ist.


Wie kann ich die Auswirkung auf die Ladezeit testen?


Wenn du feststellst, dass eine Gesamtansicht aufgrund von Geschwindigkeitsproblemen nicht funktioniert, solltest du ermitteln, wie viele Produkte du pro Kategorieseite anzeigen kannst, bevor die Ladezeit zum Problem wird.

Die einfachste Methode dafür ist, die Anzahl der sichtbaren Produkte schrittweise zu erhöhen.

Dies ist generell eine gute Möglichkeit für E-Commerce-Websites, die interne Verlinkung zu verbessern, denn wenn du die Anzahl der Produkte auf einer einzelnen Kategorieseite von 12 auf 24 erhöhst, hast du die Anzahl der paginierten Seiten innerhalb der Sequenz damit halbiert.

Dadurch wird deine Website-Struktur zwar nicht so flach wie mit einer Gesamtansichtsseite, doch du hast dennoch die Klicktiefe deiner Produktseiten reduziert.

4. Verwende selbstreferenzierende Canonicals

Ich will hier nicht zu sehr ins Detail gehen, aber häufige Fehler bei der Einrichtung der Paginierung sind:

  • Kanonisierung (Canonical URL) aller Seiten innerhalb einer Sequenz auf die erste Seite.
  • Ausschluss aller Paginierung mit Noindex (Details dazu später).

Statt diese Fehler zu machen, solltest du in einer Paginierung standardmäßig auf jeder Seite ein selbstreferenzierendes Canonical hinzufügen, wie hier zu sehen:

Schaubild: Selbstreferenzierende Canonicals für Paginierung
Standard: Selbstreferenzierende Canonicals auf paginierten Seiten

Häufig sehe ich bei einer Paginierung den Fehler, dass ein CMS eine Seite wie /kleider/1/ erstellt, die ein Duplikat von /kleider/ ist. Auf großen Websites mit vielen Artikeln kann dies zu umfangreichen Dopplungen führen.

In diesem Fall solltest du die gedoppelte /1/-URL auf die richtige erste Seite des Archivs kanonisieren (in diesem Beispiel /kleider/), um das Problem zu lösen.

5. Nutze Noindex nur, wenn es wirklich sein muss

Ein häufiges Problem auf paginierten Seiten sind unnötige Noindex-Tags.

Es ist nicht immer falsch, Paginierungsseiten ein Noindex-Tag hinzuzufügen, doch es kann die Crawling-Frequenz verringern.

Grundsätzlich versuchen wir noch ein paar Mal zu crawlen, um zu sehen, ob das Noindex verschwunden ist oder ob die Seite von einer 500er oder was auch immer wiederhergestellt wurde, und wenn das Noindex noch da ist, wird diese Seite langsam verschoben oder nicht so oft gecrawlt.

— Gary Illyes - https://www.youtube.com/watch?v=GVKcMU7YNOQ

Im Idealfall sollte jede Seite innerhalb der Abfolge wertvoll sein, und du solltest daher auf allen Seiten selbstreferenzierende Canonicals einfügen.

Es gibt jedoch auch Szenarien, in denen ein Noindex-Tag auf paginierten Seiten sinnvoll ist. John Mueller gab einmal diese Auskunft zur Nutzung des Noindex-Tags auf paginierten Seiten:

... letztendlich, denke ich, kommt es vor allem auf eins an: "Macht diese Seite in der paginierten Reihe Freude?" und wenn nicht, kann man sie mit Noindex ausschließen.
Einige Website-Betreiber halten alle Seiten in einer paginierten Abfolge für wichtig und wollen sie daher indexiert haben (die ausgefallenen verwenden rel-next/prev). Einige Websites begrenzen paginierte Serien auf eine bestimmte Anzahl, wobei vielleicht die erste indexiert wird und der Rest nicht.
Die Entscheidung hängt manchmal auch vom Inhalt der paginierten Reihe ab. Wenn es sich beispielsweise um eine Liste verlinkter Detailseiten handelt, kannst du die Entscheidung davon abhängig machen, ob du auch dann alle Seiten erreichen kannst, wenn nicht der ganze Satz von Seiten indexiert ist (wenn du auf verwandte Beiträge/Produkte verlinkst, ist das meistens der Fall).

— John Mueller on Reddit - https://www.reddit.com/r/TechSEO/comments/ag77vi/canonicals_and_angular_js/eh9zqut?utm_source=share&utm_medium=web2x

Fassen wir zusammen:

  • Versuche, paginierte Seiten so wertvoll wie möglich zu gestalten.
  • Wenn du denkst, dass eine Seite für Benutzer nicht wertvoll ist, setze ein Noindex-Tag. Beachte dabei, dass dies die Crawl-Häufigkeit verringern kann.
  • Wenn du dich für Noindex entscheidest, stell dir die Frage, ob es alternative Crawling-Pfade gibt, um die auf der Noindex-Seite aufgelisteten Produkte zu finden, z. B. über andere Kategorien oder Filter.
  • In den meisten Fällen ist ein auf die Seite selbst verweisendes Canonical anstelle eines Noindex-Tags sinnvoll.

Häufig wollen Seitenbetreiber ihre Inhalte von Seite 2 aufwärts nicht indexiert haben, weil sie gesehen haben, dass Google den Nutzern die falsche Seite für eine Suche anzeigt, zum Beispiel Seite 4 anstatt der ersten Seite. Damit kommen wir zu Tipp 5.

5. Deoptimiere paginierte Seiten bei Bedarf

Wenn du nicht willst, dass Google Seiten ab Seite 2 deines Kategoriearchivs anzeigt, die Seiten aber indexiert bleiben sollen, kannst du versuchen, sie für Suchanfragen zu deoptimieren.

Dazu kannst du dich einer Reihe von Methoden bedienen.

Zuerst kannst du versuchen, das Title-Tag zu deoptimieren, indem du die Seitenzahl am Anfang einfügst:

Suchergebnis mit Seitenzahl am Anfang des Titels
Beispiel: Deoptimierter Seitentitel

Eine andere Möglichkeit ist, ab Seite 2 Inhalte oberhalb und unterhalb der Produktliste zu entfernen. Dies macht Seite 1 in den Augen von Google zur wertvollsten Seite in der Sequenz, sodass sie mit höherer Wahrscheinlichkeit in den Suchergebnissen angezeigt wird.

Ähnlich wie Titel und Content kannst du auch das H1-Tag auf der Seite deoptimieren.

6. Verwende eine klare URL-Struktur

Das obige Suchergebnis-Snippet zeigt dies in Aktion - example.com/furniture/scandi/page2. Um Google das Kategoriearchiv auf deiner Website ein wenig leichter verständlich zu machen, empfiehlt es sich, eine saubere und leicht lesbare URL-Struktur in einer Sequenz zu verwenden.

In der Praxis kann dies durch einfaches Anhängen von /page/2/ am Ende deiner Kategorie-URL erfolgen. Aber du kannst auch Parameter wie ?page=2 verwenden und dann die Seitenparameter im URL-Parameter-Tool der Google Search Console hinterlegen.

Seit Google die Unterstützung von prev/next eingestellt hat, ist es definitiv wichtiger geworden, eine Paginierung deutlich erkennbar zu machen.

Fazit: SEO- und nutzerfreundliche Pagination

Hoffentlich hat dir dieser Artikel einige Einblicke gegeben, was du bei der Optimierung deiner paginierten Archivseiten beachten solltest, um sie für die Websuche zu optimieren und einen möglichst nutzerfreundlichen Online-Shop zu bieten.

Hast du Fragen dazu, wie du deine Pagination optimieren kannst, um technische Probleme zu vermeiden und die Website-Struktur zu verbessern? Kontaktiere mich auf Twitter unter @SamUnderwoodUK (auf Englisch!), und ich werde mein Bestes tun, um dir zu helfen!

Teilen
Author Photo
Sam Underwood, a digital marketing expert with proficiencies in SEO, data analysis, site speed, CRO/UX and content strategy. Sam has experience working on enterprise search strategies for some of the UK's largest brands such as AO, Reiss & Compare The Market.
Mehr dazu