Créer un système de notation référencé par Google

Google affiche un certain nombre d’informations dans ces résultats de recherche. Un aperçu du site, un titre, une description et l’URL référencée est un assemblage assez classique. Des choses peuvent être rajoutées dans l’affichage, dont un système de notation (ou vote). Voyons voir comment procéder.

Pour motiver Google à afficher un certain type d’informations, il faut apprendre à lui parler, devenir son ami et passer un pacte avec le diable.

Syntaxe basique

Il va nous falloir user d’une syntaxe précise dont voici une démonstration très simple.

Score : <span class="rating">4.5</span>

Sans information contraire, Google partira du principe que vous attribuez une note sur 5 (5 étoiles), vous pouvez donc parfaitement utiliser des pourcentages : 50% correspondra pour lui à une note de 2.5.
C’est l’exemple le plus simple explicité par Google (1).

Système de notation sous forme d’étoiles

Le plus souvent représenté sous forme d’étoiles (5 étoiles généralement), le système de notation proposé au visiteur doit respecter une syntaxe précise pour que Google le prenne en compte dans ses résultats de recherche.

Affichage fonctionnel sur le site Geekeries

La méthode microdata

Cette méthode consiste à utiliser des attributs spécifique.
Si vous utilisez une image simple par quantité de vote (exemple : une image toutes les demi-étoile), il convient d’utiliser l’attribut itemprop="rating" directement sur l’image. L’attribut alt servant à expliciter la note.

<img itemprop="rating" src="/img/rating_star_4.gif" alt="4 étoiles : recommandé" />

Si vous préférez une technique CSS différente, comme celle des sprites par exemple, il est tout à fait possible d’écrire quelque chose dans ce sens :

<span class="rating-foreground" style="width:90%">
   <meta itemprop="rating" content="4.5" />
</span>

En utilisant la meta au sein du bloc HTML, on rend possible l’affichage des étoiles dans les résultats de recherche, la valeur de content servant à déterminer leur nombre.

La méthode microformat

Cette méthode consiste à utiliser des classes bien précises pour mettre en place un ensemble logique d’informations.
En reprenant les exemples précédents, voici comment rendre visible un résultat de vote pour Google :

<img class="rating" src="/img/rating_star_4.gif" alt="4 étoiles : recommandé" />

En reprenant le second exemple, il est possible d’avoir une structure comme celle-ci :

<span class="rating-foreground" style="width:90%">
   <span class="value-title" title="4.5"></span>
</span>

La classe value-title est une invitation à prendre comme valeur la valeur de l’attribut title.

La méthode RDFa

La méthode RDFa permet, par l’utilisation des attributs property, typeof et rel, de faire la même chose que précédemment.
Reprenons les deux exemples :

<img property="v:rating" src="/img/rating_star_4.gif" alt="4" />

et

<span class="rating-foreground" style="width:90%" property="v:rating" content="4.5"></span>

Système de notation plus riche

Pour créer un système de notation avec beaucoup plus de précision (nombre d’intervenants, système de vote non basés sur une note sur 5, etc.), il faut prévenir Google que vous sortez du cas classique.
Prenons un unique exemple riche pour chaque méthode, microdata, microformat et RDFa.

Méthode riche en microdata

<span itemscope itemtype="http://schema.org/Review">  
   <span itemprop="itemReviewed">Juiz Smart Mobile Admin</span>
   <span itemprop="rating" itemscope itemtype="http://schema.org/AggregateRating">     
         Note de : 
         <span itemprop="ratingValue">90</span> sur
         <span itemprop="bestRating">100</span>
      basée sur
      <span itemprop="ratingCount">35</span> votes.
   </span>
</span>

Méthode riche en microformat

<span class="hreview-aggregate">  
   <span class="item">
      <span class="fn">Juiz Smart Mobile Admin</span>
   </span>
   <span class="rating">     
         Note de : 
         <span class="average">90</span> sur
         <span class="best">100</span>
   </span>
   basée sur
   <span class="count">35</span> votes.
</span>

Méthode riche RDFa

<span xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review">  
   <span property="v:itemreviewed">Juiz Smart Mobile Admin</span>
   <span rel="v:rating">
      <span typeof="v:Rating">
         Note de : 
         <span property="v:average">90</span> sur
         <span property="v:best">100</span>
      </span>
   </span>
   basée sur
   <span property="v:count">35</span> votes.
</span>

En résumé

Les syntaxes sont différentes mais globalement les mots clefs et le rendu sont les mêmes pour le moteur de recherche.
À vous de voir ce qui correspond le mieux à votre interface.

La syntaxe microdata proposée sur http://schema.org est issue d'une entente entre Bing, Google et Yahoo, il conviendrait donc de favoriser celle-ci combinée à un DOCTYPE HTML5.

Pour tester comment peut s'afficher votre page dans les résultats de recherche de Google, utilisez le Rich Snippets Tools.