manuboss
La pagination peut être un problème de référencement délicat lorsque vous vous trompez. C’est particulièrement le cas pour un site de commerce électronique avec un grand nombre de produits qui s’appuieront sans doute fortement sur la pagination pour que les utilisateurs puissent trouver ce qu’ils recherchent.
Vous pouvez appliquer les concepts expliqués dans cet article à toutes les implémentations de pagination n’importe où, mais étant donné que les problèmes de pagination ont tendance à être plus répandus sur les sites de commerce électronique, et 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 facile à rechercher
Qu’est-ce que la pagination?
La pagination dans le contexte d’un site Web est le séquencement des pages d’archives qui sont utilisées pour créer des liens vers d’autres pages trouvé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égorie de commerce électronique ou les pages d’archive de blog.
La pagination est un concept crucial pour comprendre quand il s’agit d’améliorer la structure et les liens internes 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 ne savez pas à 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 de chargement supplémentaires et d’une séquence numérotée en bas de la page.
Les deux fonctionnent, mais l’utilisation d’un bouton Charger plus a quelques considérations supplémentaires que j’explorerai plus loin dans cet article.
Charger plus d’exemples de boutons de pagination:
Très sec
Asos
Exemples de pagination de 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 effets négatifs Implications UX, comme le fait de ne pas pouvoir accéder facilement au pied de page d’une page.
Pourquoi devrais-je me concentrer sur la pagination?
Des implémentations moins qu’optimales de la pagination provoquent problèmes graves, en particulier avec les sites de commerce électronique. J’ai personnellement vu des problèmes de pagination causer divers problèmes, notamment:
- Les pages produits sont orphelines (sans lien interne).
- Inutilement structures de site profondes.
- Réduction de l’exploration des séquences paginées.
Dans cet article, je vais passer en revue quelques éléments clés que vous devez comprendre à propos de la pagination pour vous assurer que votre site de commerce électronique le met en œuvre de manière conviviale pour la recherche.
1. Soyez prudent avec JavaScript
L’utilisation de JavaScript pour charger la page suivante dans votre séquence client paginée sans actualisation complète de la page est un excellent moyen de fournir une expérience agréable à vos utilisateurs de commerce électronique.
Je suis un grand défenseur 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 avec la façon dont vous implémentez cela.
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 mise en œuvre de manière non conviviale pour le référencement. Lorsqu’il s’agit de mettre en œuvre la pagination via AJAX, le critère principal est de s’assurer que le les liens href vers la page suivante de la séquence existent toujours.
Cela signifie que dans vos archives de produits, les liens vers les pages suivantes telles que example.co.uk/shop/shoes/?page=2 doivent toujours être visibles dans la source HTML de la page ou à tout le moins au sein du DOM créé par le navigateur.
Comment puis-je voir ce qui se trouve 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 de vous diriger vers la section « Éléments » sur Chrome.
Ce qui est affiché ici sera différent de ce que vous voyez lors de la visualisation de 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 le DOM, mais pas la source HTML
Sachez que Google peut ne pas toujours voir ces liens en fonction de la vitesse à laquelle la page s’affiche. Si vous voulez vérifier cela, je vous recommande de vous familiariser avec la Google Search Console Outil d’inspection d’URL.
Si vous ne pouvez pas voir ces liens à l’intérieur non plus, c’est parce que vous chargez plus que probablement la page deux à partir de l’archive en utilisant JavaScript sans fournir une alternative non 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 car Googlebot et les autres robots de recherche ne cliquent pas sur les éléments qui exécutent JavaScript de la même manière qu’un utilisateur.
Ainsi, alors que les utilisateurs peuvent obtenir la navigation agréable basée sur AJAX pour votre pagination, Googlebot devra toujours être en mesure de naviguer vers la page 2 avec chaque page de la séquence contenant une liste unique de produits sans chevauchements.
Argos est un exemple de site qui fait cela correctement. Sur leurs pages de catégorie (comme celle-ci une), lorsque vous inspectez les éléments sur leur pagination, vous pouvez voir les liens href vers chaque page de la séquence.
ÊTRE CONSCIENT
Ces liens doivent idéalement être disponibles dans la source HTML, 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 la source HTML, vous allez leur injecter du JavaScript, ce qui peut rendre moins probable pour Google de voir les liens.
Sur le site Argos, vous pouvez voir qu’en cliquant sur le bouton qui renvoie à la page 2, une nouvelle page, le chargement n’est pas déclenché; vous êtes plutôt renvoyé 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 redirigé vers cette page.
Vous pouvez dire que cela se fait via AJAX en utilisant un plugin qui surveille les demandes d’en-tête HTTP de document comme celui-là ou en ouvrant simplement l’onglet réseau dans les outils de développement Chrome et en vérifiant les demandes de «document» lorsque vous accédez à une autre page à l’aide de la pagination.
Ceci est un excellent exemple de mise en œuvre correcte de la pagination basée sur AJAX.
Ils utilisent également pushState du API d’historique HTML5 pour mettre à jour l’URL, il semble donc qu’il y ait eu une actualisation complète de la page.
Bien que moins obligatoire, je recommanderais également de l’implémenter avec un système de pagination basé sur AJAX. Vous pouvez voir un exemple de l’API historique en pratique créée 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 celui-ci une.
2. Réfléchissez deux fois au chargement de boutons supplémentaires
Si, au lieu d’une pagination numérotée ou d’un défilement infini, vous optez pour l’approche de chargement de plus de boutons, vous devez également prendre en compte des éléments supplémentaires.
En suivant les conseils précédents, même si vous avez ajouté le lien href sur le chargement plus, vous rendez votre site inutilement profond.
En effet, contrairement à la pagination numérotée qui vous permet d’ajouter des liens profonds de la page 1 à 6 (par exemple), vous ne lierez que de la page 1 à la page 2 puis de la page 2 à la page 3 et ainsi de suite.
Cela vous permettra d’avoir un structure profonde du site à mesure que la profondeur de clic pour atteindre les pages de produits plus profondément dans le site augmente.
Cela va avoir un impact négatif sur la façon dont l’équité des liens est distribuée vers les pages de produits plus profondément dans la hiérarchie du site. Cela aura, à son tour, un impact négatif sur la qualité de classement de vos pages produits. requêtes de recherche à longue queue.
Pour contourner cela, vous pouvez implémenter à la fois une charge plus et une pagination numérotée. Ensuite, vous bénéficiez des avantages UX d’un bouton Charger plus, mais vous permettez également aux utilisateurs d’accéder à une page spécifique et de laisser Google faire de même.
Cette option évite les problèmes causés par le chargement de plus de boutons en ce qui concerne la structure du site et vous permet de profiter des avantages de la pagination numérotée.
Une autre alternative est de mettre en œuvre la pagination numérotée mais envelopper dans un
Cela signifie que lorsqu’un utilisateur a désactivé JavaScript, il verra alors la pagination numérotée et pourra naviguer sur le site en utilisant cela. L’inconvénient de cette option est qu’il n’est pas certain à 100% que Google examinera réellement le contenu de la balise noscript.
La dernière mise à jour que nous avons entendu, Google a tendance à ignorer le contenu dans un noscript, alors testez-le attentivement.
Nous ignorons généralement noscript pour le contenu, mais je suis curieux de savoir ce que vous voyez 🙂
– 🍌 John 🍌 (@JohnMu) 11 octobre 2018
Si vous ne souhaitez pas afficher à la fois le bouton Charger plus et la pagination numérotée, vous pouvez également implémenter la pagination numérotée sur la page comme dans la maquette ci-dessus, mais ajouter un affichage: aucun pour le masquer via CSS.
De cette façon, les liens sont dans la source HTML mais cachés sur le frontend, donc Google devrait voir toujours les liens et les explorer normalement. Cependant, nous avons appris de la Brevet de surfeur raisonnable 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 de liaison à un document lié et des données de comportement d’utilisateur relatives aux actions de navigation associées au lien. Le système attribue également un rang à un document en fonction du modèle.
Bien que le brevet ne mentionne spécifiquement rien à voir avec les liens cachés, si vous souhaitez masquer les liens avec CSS, procédez avec prudence et envisagez de tester l’impact sur l’exploration et le classement.
3. Utilisez une page Tout afficher pour aplatir votre structure de commerce électronique
Une façon de contourner toutes les complications de la pagination consiste simplement à avoir les pages de catégories montrant tous les produits par défaut.
Si vous avez également des URL paginées préexistantes, vous pouvez mettre à jour les balises canoniques sur celles-ci pour pointer vers votre nouvelle URL de visualisation de toutes les pages.
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 UX et SEO, la seule complication est vitesse du site.
Si vous avez un grand nombre de produits dans cette catégorie. vous pourriez augmenter massivement:
- Le code HTML que le navigateur doit rendre.
- Le nombre d’images à charger.
- La taille de l’appel à la base de données.
Bien que certains de ces problèmes puissent être contournés par images de chargement paresseux et la mise en cache des pages / la livraison statique de votre site et le chargement d’éléments dynamiques avec JS. Vous devez toujours faire des tests et surveiller de près pour vous assurer que les performances sont bonnes.
Comment puis-je tester l’impact de la vitesse?
- Si vous cherchez des conseils sur les tests de vitesse sur 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 de studio de données qui utilise des données CrUX pour afficher de vraies données utilisateur sur la vitesse de votre site.
- Si vous cherchez des conseils sur l’amélioration de la vitesse, consultez mon guide sur SEMrush ici ou recherchez des conseils de haut niveau sur ma liste filtrable de conseils de vitesse de site.
Si vous trouvez que l’approche de la vue globale ne fonctionne pas en raison de problèmes de vitesse, déterminez le nombre de produits que vous incluez dans la page d’archivage des catégories avant que la vitesse ne devienne un problème.
Vous pouvez le vérifier en augmentant progressivement le nombre de produits que vous avez visibles.
Cette technique est un excellent moyen pour les sites de commerce électronique d’améliorer les liens internes, car lorsque vous augmentez le nombre de produits sur une seule page d’archivage de 12 à 24, vous avez effectivement réduit de moitié le nombre de pages paginées dans la séquence.
Même si cela n’aplatit pas la structure de votre site autant qu’une vue de toutes les pages, vous avez quand même réussi à réduire le nombre de clics pour atteindre les pages de produits.
4. Utilisez des canoniques auto-référencés
Je n’entrerai pas dans trop de détails ici, mais une erreur courante lors de la configuration de la pagination consiste à:
- Canonicalise toutes les pages d’une séquence jusqu’à la première page.
- Noindex all 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 un auto-référencement canonique sur chaque page comme ci-dessous.
Une erreur courante que je vois avec la pagination est parfois que le CMS peut également créer une page qui est / robes / 1 / qui est un doublon de / robes /. Sur les grands sites avec beaucoup d’archives, cela peut entraîner des problèmes de duplication à grande échelle.
Si tel est le cas, vous devriez canoniser le / 1 / URL en double vers la première page correcte de l’archive (/ robes / dans cet exemple).
5. Seulement Noindex si vous devez vraiment
Un problème fréquent trouvé sur les pages paginées est qu’elles contiennent la balise noindex inutilement.
Bien qu’il n’y ait pas toujours quelque chose de mal à ajouter une balise noindex aux pages de pagination, cela pourrait réduire la fréquence d’exploration.
Fondamentalement, nous essaierons d’explorer quelques fois de plus pour voir si le noindex a disparu ou si la page a récupéré à partir d’un 500 ou autre, et si le noindex est toujours là, alors nous commencerons lentement à déplacer ou à ne pas explorer cette page si souvent.
Idéalement, chaque page doit être utile dans la séquence, et vous devez inclure canoniques auto-référencés en conséquence sur chacun dans l’archive.
Cependant, il existe des scénarios où une balise noindex sur les pages paginées est logique. Nous avons récemment entendu cette idée de John Mueller sur l’ajout de la balise noindex sur les pages paginées:
… au final, je pense que cela se résume principalement à: « Est-ce que cette page de la série paginée apporte de la joie? » et sinon, il suffit de ne pas l’indexer.
Certains sites estiment que toutes les pages d’une série paginée sont importantes, ils les gardent donc indexés (les plus sophistiqués utilisant rel-next / prev). Certains sites plafonnent les séries paginées à un certain nombre, laissant peut-être le premier être indexé, et les autres non.
La décision est également parfois 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, vous pouvez décider si vous pouvez ou non accéder à toutes les pages même si vous n’avez pas l’index complet paginé indexé (si vous rétablissez des liens vers des articles / produits associés, 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 pensez qu’ils ne sont pas utiles aux utilisateurs, ne les indexez pas, mais sachez que cela pourrait réduire la fréquence à laquelle ils sont explorés.
- Si vous décidez de ne pas indexer, examinez s’il existe d’autres chemins d’exploration pour trouver ces produits répertoriés sur la page noindexée, par exemple via d’autres catégories ou filtres.
- Dans la majorité des cas, vous voudrez utiliser des canoniques auto-référencés et non la balise noindex.
Une raison courante pour laquelle les gens ont tendance à ne pas indexer la page 2 à partir d’une archive est qu’ils ont vu Google montrer la page incorrecte aux utilisateurs, comme la page 4 plutôt que la première page. Cela nous amène à l’astuce 5.
5. Désoptimisez les pages paginées si nécessaire
Si vous ne voulez pas que Google fasse apparaître la page 2 à partir des archives de votre catégorie, mais que vous souhaitez les laisser indexées, vous pouvez essayer de les désoptimiser pour les requêtes de recherche.
Il y a quelques choses que vous pouvez faire ici.
Tout d’abord, vous pouvez essayer de désoptimiser la balise de titre en ajoutant le numéro de page au début:
Vous pouvez également 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 utile de la séquence, Google est plus susceptible de l’afficher dans les résultats de recherche.
Parallèlement à la balise de titre et aux modifications de contenu, vous pouvez également désoptimiser la balise H1 sur la page d’une manière similaire à l’exemple de balise de titre ci-dessus.
6. Fournissez une structure URL claire
Vous pouvez le voir dans la pratique dans l’extrait de SERP ci-dessus – example.com/furniture/scandi/page2 – mais une chose que vous pouvez faire pour que Google comprenne un peu plus facilement les archives de catégorie sur votre site est d’utiliser propre et facilement structure URL lisible dans une séquence.
En pratique, cela peut être fait en ajoutant simplement / 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 la pagination des paramètres de page dans la Google Search Console Outil de paramètre d’URL.
Depuis Google a abandonné le support de prev / next, ce qui facilite la compréhension de la pagination d’une URL est définitivement devenu plus important.
Nettoyage de printemps!
Après avoir évalué nos signaux d’indexation, nous avons décidé de retirer rel = prev / next.
Des études montrent que les utilisateurs aiment le contenu d’une seule page, visez-le lorsque cela est possible, mais le multi-partie convient également à la recherche Google. Sachez et faites ce qui est le mieux pour * vos * utilisateurs! #le printemps arrive pic.twitter.com/hCODPoKgKp– Google Webmasters (@googlewmc) 21 mars 2019
Pour résumer
J’espère que cet article vous a donné un aperçu de ce que vous devriez considérer lorsqu’il s’agit d’optimiser vos archives paginées pour optimiser la recherche et fournir une meilleure expérience utilisateur de commerce électronique.
Avez-vous des questions sans réponse sur la meilleure façon d’optimiser votre pagination pour atténuer les problèmes techniques et améliorer la structure du site? Commentez ci-dessous ou tweetez-moi à @SamUnderwoodUKEt je ferai de mon mieux pour vous aider!
