Extraits enrichis : notes associées aux avis

Nouveau ! Avec schema.org vous pouvez inclure une plus grande diversité d'éléments sur vos pages, à l'aide d'un vocabulaire employé à la fois par Google, Microsoft et Yahoo! (en savoir plus). Notez que Google accepte toujours vos extraits enrichis balisés existants.

Il existe plusieurs manières d'inclure des notes dans des avis.

La méthode la plus courante consiste à ajouter un chiffre directement dans le code HTML, comme dans l'exemple suivant :

 
Note : <span class="rating">4,5</span> 

Quelle que soit la méthode utilisée pour exprimer une note sur votre page (chaînes numériques, pourcentages, images ou sprites), vous pouvez communiquer ces informations à Google à l'aide du balisage par microdonnées, microformats ou RDFa. Sauf mention contraire de votre part, Google estime que vous utilisez une échelle de notation allant de 1 (mauvais) à 5 (excellent), comme dans le code ci-dessus. Cet article décrit la manière de baliser diverses informations relatives à la notation. Conseil : n'ajoutez pas un bloc de texte masqué distinct pour spécifier la note. Le contenu masqué ne va pas s'afficher.

Utilisation d'images (étoiles) pour exprimer un classement

Cette section vous explique comment baliser les informations relatives à la notation afin d'utiliser des images (une image composée de quatre étoiles, par exemple) pour exprimer un classement.

Microdonnées

Si, par exemple, vous utilisez une image composée de quatre étoiles pour afficher les notes, ajoutez itemprop="rating" dans la balise img. Google peut extraire la note contenue dans le texte alt.

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

Dans certains cas, lorsque les sprites et le code Javascript et/ou CSS sont utilisés pour le rendu d'image, il est possible que vous ne puissiez pas ajouter la note dans le texte alt. Imaginons, par exemple, que la ligne suivante utilise des sprites et du code CSS pour afficher une image à 4,5 étoiles :

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

Si vous utilisez cette méthode pour afficher des notes, voici comment vous devez utiliser les microdonnées pour baliser le bloc HTML qui sera rendu sous forme d'image :

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

Si vous ajoutez <meta itemprop="rating" content="4,5" /> dans le bloc HTML permettant d'afficher les étoiles, vous indiquez que l'analyseur d'extraits enrichis doit utiliser la valeur de l'attribut content pour obtenir la note.

Microformats

Si, par exemple, vous utilisez une image composée de quatre étoiles pour afficher les notes, ajoutez class="rating" dans la balise img. Google peut extraire la note contenue dans le texte alt.

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

Dans certains cas, lorsque les sprites et le code Javascript ou CSS sont utilisés pour le rendu d'image, il est possible que vous ne puissiez pas ajouter la note dans le texte alt. Imaginons, par exemple, que la ligne suivante utilise des sprites et du code CSS pour afficher une image à 4,5 étoiles :

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

Si vous utilisez cette méthode pour afficher des notes, voici comment vous devez utiliser le modèle de classe "value" des microformats pour baliser le bloc HTML qui sera rendu sous forme d'image :

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

Si vous ajoutez <span class="value-title" title="4,5" /> dans le bloc libellé class="rating", vous indiquez que l'analyseur d'extraits enrichis doit utiliser la valeur de l'attribut title pour obtenir la note.

RDFa

Si, par exemple, vous utilisez une image à quatre étoiles pour afficher des notes, ajoutez property="v:rating" dans la balise img et spécifiez la note avec l'attribut content, comme suit :

 
<img property="v:rating" src="note_quatre_étoiles.gif" content="4" /> 

Différentes méthodes sont proposées pour baliser les informations relatives à la notation sur vos pages Web. Quelle que soit la méthode employée, utilisez l'attribut content pour spécifier la note.

Imaginons, par exemple, que la ligne suivante utilise des sprites et du code CSS pour afficher une image à 4,5 étoiles :

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

Voici la même ligne, avec cette fois-ci la note spécifiée par l'attribut content :

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

Classement non basé sur une échelle de notation à 5 points

Par défaut, Google considère que votre site utilise une échelle de notation à 5 points, où la valeur 5 correspond à la meilleure note possible et la valeur 1 à la moins bonne.

De nombreux sites d'évaluation proposent des classements se basant sur une échelle de notation différente, à savoir une échelle de 1 à 10 points ou allant de 0 à 100 %. Cette section vous explique comment baliser les informations relatives à la notation si vous utilisez une échelle différente.

