La pagination SEO avec rel prev et next – tutoriel

rel prev et nextSi vous avez un site web, notamment si il affiche un grand nombre d’articles/produits, vous avez peut-être été contraint à scinder vos pages de catégories en y ajoutant une pagination. La première page contenant par exemple dix produits et faisant des liens vers les pages 2,3, etc… pour consulter le reste des produits.

 

La problématique

 

Et bien figurez-vous que ça déplaît à notre moteur de recherche préféré pour au moins une raison, c’est qu’ils disent [les tech de chez Google] ne pas pouvoir définir avec pertinence une page à servir parmi toutes vos pages paginées. Au fond, je les comprends, elles sont sensées toutes parler du même sujet plus ou moins, et parfois les termes de la recherche sont présents dans toutes ces pages à la fois, alors la quelle choisir? Ils pourraient très bien décider d’afficher la page 59 par exemple, mais je suis sur que vous préféreriez que les internautes tombent sur la page 1! C’est pourquoi référencement et pagination peuvent et doivent aller de paire.

 

Les solutions

 

C’est pourquoi les petites fourmis de chez Gg ont bien planché et ils nous proposent non pas une, ni deux mais bien trois solutions pour tout arranger, ils sont au top à Mountain View. Voici les solutions proposées :

  1. Ne rien faire… je vous l’accorde pour celle-là ils n’ont pas du plancher bien longtemps. Je ne la conseille pas, on fait de la SEO ou pas.
  2. N’utiliser qu’une page pour regrouper tous les produits similaires, même si celle-ci est de taille importante. Je ne la conseille pas non plus, surtout si vous avez beaucoup d’articles. Vous vous rendez compte avec 1000 articles, la page mettrai un temps fou à vous être restitué à l’écran. Et n’oublions pas non plus que la performance de nos chères sites est très importante pour notre fameux ami.
  3. Utiliser une pagination et les attributs rel=’next’ et rel=’prev’ de la balise HTML, <link />. Ahhh… c’est là que ça devient intéressant.

Ces solutions sont proposées dans la vidéo qui suit par une certaine Maile Ohye (googler). Malheureusement cette vidéo est en anglais, je vais donc en faire un résumé ici et rentrer un peu dans les détails.

 

 

Le cas rel=’next’ et rel=’prev’

 

Le concept n’est pas très compliqué et peut réellement apporter un véritable plus en termes de SEO, ayant moi-même fait l’expérience en ressortant du gouffre plusieurs sites qui avaient été déclassées. Mais avant tout commençons par voir ce qu’il ne faut pas faire.

Ce qu’il ne faut pas faire, c’est mal

  1. J’ai trop souvent vu des sites paginées où les responsables avaient placé une balise <link rel=’canonical’  href=’exemple.com/page1′ />, par exemple, sur toutes les pages paginées de leur site en pensant qu’ils indiquaient à Google que la page en cours fait référence à la page 1 de la série. FAUX. Vous indiquez juste à Google que le vrai contenu de la page en cours est en fait en page 1 et que la page en cours n’est là que pour faire joli! Vous imaginez le désastre au niveau référencement?!? Donc attention avec rel=’cononical’ ça ne sert pas à ça, on y reviendra dans cet article car elle sert quand même, vous verrez.
  2. Ne pas mettre rel=’next’ et rel=’prev’ dans la balise <a></a> des liens de votre pagination. J’en vois un qui rit au fond, c’est pas drôle, beaucoup font cette erreur, même plus que vous ne le pensez. NON, rel=’next’ et rel=’prev’ s’utilisent uniquement dans la balise <link /> et seulement dans le <head></head> de vos pages et surtout pas de <link /> dans le <body></body> malheureux!!!

 La bonne pratique, c’est bien

Une fois ces confusions écartées on peut rentrer dans le code. nous allons imaginer le cas de figure où nous avons une catégorie de 35 articles et nous avons choisi de les afficher au nombre de 10 par page. Ce qui nous fait un total, attendez que je prenne ma calculette, voila… un total de 4 pages, piewh…

Dans chaque page il y aura une ou deux balises <link /> avec rel=’next’ et/ou rel=’prev’. La page 1, par exemple contiendra dans le <head></head>, oui j’insiste je sais, une balise qui pourrait ressembler à ça

(ah oui, j’ai oublié de vous préciser que nos produits sont des articles de BatMan, c’est vraiment sans importance mais j’y tiens…). Bien sur pas de balise avec rel=’prev’ pour les raisons que vous imaginez.

Dans la deuxième page il y aura deux balises cette fois-ci

Dans la page 3, pareil deux balises

et enfin en quatrième page qu’une balise vers la page 3, ainsi

 

 

Vous l’aurez compris c’est pas compliqué, c’est même enfantin mais offre une structure très ordonnée de vos données.

 

Et rel=’canonical’ alors

 

On peut aller un peu plus loin en ajoutant dans chaque page une balise <link /> avec rel=’canonical’, mais attention pas de référence  à la page 1, surtout pas. Ca va donner, en reprenant notre exemple à ça :

Page 1 

Page 2

Page 3

et Page 4

 

En gros on indique aux moteurs de recherche que nos pages ont bien un contenu unique, une url canonique et que la page d’affichage la plus propice est la page 1, tout en prenant soin de faire indexer la totalité de ses articles de Batman. Car ça c’est important de bien référencer vos produits, non?

 

Conclusion

 

Nous savons maintenant comment bien utiliser la pagination, reste plus qu’a appliquer sur vos sites en prenant le temps nécessaire pour ne pas faire de gaffes.

Si vous voulez voir un exemple en live de ce tutoriel regardez le code source de ce site de vente de commerce que j’audite et webmasterise. Ce site utilise cette technique depuis plus d’un an et demi déjà et je peux vous garantir que j’ai aucun souci de double content ou quoi que ce soit d’autre de relatif à notre problématique.

 

J’espère vous avoir aidé à bien comprendre la pagination avec next et prev et surtout que je ne vous ai pas trop ennuyé avec mes blagues foireuses. Si tel est le cas merci de partager largement cet article sur votre réseau social préféré, un like, un + sont toujours bien venus 😉

Vous pouvez aussi vous abonner à mes flux Google+, Twitter, FaceBook ou RSS sur ce blog.

@ bientôt…

4 réponses à La pagination SEO avec rel prev et next – tutoriel

  1.  
  2.  
  3. Bonjour et merci pour ce tuto clair et pertinent.

    Cependant j’ai une question concernant l’usage de la balise canonical en plus des balises rel next. En gros tu mets une balise canonical avec un lien vers la page courante ? Quel en est l’utilité ?

    Merci d’avance

     
    • Bonjour et merci d’avoir lu mon article sur le référencement naturel (j’en profite un peu pour tariner 😉 ).
      L’utilité est de spécifier aux moteurs de recherche (notamment google) que la page que leur bot est en train de traiter et celle qui fait référence, l’url est canonique. En gros c’est celle qu’il devrait indexer.
      @+

       

Laisser un commentaire