Rich Snippets et Référencement WordPress

J’avais commencé à vous parler des Rich Snippets (extraits enrichis) dans mon article sur les conséquences de Google Plus et de l’Authorship sur le référencement, et je vous avais promis que je vous expliquerai comment afficher des petites étoiles dans Google.

Mais en fait je vais vous expliquer plus que ça. Il est possible d’afficher une multitude d’informations supplémentaires sur votre contenu directement dans les moteurs de recherche, grâce aux données structurées (qui sont en fait quelques petits bouts de code HTML pas bien complqués à mettre en place). Il existe plusieurs formats de balisage mais Google (Yahoo et Bing aussi) recommande de suivre les indications de schema.org où tout est expliqué avec de nombreux exemples.

Il est ainsi possible de donner des informations spécifiques à Google, au moment où il visite votre page pour l’indéxer, afin qu’il les affiche dans ses résultats de recherche.

Et ces informations sont nombreuses : cela peut être une note qui correspond par exemple aux avis des joueurs d’un jeu vidéo ; une durée qui correspond au temps de cuisson d’une recette de cuisine ; une date et un lieu pour situer un événement ; un nom et un surnom pour présenter un auteur ; une marque, un prix et une disponibilité pour présenter un produit…

Ces données enrichissent les informations contenues dans les résultats des moteurs de recherche et permettent de mieux renseigner le visiteur potentiel sur le contenu de votre article.

Visuellement, le résultat est beaucoup plus engageant, et permet de transformer plus facilement l’impression en visite. Il paraît qu’un résultat qui arrive en troisième ou quatrième position dans les résultats de recherche peut canaliser autant de clics que les résultats au dessus de lui s’ils ne sont pas enrichis.

Comment ajouter les rich snippets avec WordPress ?

Et bien soit vous mettez les mains dans le code, soit vous téléchargez un plugin.

J’ai fait quelques tests, et je les partage avec vous.

Les Plugins WordPress pour Rich Snippets

Des petites étoiles dans Google

J’ai commencé par un petit plugin de votes bien sympa pour WordPress : KK Star Ratings qui ajoute un petit module de notation sur cinq étoiles à vos articles. Vos lecteurs pourront noter vos publications et la note moyenne apparaîtra sous forme d’étoiles dans les résultats de recherche de Google ; un gros plus pour votre visibilté qui vous permettra d’augmenter votre taux de clics par impressions.

Voici ce que ça donne pour mon Test de Pure Chess par exemple :

étoiles-google
Des étoiles dans les yeux

Le plugin WordPress KK Star Ratings est très simple à installer, très simple à configurer, et il jouera bien son rôle : afficher des petites étoiles dans Google. Mais attention à l’utiliser correctement, c’est à dire pas comme moi. J’utilise KK Star ratings comme un module de notation mes articles, or ces petites étoiles devraient servir à noter un produit ou un logiciel, et non pas un article.

D’ailleurs, le plugin KK Star Rating ajoute simplement un bouton sur votre éditeur d’articles qui permet d’ajouter les petites étoiles de notation. Cela permet de n’ajouter le module de vote uniquement sur les articles qui présentent quelque chose à noter.

Le module de vote de KK STar Ratings ne s’affiche donc pas tout seul sous vos articles. Pour cela il faut ajouter ce bout de code dans le fichier single.php de votre thème :

<?php if(function_exists("kk_star_ratings")) : echo kk_star_ratings($pid); endif; ?>

A noter que ce plugin ne gère que l’apparition des étoiles dans Google.

Des extraits enrichis précis sur votre contenu

Si vous souhaitez ajouter un plugin plus complet pour la gestion des Rich Snippets en fonction des articles que vous publiez, je vous recommande un de ces deux plugins :

Ce plugin ajoute sous l’éditeur de vos articles une boîte qui permet de sélectionner le type d’extraits enrichis que vous souhaitez ajouter. Par exemple si je publie un article à propos d’un événement à venir, le plugin me demandera de remplir les champs date, lieu, etc, et il s’occupera de baliser les informations à ma place.

Les moteurs de recherche afficheront alors ces informations directement dans leurs SERPs.

Vous pouvez aussi rechercher le plugin qui vous convient le mieux pour l’utilisation que vous voulez faire des Rich Snippets dans la liste des plugins WordPress.

Baliser soi-même son code pour ajouter des extraits enrichis

Si vous êtes motivé pour enrichir vos données à la main, commencez d’abord par lire cette page d’explication en français fournie par Google. Vous trouverez tout le vocabulaire nécessaire au balisage de votre code sur schema.org.

Je vous donne ici un exemple simple celui d’un avis (review) sur un jeu vidéo.

<div>
  <div itemscope itemtype="http://data-vocabulary.org/Review">
    <span itemprop="itemreviewed">A Link Between Worlds</span>
    Avis rédigé par <span itemprop="reviewer">Link Tothepast</span> le
    2 décembre.
    Nintendo fait vibrer la corde de la nostalgie</span>
    A Link Between Worlds est un Zelda magnifique !
    La 3DS nous offre un jeu exceptionnel, un Zelda qu'on attendait depuis longtemps. 
    Note : <span itemprop="rating">4,5</span>
  </div>