Microdonnées

Balisage d'un avis simple

Pour les avis simples basés sur une échelle de notation à 5 points, la propriété rating peut être utilisée pour spécifier la note. Voici un extrait de texte sans aucun balisage :

 
Blast 'Em Up – Avis sur le jeu 
Note : 3,5 sur 5 

Vous trouverez ci-dessous le même contenu HTML balisé au format microdonnées :

 
<span itemscope itemtype="http://data-vocabulary.org/Review"> 
   <span itemprop="itemreviewed">Blast 'Em Up</span> – Avis sur le jeu
   Note : <span itemprop="rating">3,5</span> sur 5 
</span> 

Prenons comme exemple une note basée sur une échelle à 10 points. Dans cet exemple, l'objectif est non seulement d'afficher la note, mais également l'échelle de notation utilisée.

 
Blast 'Em Up - Avis sur le jeu 
 
Note : 7 sur 10 

Voici le même contenu balisé à l'aide de microdonnées :

 
<span itemscope itemtype="http://data-vocabulary.org/Review">  
   <span itemprop="itemreviewed">Blast 'Em Up</span> - Avis sur le jeu
   
   <span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
         Avis :
         <span itemprop="value">7</span> sur 
          
         <span itemprop="best">10</span> 
     
    </span>
</span> 

Dans cet exemple, la propriété rating contient un autre élément, comme indiqué par itemscope. L'attribut itemtype indique que cet élément imbriqué est une note : itemtype="http://data-vocabulary.org/Rating".

Balisage d'un avis global

Pour les sites qui proposent un avis global, avec des notes basées sur la moyenne de plusieurs avis plutôt que sur un seul avis, le processus est identique à celui d'un avis simple. Voici un extrait de texte sans aucun balisage :

 
Blast 'Em Up – Avis sur le jeu 
Note : 88 sur 100 
 
basée sur 35 avis 

Voici le même contenu balisé à l'aide de microdonnées :

 
<span itemscope itemtype="http://data-vocabulary.org/Review-aggregate">  
   <span itemprop="itemreviewed">Blast 'Em Up</span> – Avis sur le jeu
   <span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">      
         Avis : 
         <span itemprop="average">88</span> sur
         
         <span itemprop="best">100</span> 
    
   </span>
   basé sur
   <span itemprop="count">35</span> avis.

</span> 

Comme dans le cas d'un avis simple, la propriété best indique la meilleure note possible. Dans ce cas, il s'agit d'une note moyenne. Par conséquent, la propriété average est utilisée à la place de value pour baliser la note.

Balisage d'un avis simple en l'absence de meilleure note

Voici un extrait de texte sans aucun balisage :

 
Blast 'Em Up - Avis sur le jeu 
 
Note : 9 - Excellent 

Dans ce cas, la meilleure note possible est 10. Toutefois, cette information n'est pas indiquée sur la page. Les internautes comprennent naturellement que la note est basée sur une échelle à 10 points. Dans cet exemple, vous pouvez ajouter des informations utiles dans la balise meta :

 
<span itemscope itemtype="http://data-vocabulary.org/Review"> 
     
   <span itemprop="itemreviewed">Blast 'Em Up</span> - Avis sur le jeu
   
   <span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">      
         Avis :  
         <span itemprop="value">9</span> 
          
         <meta itemprop="best" content="10"/> - Excellent 
     
    </span> 
</span> 

L'attribut content de la balise meta vous permet de fournir des informations qui ne sont pas indiquées de manière explicite sur la page. Notez qu'en règle générale, Google n'affiche pas le contenu qui n'est pas visible pour l'utilisateur final. Toutefois, lorsque les meilleures et les moins bonnes notes ne figurent pas sur la page, vous êtes autorisé à utiliser la balise meta avec les propriétés best ou worst.

Balisage d'un avis global en l'absence de meilleure note

Ce dernier exemple montre comment baliser un avis global qui n'est pas basé sur une échelle à 5 points, lorsque la meilleure/pire note possible n'est pas clairement spécifiée sur la page. L'objectif est d'afficher non seulement la note moyenne, mais également l'échelle de notation utilisée.

Voici un extrait de texte sans aucun balisage :

 
Blast 'Em Up – Avis sur le jeu 
Note moyenne : 9 
4 avis 

