Le guide ultime des Rich Snippets

Le guide ultime des Rich Snippets

 

Depuis quelques mois, Google laisse de moins en moins de place aux résultats SEO dans les SERPs : Google Finder, comparateur, extensions en SEA, etc. Du coup il est nécessaire de prendre toute la place restante en SEO. Et le meilleur moyen d’être visible en plus de son positionnement, c’est d’intégrer les Rich Snippets, élément vous différenciant de vos concurrents naturels.

Pas toujours faciles à intégrer sur son site toutefois, car le site officiel schema.org donne des bouts de code et non pas un code entier… Je vous donne donc les principaux codes à intégrer pour faire apparaitre les fameux Rich Snippets sur Google.

Pour chaque type de Rich Snippet, je vous fournit le code de base dans lequel l'élément souligné est à dynamiser. Et bien entendu, pour chaque site, vous pourrez personnaliser l'affichage "onsite" avec du CSS.

 

Pour un produit

Objectif : faire apparaitre le nombre d’avis, la note moyenne ou les informations de prix pour inciter l'internaute à visiter un site potentiellement moins cher qu'un concurrent.

Code de base :

<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="name">Nom du Produit</span>
  <img src="url.jpg"/>
  <div itemprop="aggregateRating"
    itemscope itemtype="http://schema.org/AggregateRating">
    <span itemprop="ratingValue">Note Moyenne</span>
    <span itemprop="reviewCount">Nombre d'avis</span>
  </div>

  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer" >
    <span itemprop="price">Prix</span>
    <link itemprop="availability" href="http://schema.org/InStock" />
  </div>

  Product description:
  <span itemprop="description">Description du produit</span>

  Note d'un internaute:

  <div itemprop="review" itemscope itemtype="http://schema.org/Review">
    <span itemprop="author">Nom de l'auteur</span>
    <meta itemprop="datePublished" content="Date">
    <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
    <span itemprop="bestRating">Note</span>stars
    </div>
    <span itemprop="description">Commentaire</span>
  </div>

</div>

Exemple :

Télécharger le code html de permettant l'affiche ci-dessus

 

 

Fil d’Ariane

Objectif : Rendre plus graphique l'affichage de l'URL dans les pages de résultats, et pouvoir se rendre sur la page de niveau supérieur directement depuis Google

Code de base pour une Page Produit de niveau 3 :

<div class="breadCrumb ">

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/index.html" itemprop="url">
<span itemprop="title">Accueil</span>
</a>
</div>

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="URL-Categorie" itemprop="url">
<span itemprop="title">Categorie</span>
</a>
</div>

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="URL-Sous-Categorie" itemprop="url">
<span itemprop="title">Sous-Categorie</span>
</a>
</div>

<span class="bold">Produit</span>
</div>

Exemple :

Rich Snippet produit

Télécharger le code html de permettant l'affiche ci-dessus

 

 

Photo dans les SERPs

Avec la notion d'Author Rank, tout rédacteur de contenu devrait bénéficier de son autorité auprès de Google, car a priori les contenus étant liés au compte Google + d'un auteur reconnu dans son domaine, remonteront mieux dans les pages de résultat.

Objectifs : faire gagner un article en visibilité, et augmenter le taux de clic (attention donc au choix de votre photo!).

Etapes pour faire apparaitre sa photo (cette méthode est la plus simple) :

  1. Rendez-vous sur votre compte Google + puis dans vos liens, et ajoutez votre site dans la zone "Egalement auteur de" (Url directe : https://plus.google.com/me/about/edit/co)
  2. Sur chaque page où vous publiez votre contenu, indiquez que vous en êtes l'auteur en affichant votre prénom/nom, et rendez-les cliquables pour pointer vers votre profil Google+, en utilisant la balise suivante : <a href="https://plus.google.com/VOTRE-URL-GOOGLE +" rel="author">Nom/prénom</a>

Dans la plupart des cas, cette méthode suffira à afficher votre photo dans Google :

Rich Snippet Photo

 

Informations supplémentaires sur l'auteur

En plus d'afficher la photo provenant de Google +, on pourra ajouter des informations supplémentaires sur les auteurs, notamment leur société, poste et localisation.

Objectif : Donner plus d'informations sur un auteur

Code de base à afficher sur la page de biographie :

<div itemscope itemtype="http://schema.org/Person">
  <span itemprop="name">Nom</span>
  <img src="photo.jpg" itemprop="image" />

  <span itemprop="jobTitle">Métier</span>
    <span itemprop="affiliation">Intestable.org</span> 
  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">
      Adresse
    </span>
    <span itemprop="addressLocality">Ville</span>,
    <span itemprop="postalCode">Code Postal</span>
  </div>
  <span itemprop="telephone">Téléphone</span>
  <a href="mailto:mail" itemprop="email">

Exemple :

Téléchargez le code de l'exemple ci-dessus

 

 

Recette de cuisine

Les sites de recettes sont de plus en plus nombreux avec des recettes parfois identiques. Pour les différencier : les avis, commentaire, photos et autres informations

Objectif : différencier ses recettes des autres sites

Code de base :

<div class="hrecipe">
   <img src="photo.jpg"/>
   <span class="author">Auteur de la recette</span>
   <span class="published"> Date de publication<span class="value-title" title="Date au format Iso"></span></span>
      <span class="review hreview-aggregate">
      <span class="rating">
         <span class="average">Note moyenne</span>
         <span class="count">Nombre d'avis</span>
      </span> 
      
   </span>
   <span class="preptime">Temps de préparation <span class="value-title" title="Temps au format ISO"></span></span>
   <span class="cooktime">Temps de cuisson<span class="value-title" title="Temps au format ISO></span></span>   
   <span class="duration">Temps total <span class="value-title" title="Temps au format ISO"></span></span>
 
 Données de nutrition :
   <span class="nutrition">
      <span class="servingsize">Portion</span>
      <span class="calories">Calories par part</span>
      <span class="fat">Matières grasses par part</span>
   </span>   
   
   Ingrédients :
   <span class="ingredient">
      <span class="name">Ingrédient</span>
      <span class="amount">Nombre de cet ingrédient</span> 
   </span>

</div>

Exemple :

Code pour avoir cet affichage dans Google

 

 

Rich Snippet pour un événement

Code de base :

<div class="vevent">
   <a href="url" class="url summary">Nom</a>
   <img src="image.jpg" class="photo" />
   <span class="description">Description</span>
   Date : 
   <span class="dtstart">
   <span class="value-title" title="Date de début au format ISO"></span>
   </span>
  
   Adresse : 
   <div class="location vcard">
      <span class="fn org">Lieu</span>,
      <span class="adr">
         <span class="street-address">Adresse</span>, 
         <span class="locality">Ville</span>, <span class="region">Région</span>
      </span>
    </div>  
    
Catégorie : <span class="category">Catégorie de l'événement</span>

   <span class="ticketAggregate"> 
     <span class="hoffer-aggregate"> 
     <span class="lowprice">Prix</span>
       <span class="currency">EUR</span> 
     </span>
 </div>

Exemple :

Code pour l'intégrer

 

Il existe beaucoup d'autres Rich Snippets, mais ceux-ci devraient pouvoir aller sur 90% des sites, et augmenter fortement vos taux de clics !

 

A propos de l'auteur

Portrait de Nicolas Plantelin

Nicolas Plantelin est un expert du Search Marketing. Il a eu l'occasion de faire du consulting SEO/SEA pour des grands comptes, avant de devenir responsable du SEO chez l'annonceur. Suivez-le sur Google+ et Twitter pour suivre l'actualité du Search !