</div>

Dans ce code, on informe les moteurs de recherche du titre de l’objet pour lequel on donne un avis (itemreviewed), du nom de la personne qui donne un avis (reviewer), et de la note donnée par l’auteur (rating).

Comme je vous l’expliquais, il existe bien d’autres attributs pour enrichir vos extraits selon le type de contenu que vous publiez. Si vous avez un blog de cuisine, les microdonnées vous permettront de baliser des informations sur vos recettes comme le temps de préparation, le temps de cuisson, la valeur énergétique, la liste des ingrédients de la recette…

Je ne vais pas rentrer plus dans le détail, mais je vais vous laisser quelques liens supplémentaires comme cet article de Adviso ou celui-ci de Intestable.

Je vous laisse aussi cet excellent article de SEOmix : Microformats, Microdatas et WordPress qui explique de manière complète comment baliser votre site WordPress.

Optimiser son fil d’ariane avec les Rich Snippets

Voici un autre truc sur lequel je me suis pas mal pris la tête alors que c’est pourtant très simple à mettre en place : ajouter des extraits enrichis à son fil d’ariane.

Quelques explications

Pour rappel : le fil d’ariane c’est cette petite suite de liens qui indique à vos visiteurs où il se trouve sur votre site.

Ici, au dessus de cet article, vous devez lire :

Accueil > Internet > Rich Snippets et Référencement WordPress

Je vous en avais parlé sur cet article optimiser son thème WordPress pour le référencement, avoir un fil d’ariane est une très bonne chose, mais l’enrichir avec des microdatas vous permettra de l’afficher dans les résultats de recherche, à la place de l’url de l’article.

Voici un exemple illustré : en haut le format classique, en bas le format avec fil d’ariane optimisé par les microdonnées.

rich-snippets-fil-d-ariane
Fil d’ariane et extraits enrichis

Je n’utilise pas de sous-catégories, je n’ai donc qu’une seule catégorie qui s’affiche dans le résultat correspondant à mon article. Cette catégorie peut être cliquée et conduire à la liste de tous mes articles de la catégorie correspondante.

Mais si vous utilisez des sous-catégories, il est possible d’afficher plusieurs liens, par exemple :

www.link-tothepast.com > Internet > WordPress > Référencement

Baliser son fil d’ariane avec les microdatas

Vous allez voir que c’est très simple, enfin en tout cas le HTML est très simple à comprendre (peut-être un peu chiant à mettre en place dans le PHP de votre fil d’ariane).

Voici le code HTML original de mon fil d’ariane :

<p>Vous êtes ici:</p><p><a href="http://www.link-tothepast.com/"  title="Link-Tothepast">Accueil</a> &raquo; </p>
<p><a href="http://www.link-tothepast.com/category/internet/" title="Voir tous les articles dans Internet">Internet</a> &raquo; </p>
<p><a href="http://www.link-tothepast.com/2013/12/rich-snippets-referencement-wordpress/">Rich Snippets et référencement WordPress</a></p>

Et voici ce même code HTML, balisé avec les microdatas :

<p>Vous êtes ici:</p>
  <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <p><a href="http://www.link-tothepast.com/"  title="Link-Tothepast" itemprop="url"><span itemprop="title">Accueil</span></a> &raquo; 
    </p>
  </div>
  <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <p><a href="http://www.link-tothepast.com/category/internet/" title="Voir tous les articles dans Internet" itemprop="url"  ><span itemprop="title">Internet</span></a> &raquo; 
    </p>
  </div>
  <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <p><a href="http://www.link-tothepast.com/2013/12/rich-snippets-referencement-wordpress/" itemprop="url"><span itemprop="title">Rich Snippets et référencement WordPress</span></a>
    </p>
  </div>

Il faut simplement ajouter la div itemscope itemtype et l’attribut itemprop= »url » sur chaque lien, et le span itemprop= »title » sur le texte de chaque lien.

Pour aller plus loin, voici les explications données par Google (en français) : Extraits enrichis, rubriques de fil d’ariane.

J’ai tout bien balisé mais mes extraits enrichis n’apparaissent pas dans Google ?

Oui c’est possible. Même si votre code est irréprochable, Google n’affiche pas toujours les extraits enrichis dans ses résultats.

Sur quels critères se base le moteur de recherche pour les afficher ou non ? Mystère.

Est-ce que les extraits enrichis contribuent à améliorer votre position dans Google ? Encore une fois mystère…

Google précise qu’il n’affiche pas nécessairement les Rich Snippets dans ses SERPs, et qu’il ne se justifiera pas sur la question – (comme d’hab quoi…)

Quel avenir pour les Rich Snippets ?

L’avenir des Rich Snippets est plutôt flou et pour plusieurs raisons.

Tout d’abord, les standards de balisage sont susceptibles d’évoluer.

Ensuite, Google a annoncé il y a peu qu’il allait diminuer d’environ 15% l’affichage des Rich Snippets dans ses résultats.