Vous trouverez ci-dessous le même contenu HTML balisé à l'aide de microdonnées :

 
<span itemscope itemtype="http://data-vocabulary.org/Review-aggregate">  
     
   <span itemprop="itemreviewed">Blast 'Em Up</span> – Avis sur le jeu
   <span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">    
      Note moyenne :
      <span itemprop="average">9</span> 
      <meta itemprop="best" content="10"/>  
        
      <meta itemprop="worst" content="1"/> 
    
   </span>
   <span itemprop="count">4</span> avis 
</span> 
Microformats

Balisage d'un avis simple

Vous pouvez utiliser les sous-propriétés best et worst de la propriété rating (laquelle est une propriété de hReview) pour baliser votre contenu. Voici un extrait de texte sans aucun balisage :

Blast 'Em Up – Avis sur le jeu 
Note : 7 sur 10 

Vous trouverez ci-dessous le même contenu HTML balisé à l'aide du microformat hReview.

 
<span class="hreview"> 
   <span class="item">
      <span class="fn">Blast 'Em Up</span>
   
   </span> - Avis sur le jeu 
    
   <span class="rating"> 
      Avis :
      <span class="value">7</span> sur 
       
      <span class="best">10</span>
    
   </span> 
</span> 

La sous-propriété value de la propriété rating indique la note réelle, tandis que best indique la meilleure note possible.

Balisage d'un avis global

Voici un extrait de texte sans aucun balisage :

Blast 'Em Up – Avis sur le jeu 
Note : 88 sur 100 
 
Note basée sur 35 avis 

Vous trouverez ci-dessous le même contenu HTML balisé à l'aide du microformat hReview-aggregate.

<span class="hreview-aggregate"> 
   <span class="item">
      <span class="fn">Blast 'Em Up</span></span> - Avis sur le jeu 
    
   <span class="rating">Note : 
       
      <span class="average">88</span> sur <span class="best">100</span> 
    
   </span> 
   basé sur
   <span class="count">35</span> avis. 
 
</span> 

Comme dans l'avis simple ci-dessus, la propriété best indique la meilleure note possible. Dans ce cas, il s'agit d'une note moyenne. Par conséquent, la propriété average est utilisée à la place de value pour baliser la note.

Balisage d'un avis simple en l'absence de meilleure note

Vous pouvez baliser un avis global qui n'est pas basé sur une échelle de notation à 5 points lorsque la meilleure ou la pire note possible ne sont pas clairement spécifiées sur la page. Voici un extrait de texte sans aucun balisage :

Blast 'Em Up – Avis sur le jeu 
Note : 7

Dans ce cas, vous pouvez faire en sorte que les moteurs de recherche identifient correctement la note de 7 basée sur une échelle de notation de 1 à 10 en balisant le contenu avec le microformat hReview et en ajoutant les données correspondantes avec le modèle de classe "value" des microformats :

<span class="hreview"> 
    
   <span class="item">
      <span class="fn">Blast 'Em Up</span>
   
   </span> - Avis sur le jeu 
    
   <span class="rating"> 
      Avis : 
      <span class="value">7</span>
      
      <span class="best">
         <span class="value-title" title="10"/> 
       
      </span>
   </span> 
</span> 

Balisage d'un avis global en l'absence de meilleure note

Vous pouvez baliser un avis global qui n'est pas basé sur une échelle de notation à 5 points lorsque la meilleure/pire note possible n'est pas clairement spécifiée sur la page.

Voici un extrait de texte sans aucun balisage :

Blast 'Em Up – Avis sur le jeu 
Note moyenne : 7 
4 avis 

Dans ce cas, vous pouvez faire en sorte que les moteurs de recherche identifient correctement la note de 7 basée sur une échelle de notation de 1 à 10 en balisant le contenu avec le microformat hReview-aggregate et en ajoutant les données correspondantes avec le modèle de classe "value" des microformats :

<span class="hreview-aggregate"> 
    
   <span class="item">
      <span class="fn">Blast 'Em Up</span> </span> – Avis sur le jeu
   <span class="rating"> 
      Note moyenne :
         <span class="average">7</span> 
          
         <span class="best">
         
            <span class="value-title" title="10"/> 
       
         </span> 
         <span class="worst">
            
            <span class="value-title" title="1"/> 
          
         </span> 
   </span> 
   <span class="count">4</span> avis 
 
</span> 
RDFa

Balisage d'un avis simple

Pour les avis simples basés sur une échelle de notation à 5 points, la propriété rating peut être utilisée pour spécifier la note. Voici un extrait de texte sans aucun balisage :

Blast 'Em Up – Avis sur le jeu 
Note : 3,5 sur 5 

Vous trouverez ci-dessous le même contenu HTML balisé au format RDFa.

<span xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review"> 
    
   <span property="v:itemreviewed">Blast 'Em Up</span>— – Avis sur le jeu
   Note : <span property="v:rating">3,5</span> sur 5 
 
</span> 

Prenons comme exemple une note basée sur une échelle à 10 points.

Blast 'Em Up – Avis sur le jeu 
Note : 7 sur 10 

Voici le même contenu avec un balisage RDFa :

<span xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review"> 
   <span property="v:itemreviewed">Blast 'Em Up</span> – Avis sur le jeu
   <span rel="v:rating"> 
      <span typeof="v:Rating">
         Avis :
         <span property="v:value">7</span> sur 
          
         <span property="v:best">10</span> 
       
      </span>
   </span> 
</span> 

Le premier exemple cité dans cette section et l'exemple ci-dessous présentent quelques différences notables. rel est utilisé au lieu de property pour exprimer la relation entre la note et l'avis. Les propriétés value et best sont utilisées pour spécifier la note proprement dite et la meilleure note possible.

Balisage d'un avis global

Pour les sites qui proposent un avis global, avec des notes basées sur la moyenne de plusieurs avis plutôt que sur un seul avis, le processus est identique à celui d'un avis simple. Voici un extrait de texte sans aucun balisage :

Blast 'Em Up – Avis sur le jeu 
Note : 88 sur 100 
 
Note basée sur 35 avis 

Voici le même contenu avec un balisage RDFa :

<span xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review-aggregate"> 
    
   <span property="v:itemreviewed">Blast 'Em Up</span> – Avis sur le jeu 
   <span rel="v:rating"> 
      <span typeof="v:Rating">      
         Avis : 
         <span property="v:average">88</span> sur
         
         <span property="v:best">100</span> 
       
      </span>
   </span>
   based on
   <span property="v:count">35</span> avis.

</span> 

Comme dans le cas d'un avis simple, la propriété best indique la meilleure note possible. Dans ce cas, il s'agit d'une note moyenne. Par conséquent, la propriété average est utilisée à la place de value pour baliser la note.

Balisage d'un avis simple en l'absence de meilleure note

Voici un extrait de texte sans aucun balisage :

Avis sur le jeu Blast 'Em Up 
 
Note : 9 – Excellent 

Dans ce cas, la meilleure note possible est 10. Toutefois, cette information n'est pas indiquée sur la page. Les internautes comprennent naturellement que la note est basée sur une échelle à 10 points. Dans ce cas, vous pouvez ajouter les données appropriées directement dans la balise HTML à l'aide de l'attribut content :

<span xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review"> 
   <span property="v:itemreviewed">Blast 'Em Up</span> - Avis sur le jeu 
    
   <span rel="v:rating"> 
      <span typeof="v:Rating">
         Avis :
         <span property="v:value">9</span> 
          
         <span property="v:best" content="10"/> - Excellent 
       
      </span>
   </span> 
</span> 

L'attribut content vous permet de fournir des informations qui ne sont pas indiquées de manière explicite sur la page. Notez qu'en règle générale, Google n'affiche pas le contenu qui n'est pas visible pour l'utilisateur final. Toutefois, lorsque les meilleures et les moins bonnes notes ne figurent pas sur la page, vous êtes autorisé à utiliser la propriété best ou worst pour baliser le contenu.

Balisage d'un avis global en l'absence de meilleure note

Ce dernier exemple montre comment baliser un avis global qui n'est pas basé sur une échelle à 5 points, lorsque la meilleure ou la pire note possible ne sont pas clairement spécifiées sur la page.

Voici un extrait de texte sans aucun balisage :

Blast 'Em Up – Avis sur le jeu 
Note moyenne : 9 
4 avis 

Voici le même contenu HTML avec un balisage RDFa :

<span xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review-aggregate"> 
   <span property="v:itemreviewed">Blast 'Em Up</span> – Avis sur le jeu 
   <span rel="v:rating"> 
      <span typeof="v:Rating">
         Note moyenne :
         <span property="v:average">9</span> 
         <span property="v:best" content="10"/>  
           
         <span property="v:worst" content="1"/> 
       
      </span>
   </span> 
   <span property="v:count">4</span> avis 
 
</span>