SEO-freundliche Paginierungsstrategien für E-Commerce
Paginierung kann ein kniffliges SEO-Thema sein, wenn man es falsch macht. Dies gilt insbesondere für eine E-Commerce-Website mit einer großen Anzahl von Produkten, die zweifellos stark auf Paginierung angewiesen sein wird, damit Benutzer finden können, wonach sie suchen.
Sie können die in diesem Artikel erklärten Konzepte auf jede Paginierungsimplementierung übertragen, aber da Paginierungsprobleme tendenziell häufiger auf E-Commerce -Websites auftreten und ich viel Erfahrung im Umgang mit ihnen habe, werde ich mich auf diesen Bereich konzentrieren.
Wir beginnen mit:
Schritte, um sicherzustellen, dass E-Commerce-Paginierung suchmaschinenfreundlich ist
- 1. Seien Sie vorsichtig mit JavaScript
- 2. Denken Sie zweimal über „Mehr laden“-Buttons nach
- 3. Verwenden Sie eine „Alle anzeigen“-Seite, um Ihre E-Commerce-Struktur zu flachen
- 4. Verwenden Sie selbstverweisende Canonicals
- 5. Verwenden Sie Noindex nur, wenn Sie wirklich müssen
- 5. De-optimieren Sie paginierte Seiten bei Bedarf
- 6. Sorgen Sie für eine klare URL-Struktur
Was ist Paginierung?
Paginierung im Kontext einer Website ist die Sequenzierung von Archivseiten, die verwendet werden, um auf andere Seiten zu verlinken, die tiefer in der Hierarchie/Struktur einer Website zu finden sind. Die häufigsten Beispiele für diese Art von Seiten finden sich entweder auf E-Commerce-Kategorieseiten oder Blog-Archivseiten.
Paginierung ist ein entscheidendes Konzept, das man verstehen muss, wenn es darum geht, die Struktur und interne Verlinkung Ihrer Website zu verbessern, ein Konzept, über das ich kürzlich geschrieben habe auf meinem Blog.
Wie sieht Paginierung auf E-Commerce-Websites aus?
Wenn Sie sich nicht sicher sind, wie Paginierung aussieht, haben Sie sie definitiv schon einmal gesehen!
Die zwei häufigsten Implementierungen von Paginierung kommen in Form von „Mehr laden“-Buttons und einer nummerierten Sequenz am Ende der Seite.
Beide funktionieren, aber die Verwendung eines „Mehr laden“-Buttons hat einige zusätzliche Überlegungen, auf die ich später in diesem Artikel eingehen werde.
Beispiele für „Mehr laden“-Paginierungsbuttons:
Superdry
Asos
Beispiele für nummerierte Sequenz-Paginierung:
AO (Appliances Online)
Argos
Unendliches Scrollen ist auch eine Überlegung für die Navigation in Archiven. Dies wird jedoch immer weniger beliebt, da Studien gezeigt haben, dass es einige negative UX-Implikationen hat, wie z. B. die Unfähigkeit, die Fußzeile einer Seite leicht zu erreichen.
Warum sollte ich mich auf Paginierung konzentrieren?
Weniger als optimale Implementierungen von Paginierung verursachen einige schwerwiegende Probleme, insbesondere bei E-Commerce-Websites. Ich habe persönlich gesehen, dass Probleme mit der Paginierung eine Vielzahl von Problemen verursachen, darunter:
- Produktseiten, die verwaist sind (nicht intern verlinkt).
- Unnötig tiefe Seitenstrukturen.
- Reduzierung des Crawlings von paginierten Sequenzen.
In diesem Artikel werde ich einige wichtige Dinge durchgehen, die Sie über Paginierung wissen müssen, um sicherzustellen, dass Ihre E-Commerce-Website sie auf eine suchmaschinenfreundliche Weise implementiert.
1. Seien Sie vorsichtig mit JavaScript
Die Verwendung von JavaScript, um die nächste Seite in Ihrer paginierten Sequenz clientseitig ohne vollständiges Neuladen der Seite zu laden, ist eine großartige Möglichkeit, Ihren E-Commerce-Benutzern eine angenehme Erfahrung zu bieten.
Ich bin ein großer Befürworter der Verwendung von AJAX und empfehle Ihnen, es für die Paginierung auf Ihrer Website in Betracht zu ziehen. Sie müssen jedoch extrem vorsichtig sein, wie Sie dies implementieren.
AJAX-basierte Paginierung ist auf E-Commerce-Websites sehr verbreitet, und leider ist es auch sehr verbreitet, dass sie auf eine nicht SEO-freundliche Weise implementiert wird. Wenn es darum geht, Paginierung über AJAX zu implementieren, ist das Hauptkriterium sicherzustellen, dass die href-Links zur nächsten Seite in der Sequenz weiterhin existieren.
Das bedeutet, dass innerhalb Ihres Produktarchivs Links zu nachfolgenden Seiten wie example.co.uk/shop/shoes/?page=2 weiterhin im HTML-Quellcode der Seite oder zumindest innerhalb des DOM sichtbar sein sollten, das vom Browser erstellt wurde.
Wie sehe ich, was im DOM ist?
Der beste Weg, um zu sehen, was der Browser im DOM konstruiert hat, ist das Öffnen der Entwicklertools (normalerweise durch Drücken von F12) und dann zum Abschnitt „Elemente“ in Chrome zu gehen.
Was hier angezeigt wird, unterscheidet sich von dem, was Sie beim Anzeigen der Quelle sehen, da dies zeigt, was der Browser tatsächlich gerendert hat, einschließlich jeglichem JavaScript, das ausgeführt wurde.
Link ist im DOM, aber nicht im HTML-Quellcode
Seien Sie sich bewusst, dass Google diese Links möglicherweise nicht immer sieht, abhängig davon, wie schnell die Seite rendert. Wenn Sie das überprüfen möchten, empfehle ich Ihnen, sich mit dem Google Search Console URL-Inspektor-Tool.
vertraut zu machen.
Wenn Sie diese Links in keinem von beiden sehen können, liegt das höchstwahrscheinlich daran, dass Sie die zweite Seite und folgende des Archivs mit JavaScript laden, ohne eine Nicht-JavaScript-Alternative bereitzustellen, d. h. klassische href-Links. Wenn Ihre Paginierung auf diese Weise funktioniert, wird Google nicht in der Lage sein, die nächste Seite im Archiv zu sehen
. Dies geschieht, weil Googlebot und andere Suchbots nicht auf Elemente klicken, die JavaScript auf die gleiche Weise ausführen wie ein Benutzer. Während also Benutzer die schöne AJAX-basierte Navigation für Ihre Paginierung erhalten können, muss Googlebot dennoch in der Lage sein, zur 2. Seite und folgenden zu navigieren, wobei jede Seite in der Sequenz .
eine eindeutige Liste von Produkten ohne Überschneidungen enthält . Ein Beispiel für eine Website, die dies richtig macht, ist Argos. Auf ihren Kategorieseiten (wie dieser hier
), wenn Sie die Elemente ihrer Paginierung untersuchen, können Sie href-Links zu jeder Seite in der Sequenz sehen.
SEIEN SIE SICH BEWUSST
Diese Links müssen idealerweise im HTML-Quellcode verfügbar sein, nicht nur durch Untersuchen des Elements sichtbar. Wenn sie nur sichtbar sind, wenn Sie das Element untersuchen, und Sie sie nicht im HTML-Quellcode sehen können, werden Sie sie mit JavaScript injizieren, was es für Google weniger wahrscheinlich machen kann, die Links zu sehen. Auf der Argos-Website können Sie sehen, dass beim Klicken auf den Button, der zur 2. Seite führt, kein neues Seitenladen ausgelöst wird; Sie werden stattdessen zum Anfang der Seite zurückgebracht und alle Produkte auf der 2. Seite werden geladen. Dies ist das Verhalten, das Benutzer sehen werden, während Google dem Link folgt und zu .
dieser Seite geführt wird. Sie können erkennen, dass dies über AJAX erfolgt, indem Sie entweder ein Plugin verwenden, das Dokument-HTTP-Header-Anfragen überwacht, wie dieses hier
, oder indem Sie einfach den Netzwerk-Tab in den Chrome-Entwicklertools öffnen und nach „Dokument“-Anfragen suchen, wenn Sie zu einer anderen Seite navigieren, indem Sie Paginierung verwenden. Dies ist ein großartiges Beispiel für die korrekte Implementierung von AJAX-basierter Paginierung.
Sie nutzen sogar das HTML5 history API , um die URL zu aktualisieren, sodass es aussieht, als hätte eine vollständige Seitenaktualisierung stattgefunden.
Obwohl es weniger eine Anforderung ist, würde ich auch empfehlen, dies mit einem AJAX-basierten Paginierungssystem zu implementieren. Sie können ein Beispiel für die praktische Anwendung des History API sehen, das von John Mueller mit einer kombinierten unendlichen Scroll- / nummerierten Paginierungssequenz erstellt wurde hier.
Wenn dies nach viel Überlegung klingt, gibt es Bibliotheken, die diesen Prozess erleichtern, wie zum Beispiel diese.
2. Denken Sie zweimal über “Mehr laden”-Buttons nach
Wenn Sie sich anstelle einer nummerierten Paginierung oder eines unendlichen Scrollens für den “Mehr laden”-Button-Ansatz entscheiden, müssen Sie auch einige zusätzliche Dinge berücksichtigen.
Wenn Sie dem vorherigen Rat folgen und selbst wenn Sie den href-Link zum “Mehr laden”-Button hinzugefügt haben, machen Sie Ihre Website unnötig tief.
Dies liegt daran, dass Sie im Gegensatz zur nummerierten Paginierung, die es Ihnen ermöglicht, Deep Links von Seite 1 bis 6 (zum Beispiel) hinzuzufügen, nur von Seite 1 zu Seite 2, dann von Seite 2 zu Seite 3 usw. verlinken.
Dies trägt dazu bei, dass Sie eine tiefe Seitenstruktur haben, da die Klicktiefe, um tiefer in der Website liegende Produktseiten zu erreichen, zunimmt.
Dies wird einen negativen Einfluss darauf haben, wie Link-Equity auf Produktseiten verteilt wird, die tiefer in der Seitenhierarchie liegen. Dies wird sich wiederum negativ darauf auswirken, wie gut Ihre Produktseiten für Long-Tail-Suchanfragen.
ranken können.
Um dies zu umgehen, könnten Sie sowohl einen “Mehr laden”-Button als auch eine nummerierte Paginierung implementieren. Dann erhalten Sie die UX-Vorteile eines “Mehr laden”-Buttons, ermöglichen es den Nutzern aber auch, zu einer bestimmten Seite zu springen, und lassen Google dasselbe tun.
Ein Beispiel für eine Kombination aus “Mehr laden”-Button und nummerierter Paginierung.
Diese Option verhindert die Probleme, die durch “Mehr laden”-Buttons in Bezug auf die Seitenstruktur verursacht werden, und lässt Sie die Vorteile der nummerierten Paginierung nutzen.
Die nummerierte Paginierung verkürzt die Klicktiefe zu paginierten Seiten, die tiefer in Ihrem Archiv liegen. Eine weitere Alternative
ist es, die nummerierte Paginierung zu implementieren, sie aber in ein <noscript>-Tag zu verpacken.
Das bedeutet, dass ein Nutzer, wenn er JavaScript deaktiviert hat, die nummerierte Paginierung sieht und die Website damit navigieren kann. Der Nachteil dieser Option ist, dass es nicht zu 100 % sicher ist, dass Google den Inhalt innerhalb des noscript-Tags tatsächlich betrachtet. Nach dem letzten Update, von dem wir gehört haben, neigt Google dazu, Inhalte innerhalb eines noscript zu ignorieren
, also testen Sie dies sorgfältig.
Wenn Sie nicht sowohl den “Mehr laden”-Button als auch die nummerierte Paginierung anzeigen möchten, könnten Sie die nummerierte Paginierung auch wie im obigen Mockup auf der Seite implementieren, aber ein display:none hinzufügen, um sie per CSS zu verstecken. Auf diese Weise befinden sich die Links im HTML-Quellcode, sind aber im Frontend ausgeblendet, sodass Google sollte die Links weiterhin sehen und wie gewohnt crawlen. Wir haben jedoch aus dem Reasonable Surfer Patent
gelernt, dass Google dazu neigt, PageRank basierend auf der Wahrscheinlichkeit zu verteilen, dass ein Link angeklickt wird.
, Ranking von Dokumenten basierend auf Nutzerverhalten und/oder Merkmalsdaten
Obwohl das Patent nicht ausdrücklich auf versteckte Links eingeht, sollten Sie vorsichtig vorgehen, wenn Sie die Links mit CSS verstecken, und in Erwägung ziehen, die Auswirkungen auf das Crawling und die Rankings zu testen.
3. Verwenden Sie eine “Alle anzeigen”-Seite, um Ihre E-Commerce-Struktur abzuflachen
Ein Weg, um alle Komplikationen bei der Paginierung zu umgehen, besteht darin, Kategorieseiten standardmäßig alle Produkte anzeigen zu lassen.
Wenn Sie bereits paginierte URLs haben, könnten Sie die kanonischen Tags auf diesen aktualisieren, um auf Ihre neue “Alle anzeigen”-Seiten-URL zu verweisen. Dies hat den Vorteil, dass Ihre Seitenstruktur abgeflacht wird , da die Anzahl der Klicks, um zu Produkten zu gelangen, reduziert wird. Während dieser Ansatz großartig für UX und SEO ist, ist die einzige Komplikation die
Seitengeschwindigkeit.
- Wenn Sie eine große Anzahl von Produkten in dieser Kategorie haben, könnten Sie massiv erhöhen:
- Das HTML, das der Browser rendern muss.
- Die Anzahl der zu ladenden Bilder.
Die Größe des Datenbankaufrufs. Während einiges davon durch Lazy Loading von Bildern
und Seiten-Caching/statische Auslieferung Ihrer Website und das Laden dynamischer Elemente mit JS umgangen werden kann. Sie müssen immer noch einige Tests durchführen und genau überwachen, um sicherzustellen, dass die Leistung gut ist.
- Wie kann ich den Geschwindigkeitseinfluss testen? Wenn Sie nach Ratschlägen zum Testen der Seitengeschwindigkeit suchen, lesen Sie meinen Beitrag über einige der .
- besten Tools zur Seitengeschwindigkeit Wenn Sie die Auswirkungen dieser Änderung auf die Nutzer messen möchten, werfen Sie einen Blick auf meine Data Studio-Vorlage, die CrUX-Daten verwendet
- , um echte Nutzerdaten zur Geschwindigkeit Ihrer Website anzuzeigen. Wenn Sie nach Ratschlägen zur Verbesserung der Geschwindigkeit suchen, lesen Sie meinen Leitfaden auf Semrush hier oder suchen Sie nach erstklassigen Ratschlägen in meiner filterbaren Liste von .
Tipps zur Seitengeschwindigkeit
Wenn Sie feststellen, dass der “Alle anzeigen”-Ansatz aufgrund von Geschwindigkeitsproblemen nicht funktioniert, bestimmen Sie, wie viele Produkte Sie in der Kategorie-Archivseite einbeziehen, bevor die Geschwindigkeit zu einem Problem wird.
Sie können dies überprüfen, indem Sie die Anzahl der sichtbaren Produkte schrittweise erhöhen. Diese Technik ist eine großartige Möglichkeit für E-Commerce-Websites, die interne Verlinkung zu verbessern, denn wenn Sie die Anzahl der Produkte auf einer einzelnen Archivseite von 12 auf 24 erhöhen, haben Sie effektiv die Anzahl der paginierten Seiten
innerhalb der Sequenz halbiert.
Während dies Ihre Seitenstruktur nicht so sehr abflacht wie eine “Alle anzeigen”-Seite, ist es Ihnen dennoch gelungen, die Klicktiefe zu den Produktseiten zu reduzieren. Erhöhen Sie die Ladegeschwindigkeit, den Traffic und die Conversion Ihres Shops mit der “Increase Page Speed”-Kollektion in Ecommerce Booster
, der App, die Shopify-Shops auditiert und einen sofort umsetzbaren Plan zur Optimierung von Produktseiten bereitstellt.
4. Verwenden Sie selbstreferenzierende Canonicals
- Ich werde hier nicht zu sehr ins Detail gehen, aber ein häufiger Fehler bei der Einrichtung der Paginierung ist entweder:
- Kanonisierung aller Seiten innerhalb einer Sequenz auf die erste Seite.
Noindex für die gesamte Paginierung (mehr Details dazu später). Anstatt diese Fehler zu machen, sollten Sie bei einer Standard-Paginierung ein selbstreferenzierendes Canonical
auf jeder Seite wie unten hinzufügen. Ein häufiger Fehler, den ich bei der Paginierung sehe, ist, dass das CMS manchmal auch eine Seite wie /dresses/1/ erstellt, die ein Duplikat von /dresses/ ist. Auf großen Websites mit vielen Archiven kann dies zu massiven Duplizierungsproblemen führen.
Falls dies der Fall ist, sollten Sie die doppelte /1/ URL auf die korrekte erste Seite des Archivs (in diesem Beispiel /dresses/) kanonisieren.
5. Nur Noindex, wenn es wirklich sein muss
Ein häufiges Problem bei paginierten Seiten ist, dass sie unnötigerweise das Noindex-Tag enthalten.
Obwohl es nicht immer falsch ist, ein Noindex-Tag zu paginierten Seiten hinzuzufügen, könnte dies die Crawl-Frequenz reduzieren.
Im Grunde werden wir versuchen, ein paar Mal öfter zu crawlen, um zu sehen, ob das Noindex weg ist oder ob sich die Seite von einem 500er-Fehler oder was auch immer erholt hat, und wenn das Noindex immer noch da ist, dann werden wir langsam anfangen, diese Seite nicht mehr so oft zu crawlen.
Idealerweise sollte jede Seite innerhalb der Sequenz wertvoll sein, und Sie sollten selbstreferenzierende Canonicals infolgedessen auf jeder Seite im Archiv einfügen.
Es gibt jedoch Szenarien, in denen ein Noindex-Tag auf paginierten Seiten sinnvoll ist. Wir haben kürzlich diese Erkenntnis von John Mueller zum Hinzufügen des Noindex-Tags auf paginierten Seiten gehört:
… am Ende läuft es meiner Meinung nach meistens darauf hinaus: „Bringt diese Seite in der paginierten Serie Freude?“ und wenn nicht, dann indexieren Sie sie einfach nicht.
Einige Websites sind der Meinung, dass alle Seiten in einer paginierten Serie wichtig sind, also lassen sie sie indexiert (die schicken, die rel-next/prev verwenden). Einige Websites begrenzen paginierte Serien auf eine bestimmte Anzahl, lassen vielleicht die erste indexieren und den Rest nicht.
Die Entscheidung basiert manchmal auch auf dem Inhalt der paginierten Serie. Wenn es sich beispielsweise um eine Liste von verlinkten Detailseiten handelt, könnten Sie danach entscheiden, ob Sie alle Seiten erreichen können, auch wenn Sie nicht das gesamte paginierte Set indexiert haben (wenn Sie auf verwandte Beiträge/Produkte verlinken, ist das normalerweise der Fall).
Zusammenfassend lässt sich also sagen:
- Versuchen Sie, paginierte Seiten so wertvoll wie möglich zu machen.
- Wenn Sie das Gefühl haben, dass sie für Nutzer nicht wertvoll sind, setzen Sie sie auf noindex, aber seien Sie sich bewusst, dass dies die Crawl-Häufigkeit reduzieren könnte.
- Wenn Sie sich für noindex entscheiden, prüfen Sie, ob es alternative Crawl-Pfade gibt, um diese auf der noindexed-Seite gelisteten Produkte zu finden, z. B. über andere Kategorien oder Filter.
- In den meisten Fällen werden Sie selbstreferenzierende Canonicals verwenden wollen und nicht das Noindex-Tag.
Ein häufiger Grund, warum Leute dazu neigen, Seite 2 und folgende eines Archivs auf noindex zu setzen, ist, dass sie gesehen haben, dass Google den Nutzern die falsche Seite anzeigt, wie Seite 4 statt der ersten Seite. Das bringt uns zu Tipp 5.
5. De-optimieren Sie paginierte Seiten bei Bedarf
Wenn Sie nicht möchten, dass Google Seite 2 und folgende Ihrer Kategoriearchive anzeigt, sie aber indexiert lassen möchten, könnten Sie versuchen, sie für Suchanfragen zu de-optimieren.
Es gibt ein paar Dinge, die Sie hier tun können.
Erstens könnten Sie versuchen, das Title-Tag zu de-optimieren, indem Sie die Seitenzahl an den Anfang setzen:
Eine weitere Möglichkeit ist, Inhalte oberhalb/unterhalb des Produktrasters ab Seite 2 zu entfernen. Indem Sie Seite 1 zur wertvollsten Seite in der Sequenz machen, ist es wahrscheinlicher, dass Google sie in den Suchergebnissen anzeigt.
Neben Änderungen am Title-Tag und am Inhalt könnten Sie auch das H1-Tag auf der Seite ähnlich wie beim Beispiel für das Title-Tag de-optimieren.
6. Sorgen Sie für eine klare URL-Struktur
Sie können dies in der Praxis im SERP-Snippet oben sehen, example.com/furniture/scandi/page2, aber eine Sache, die Sie tun können, um es Google etwas einfacher zu machen, das Kategoriearchiv auf Ihrer Website zu verstehen, ist die Verwendung einer sauberen und leicht lesbaren URL-Struktur in einer Sequenz.
In der Praxis kann dies einfach durch Anhängen von /page/2/ an das Ende Ihrer Kategorie-URL erfolgen. Sie können auch Parameter wie ?page=2 verwenden und dann in der Google Search Console angeben, dass der Seitenparameter paginiert ist URL-Parameter-Tool.
Seit Google die Unterstützung von prev/next eingestellt hat, ist es definitiv wichtiger geworden, leicht verständlich zu machen, wann eine URL paginiert ist.