Enfin, on peut se demander si ces extraits enrichis ne vont pas être peu à peu « réservés » aux sites de qualité. Encore une fois, sur quels critères Google décidera si un site est de qualité ou non ? Mystère.

J’ai fait de nombreux tests sur le référencement de mon blog, et l’analyse des résultats dans mon Analytics et dans mon Webmaster Tools m’a permis d’apprendre beaucoup de choses, et de voir aussi que j’avais fait beaucoup d’erreurs !

J’en parlerai dans un nouvel article très bientôt. 😉

En tant que « nouveau » dans le monde du référencement, cela m’intéresse de connaître l’utilisation que vous faites des Rich Snippets ainsi que votre avis sur les évolutions que vous imaginez, donc n’hésitez pas à me dire ce que vous pensez de tout ça dans les commentaires.

Rich Snippets et Référencement WordPress
4.7 (94.55%) 44 votes

Link-Tothepast

Blogueur, retrogamer, collectionneur et double Papa ! Sur ce blog, je vous parle de mes passions, de vieux jeux vidéo, de collection, de cyberculture, et parfois d'autres trucs ;)

18 commentaires sur “Rich Snippets et Référencement WordPress”

  1. Franchement ton article sur les rich snippets, j’utilise actuellement Yoast sur mon blog je pensais qui le gérait également, je vais installer All in One Schema.org. Par contre pas mal ton bout de code pour KK Star Rating je l’utilise également à défaut d’utiliser GD Star Rating.

    Par contre truc hors sujet, ta collec Zelda je kiff !! je suis Zelda Like je termine à 200% Wind Waker HD sur Wii-U mais sincèrement j’aurai aimer avoir ta belle collection !!

  2. J’ai essayé d’intégrer cela sur mon site mais impossible de savoir pourquoi kk ratings bug sous firefox et pas sous chrome par exemple. Si tu as une piste je suis preneur 😀

  3. @Jeux Précommande : Merci ! 🙂 (sorry pour le mega-délai de réponse…)

    @Cuivré : Je te conseille d’essayer de contacter le dev du plugin. Depuis j’ai vu que KK Star Ratings fonctionne mal aussi sur mobile…

    @Franck : J’avoue que le code est un peu galère à mettre en place dans le php… Il y a certains thèmes qui gèrent le fil d’ariane déjà structuré. Sinon il me semble qu’avec les dernières mises à jour du plugin WordPress SEO by Yoast, le fil d’ariane est structuré. J’explique dans cet article comment faire pour installer le fil d’ariane avec Yoast. 😉

    A+

  4. Bonjour, je voulais rebondir sur l’extension KK star Ratings,
    j’ai installé ce plugin aujourd’hui et dans les paramètres il y a une option permettant d’indexer les notes aux recherches google :
    « Do you want Google to index the ratings and hopefully show it in the search results »

  5. Par contre j’ai un petit soucis avec ce plugin, c’est qu’il affiche mon texte accompagnant les etoiles en paragraphe avec 3 mots par ligne, je n’arrive pas a lui faire mettre le texte en une seule ligne

  6. Bonjour Cédric,

    Le paramètre d’indexation des notes permet d’autoriser Google à afficher les étoiles, la note moyenne et le nombre de votes dans ses pages de résultats.
    C’est aussi bien de le laisser activer, ça augmente considérablement la visibilité de vos résultats dans Google.

    Concernant les légendes sur trois lignes, il faut effectivement modifier la feuille de style du plugin pour l’afficher sur une seule ligne (fichier /wp-content/plugins/kk-stars-ratings/css.css)
    ligne 47, il faut ajouter un width et un margin (qui dépendent du thème que vous utilisez).
    Chez moi ça donne ça :

    .kk-star-ratings .kksr-legend {
    font-size: 12px;
    color: #999;
    text-align: center;
    line-height: 18px;
    padding: 3px 120 px;
    font-family: Arial, Helvetica, sans-serif;
    width:180px;
    margin: -20px 0px 0px 110px;
    }

  7. Bonjour,

    Est ce normal que le plugin alvin rich snippet ajoute en frontend un pavé avec les rich snippet?
    Je pensais qu’il ajoutait simplement les éléments au code mais pas en vue publique sous mes articles.
    Pouvez vous me donner votre avis ?

  8. Bonjour Temp,

    Oui c’est normal, il faut bien que les informations soient affichées quelque part sur le site si vous voulez que Google les affiche dans ses extraits.

    D’ailleurs c’est déconseillé d’afficher des informations dans le code sans qu’elles soient visibles pour les utilisateurs.

  9. Bonjour
    J’ai activé la fonction: Do you want Google to index the ratings and hopefully show it in the search results.
    Je pense qu’il faut attendre plusieurs jours pour que le résultat soit visible dans les recherches Google. Il faut laisser le temps aux robots de passer à nouveau sur le site.

  10. Bonjour
    J’utilise KK Star Rating, il est simple à mettre en place.
    Les étoiles s’affichent bien sur les articles et les pages du site, à l’exception de la page d’accueil.
    J’ai pourtant coché toutes les options.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *