Stratégies de pagination SEO-friendly pour le commerce électronique
La pagination peut être un problème SEO délicat si elle est mal gérée. C’est particulièrement le cas pour un site de commerce électronique avec un grand nombre de produits qui dépendra sans aucun doute fortement de la pagination afin que les utilisateurs puissent trouver ce qu’ils recherchent.
Vous pouvez appliquer les concepts expliqués dans cet article à n’importe quelle implémentation de pagination, mais étant donné que les problèmes de pagination ont tendance à être plus fréquents sur les sites de commerce électronique , et que j’ai beaucoup d’expérience avec eux, je vais me concentrer sur ce domaine.
Nous allons commencer par :
Étapes à suivre pour garantir que la pagination du commerce électronique est conviviale pour la recherche
- 1. Soyez prudent avec JavaScript
- 2. Réfléchissez à deux fois aux boutons « Charger plus »
- 3. Utilisez une page « Tout afficher » pour aplatir votre structure de commerce électronique
- 4. Utilisez des balises canoniques auto-référencées
- 5. N’utilisez « noindex » que si vous y êtes vraiment obligé
- 5. Désoptimisez les pages paginées si nécessaire
- 6. Fournissez une structure d’URL claire
Qu’est-ce que la pagination ?
La pagination dans le contexte d’un site web est le séquençage des pages d’archives utilisées pour créer des liens vers d’autres pages situées plus bas dans la hiérarchie/structure d’un site. Les exemples les plus courants de ces types de pages se trouvent dans les pages de catégories de commerce électronique ou les pages d’archives de blog.
La pagination est un concept crucial à comprendre lorsqu’il s’agit d’améliorer la structure et le maillage interne de votre site, un concept sur lequel j’ai récemment écrit sur mon blog.
À quoi ressemble la pagination sur les sites de commerce électronique ?
Si vous n’êtes pas tout à fait sûr de ce à quoi ressemble la pagination, vous l’avez certainement déjà vue !
Les deux implémentations les plus courantes de la pagination se présentent sous la forme de boutons « Charger plus » et d’une séquence numérotée au bas de la page.
Les deux fonctionnent, mais l’utilisation d’un bouton « Charger plus » comporte quelques considérations supplémentaires que j’aborderai plus tard dans cet article.
Exemples de boutons de pagination « Charger plus » :
Superdry
Asos
Exemples de pagination à séquence numérotée :
AO (Appliances Online)
Argos
Le défilement infini est également une considération pour la navigation dans les archives. Cependant, cela devient moins populaire car des études ont montré qu’il a des implications négatives en matière d’UX, comme le fait de ne pas pouvoir atteindre facilement le pied de page d’une page.
Pourquoi devrais-je me concentrer sur la pagination ?
Des implémentations de pagination moins qu’optimales causent des problèmes graves, en particulier avec les sites web de commerce électronique. J’ai personnellement vu des problèmes de pagination causer une variété de problèmes, notamment :
- Des pages de produits orphelines (non liées en interne).
- Des structures de site inutilement profondes.
- Une réduction de l’exploration des séquences paginées.
Dans cet article, je vais passer en revue quelques points clés que vous devez comprendre sur la pagination pour vous assurer que votre site de commerce électronique l’implémente de manière conviviale pour la recherche.
1. Soyez prudent avec JavaScript
Utiliser JavaScript pour charger la page suivante de votre séquence paginée côté client sans rafraîchissement complet de la page est un excellent moyen d’offrir une expérience agréable à vos utilisateurs de commerce électronique.
Je suis un grand partisan de l’utilisation d’AJAX, et je vous recommande d’envisager de l’utiliser pour la pagination sur votre site. Cependant, vous devez être extrêmement prudent quant à la façon dont vous l’implémentez.
La pagination basée sur AJAX est très courante sur les sites de commerce électronique et, malheureusement, il est également très courant qu’elle soit implémentée de manière non SEO-friendly. Lorsqu’il s’agit d’implémenter la pagination via AJAX, le critère principal est de s’assurer que les liens href vers la page suivante de la séquence existent toujours.
Cela signifie que dans votre archive de produits, les liens vers les pages suivantes comme example.co.uk/shop/shoes/?page=2 devraient toujours être visibles dans le code source HTML de la page ou au moins dans le DOM créé par le navigateur.
Comment voir ce qu’il y a dans le DOM ?
La meilleure façon de voir ce que le navigateur a construit dans le DOM est d’ouvrir les outils de développement (généralement en appuyant sur F12) puis d’aller dans la section « Éléments » sur Chrome.
Ce qui est affiché ici sera différent de ce que vous voyez lorsque vous consultez la source, car cela montre ce que le navigateur a réellement rendu, y compris tout JavaScript qui a été exécuté.
Le lien est dans le DOM, mais pas dans le code source HTML
Sachez que Google peut ne pas toujours voir ces liens selon la rapidité avec laquelle la page s’affiche. Si vous voulez vérifier cela, je vous recommande de vous familiariser avec l’outil d’inspection d’URL.
de la Google Search Console.
Si vous ne pouvez voir ces liens dans aucun des deux, c’est parce que vous chargez très probablement la page deux et les suivantes de l’archive en utilisant JavaScript sans fournir d’alternative sans JavaScript, c’est-à-dire des liens href classiques. Si votre pagination fonctionne de cette façon, Google ne pourra pas voir la page suivante dans l’archive
. Cela se produit parce que Googlebot et d’autres robots de recherche ne cliqueront pas sur les éléments qui exécutent JavaScript de la même manière qu’un utilisateur. Ainsi, bien que les utilisateurs puissent bénéficier de la belle navigation basée sur AJAX pour votre pagination, Googlebot devra toujours être en mesure de naviguer vers la page 2 et les suivantes, chaque page de la séquence .
contenant une liste unique de produits sans chevauchement . Un exemple de site qui fait cela correctement est Argos. Sur leurs pages de catégories (comme celle-ci ci
), lorsque vous inspectez les éléments de leur pagination, vous pouvez voir des liens href vers chaque page de la séquence.
SOYEZ PRUDENT
Ces liens doivent idéalement être disponibles dans le code source HTML, et pas seulement visibles en inspectant l’élément. S’ils ne sont visibles que lorsque vous inspectez l’élément et que vous ne pouvez pas les voir dans le code source HTML, vous les injectez avec JavaScript, ce qui peut rendre moins probable que Google voie les liens. Sur le site d’Argos, vous pouvez voir qu’en cliquant sur le bouton qui renvoie à la page 2, aucun nouveau chargement de page n’est déclenché ; vous êtes plutôt ramené en haut de la page et tous les produits de la page 2 sont chargés. C’est le comportement que les utilisateurs verront, tandis que Google suivra le lien et sera dirigé vers .
cette page . Vous pouvez savoir que cela se fait via AJAX soit en utilisant un plugin qui surveille les requêtes d’en-tête HTTP du document comme celui-ci
, soit simplement en ouvrant l’onglet réseau dans les outils de développement Chrome et en vérifiant les requêtes « document » lorsque vous naviguez vers une page différente en utilisant la pagination. C’est un excellent exemple d’implémentation correcte de la pagination basée sur AJAX.
Ils utilisent même HTML5 history API pour mettre à jour l’URL, de sorte qu’il semble qu’il y ait eu un rafraîchissement complet de la page.
Bien que ce soit moins une exigence, je recommanderais également de mettre cela en œuvre avec un système de pagination basé sur AJAX. Vous pouvez voir un exemple de l’API d’historique en pratique créé par John Mueller avec une séquence combinée de défilement infini / pagination numérotée ici.
Si cela semble beaucoup à considérer, il existe des bibliothèques qui faciliteront ce processus, comme celle-ci une.
2. Réfléchissez à deux fois aux boutons “Charger plus”
Si, au lieu d’une pagination numérotée ou d’un défilement infini, vous optez pour l’approche du bouton “Charger plus”, vous devez également prendre en compte certains éléments supplémentaires.
En suivant les conseils précédents, même si vous avez ajouté le lien href sur le bouton “Charger plus”, vous rendez toujours votre site inutilement profond.
C’est parce que, contrairement à la pagination numérotée qui vous permet d’ajouter des liens profonds de la page 1 à la page 6 (par exemple), vous ne ferez que créer des liens de la page 1 à la page 2, puis de la page 2 à la page 3, et ainsi de suite.
Cela contribuera à ce que vous ayez une structure de site profonde car la profondeur de clic pour atteindre les pages de produits plus profondes dans le site augmente.
Cela aura un impact négatif sur la façon dont le capital de lien est distribué aux pages de produits plus profondes dans la hiérarchie du site. Cela aura, à son tour, un impact négatif sur la capacité de vos pages de produits à se classer pour des requêtes de recherche à longue traîne.
Pour contourner cela, ce que vous pourriez faire est d’implémenter à la fois un bouton “Charger plus” et une pagination numérotée. Vous obtenez ainsi les avantages UX d’un bouton “Charger plus”, mais vous permettez également aux utilisateurs de sauter à une page spécifique et laissez Google faire de même.
Un exemple de combinaison de bouton “Charger plus” et de pagination numérotée.
Cette option évite les problèmes causés par les boutons “Charger plus” en ce qui concerne la structure du site, et vous permet de profiter des avantages de la pagination numérotée.
La pagination numérotée raccourcit la profondeur de clic vers les pages paginées plus profondes dans votre archive.
Une autre alternative est d’implémenter la pagination numérotée mais de l’envelopper dans une balise <noscript>.
Cela signifie que lorsqu’un utilisateur a JavaScript désactivé, il verra la pagination numérotée et pourra naviguer sur le site en l’utilisant. L’inconvénient de cette option est qu’il n’est pas sûr à 100 % que Google examinera réellement le contenu à l’intérieur de la balise noscript.
La dernière mise à jour dont nous avons entendu parler est que Google a tendance à ignorer le contenu à l’intérieur d’un noscript, alors testez cela avec précaution.
Si vous ne souhaitez pas afficher à la fois le bouton “Charger plus” et la pagination numérotée, vous pourriez également implémenter la pagination numérotée sur la page comme dans la maquette ci-dessus, mais ajouter un display:none pour la masquer via CSS.
De cette façon, les liens sont dans le code source HTML mais masqués sur le frontend, donc Google devrait toujours voir les liens et les explorer comme d’habitude. Cependant, nous avons appris de la brevet Reasonable Surfer que Google semble aimer distribuer le PageRank en fonction de la probabilité qu’un lien soit cliqué.
Un système génère un modèle basé sur des données de caractéristiques relatives à différentes caractéristiques d’un lien d’un document liant vers un document lié et des données de comportement de l’utilisateur relatives aux actions de navigation associées au lien. Le système attribue également un rang à un document basé sur le modèle.
Bien que le brevet ne mentionne pas spécifiquement quoi que ce soit concernant les liens cachés, si vous allez masquer les liens avec CSS, procédez avec prudence et envisagez de tester l’impact sur l’exploration et les classements.
3. Utilisez une page “Tout voir” pour aplatir votre structure e-commerce
Un moyen de contourner toutes les complications liées à la pagination est de simplement faire en sorte que les pages de catégorie affichent tous les produits par défaut.
Si vous avez également des URL paginées préexistantes, vous pourriez mettre à jour les balises canoniques sur celles-ci pour pointer vers l’URL de votre nouvelle page “Tout voir”.
Cela a l’avantage de aplatir la structure de votre site car le nombre de clics pour accéder aux produits est réduit. Bien que cette approche soit excellente pour l’UX et le SEO, la seule complication est la vitesse du site.
Si vous avez un grand nombre de produits dans cette catégorie, vous pourriez augmenter massivement :
- Le HTML que le navigateur doit rendre.
- Le nombre d’images à charger.
- La taille de l’appel à la base de données.
Bien qu’une partie de cela puisse être contournée par le chargement différé des images et la mise en cache des pages/la livraison statique de votre site et le chargement des éléments dynamiques avec JS. Vous devez toujours effectuer des tests et surveiller de près pour vous assurer que les performances sont bonnes.
Comment puis-je tester l’impact sur la vitesse ?
- Si vous cherchez des conseils sur les tests de vitesse de site, consultez mon article sur certains des meilleurs outils de vitesse de site à utiliser.
- Si vous souhaitez mesurer l’impact de ce changement sur les utilisateurs, jetez un œil à mon modèle data studio qui utilise les données CrUX pour afficher des données utilisateur réelles sur la vitesse de votre site.
- Si vous cherchez des conseils pour améliorer la vitesse, consultez mon guide sur Semrush ici ou recherchez des conseils de haut niveau dans ma liste filtrable de conseils de vitesse de site.
Si vous constatez que l’approche “tout voir” ne fonctionne pas en raison de problèmes de vitesse, déterminez combien de produits vous incluez dans la page d’archive de catégorie avant que la vitesse ne devienne un problème.
Vous pouvez vérifier cela en augmentant progressivement le nombre de produits que vous avez visibles.
Cette technique est un excellent moyen pour les sites e-commerce d’améliorer le maillage interne car lorsque vous augmentez le nombre de produits sur une seule page d’archive de 12 à 24, vous avez effectivement réduit de moitié le nombre de pages paginées dans la séquence.
Bien que cela n’aplatisse pas autant la structure de votre site qu’une page “tout voir”, vous avez tout de même réussi à réduire la profondeur de clic pour atteindre les pages de produits.
Augmentez la vitesse de chargement, le trafic et la conversion de votre boutique en utilisant la collection “Increase Page Speed” dans Ecommerce Booster, l’application qui audite les boutiques Shopify et fournit un plan prêt à mettre en œuvre pour optimiser les pages de produits.
4. Utilisez des canoniques auto-référencées
Je n’entrerai pas trop dans les détails ici, mais une erreur courante lors de la configuration de la pagination est soit :
- Canoniser toutes les pages d’une séquence vers la première page.
- Noindex toute la pagination (plus de détails à ce sujet plus tard).
Au lieu de faire ces erreurs, ce que vous devriez faire dans une configuration de pagination standard est d’ajouter une canonique auto-référencée sur chaque page comme ci-dessous. Une erreur courante que je vois avec la pagination est que parfois le CMS peut également créer une page qui est /dresses/1/ qui est un doublon de /dresses/. Sur les grands sites avec beaucoup d’archives, cela peut causer des problèmes de duplication à grande échelle.
ru
Si c’est le cas, vous devriez canoniser l’URL en double /1/ vers la première page correcte de l’archive (/dresses/ dans cet exemple).
5. N’utilisez le Noindex que si vous y êtes vraiment obligé
Un problème fréquent rencontré sur les pages paginées est qu’elles contiennent inutilement la balise noindex.
Bien qu’il n’y ait pas toujours quelque chose de mal à ajouter une balise noindex aux pages de pagination, faire cela pourrait réduire la fréquence de crawl.
En gros, nous essaierons de crawler quelques fois de plus pour voir si le noindex a disparu ou si la page s’est remise d’une erreur 500 ou autre, et si le noindex est toujours là, alors nous commencerons lentement à nous déplacer ou à ne pas crawler cette page aussi souvent.
Idéalement, chaque page devrait être précieuse au sein de la séquence, et vous devriez inclure des balises canoniques auto-référencées sur chacune d’elles dans l’archive en conséquence.
Cependant, il existe des scénarios où une balise noindex sur des pages paginées a du sens. Nous avons récemment entendu cet avis de John Mueller sur l’ajout de la balise noindex sur les pages paginées :
… au final, je pense que cela se résume surtout à : « cette page dans la série paginée apporte-t-elle de la joie ? » et si non, alors mettez-la simplement en noindex.
Certains sites estiment que toutes les pages d’une série paginée sont importantes, ils les gardent donc indexées (les sites sophistiqués utilisant rel-next/prev). Certains sites limitent les séries paginées à un certain nombre, laissant peut-être la première être indexée, et le reste non.
La décision est parfois aussi basée sur le contenu de la série paginée. Par exemple, s’il s’agit d’une liste de pages de détails liées, alors vous pourriez décider selon que vous pouvez ou non atteindre toutes les pages même si vous n’avez pas l’ensemble paginé complet indexé (si vous faites des liens croisés vers des articles/produits connexes, alors c’est généralement le cas).
Donc, pour résumer :
- Essayez de rendre les pages paginées aussi précieuses que possible.
- Si vous estimez qu’elles ne sont pas précieuses pour les utilisateurs, mettez-les en noindex, mais sachez que cela pourrait réduire leur fréquence de crawl.
- Si vous décidez de mettre en noindex, considérez s’il existe des chemins de crawl alternatifs pour trouver ces produits listés sur la page noindexée, par exemple via d’autres catégories ou filtres.
- Dans la majorité des cas, vous voudrez utiliser des balises canoniques auto-référencées et non la balise noindex.
Une raison courante pour laquelle les gens ont tendance à mettre en noindex la page 2 et les suivantes d’une archive est qu’ils ont vu Google montrer la mauvaise page aux utilisateurs, comme la page 4 plutôt que la première page. Cela nous amène au conseil 5.
5. Désoptimisez les pages paginées si nécessaire
Si vous ne voulez pas que Google affiche la page 2 et les suivantes de vos archives de catégories mais que vous voulez les laisser indexées, une chose que vous pourriez essayer est de les désoptimiser pour les requêtes de recherche.
Il y a quelques choses que vous pouvez faire ici.
Premièrement, vous pourriez essayer de désoptimiser la balise title en ajoutant le numéro de page au début de celle-ci :
Une autre chose que vous pouvez faire est de supprimer le contenu au-dessus/en dessous de la grille de produits à partir de la page 2. En faisant de la page 1 la page la plus précieuse de la séquence, Google est plus susceptible de l’afficher dans les résultats de recherche.
Parallèlement aux changements de balise title et de contenu, vous pourriez également désoptimiser la balise H1 sur la page de manière similaire à l’exemple de balise title ci-dessus.
6. Fournissez une structure d’URL claire
Vous pouvez voir cela en pratique dans l’extrait SERP ci-dessus, example.com/furniture/scandi/page2, mais une chose que vous pouvez faire pour faciliter un peu la compréhension de l’archive de catégorie sur votre site par Google est d’utiliser une structure d’URL propre et facilement lisible dans une séquence.
En pratique, cela peut être fait simplement en ajoutant /page/2/ à la fin de l’URL de votre catégorie. Vous pouvez également utiliser des paramètres tels que ?page=2 puis spécifier que le paramètre de page pagine dans la Google Search Console outil de paramètres d’URL.
Depuis que Google a abandonné le support de prev/next, il est devenu définitivement plus important de rendre facile la compréhension du moment où une URL est paginée.
Service associé: E-commerce