Les Rich Snippets, un atout SEO sous-estimé

Thomas Fortin
08/09/2018

Définition & historique

Les Rich Snippets (ou “Extraits Enrichis”) ont été créés par Google (surprise !) en 2009 dans le but d’enrichir (comme l’indique leur nom) les résultats de recherche.
En 2011, Google s’associe avec Microsoft, Yahoo et Yandex (qui décident à leur tour d’adopter les Rich Snippets) pour créer le standard Schema.org afin de proposer une ressource regroupant un ensemble de “schémas” communs pour le balisage des données structurées dans les pages Web.

Ce balisage vise à aider les moteurs de recherche à comprendre plus aisément la page Web. Ceux-ci vont directement connaître le sujet et l’intérêt de la page (si elle parle d’une personne, donne une recette, correspond à un évènement, etc…). Comme dans son fonctionnement habituel, Google (entre autre) récompensera les sites qui l’aident à comprendre leur contenu (via les Rich Snippets ici) en les remontant dans ses SERP (Search Engine Result Page).
Les pages comprenant certaines Rich Snippets ont une apparence plus esthétique dans les résultats de recherche, cela permettra d’inciter les internautes à choisir ce résultat de recherche plutôt qu’un autre qui n’utilise pas de données structurées (nous verrons les différentes apparences que les résultats peuvent avoir dans la section suivante).
De plus, cela sera également bénéfique pour le SEO (Search Engine Optimization) de manière plus globale puisque les crawlers récupéreront plus d’informations en moins de temps sur les pages, ce qui apporte un gain dans le “budget crawl” alloué par les bots des moteurs de recherche.

Afin d’aider à la mise en place de ces données structurées, Google a également créé un outil afin de pouvoir les tester et valider. Ce test peut s’effectuer directement via l’URL à vérifier, ou par un code entré en input.

Exemples de mise en place

Il existe 3 types de Rich Snippets : Microdata, JSON-LD et RDFa. Cela permet de les mettre en place selon ses préférences ou ses capacités (le code HTML n’est pas toujours accessible comme on le souhaite, lors de l’utilisation d’un CMS par exemple).
Comme indiqué sur cette page juste avant la section “Structured data guidelines”, Google conseille tout de même d’utiliser le format JSON-LD dès qu’il est possible de le faire.

Google recommande d’utiliser le JSON-LD dès que possible

Une autre chose à savoir, c’est que le standard Schema.org est très complet, il y a donc un système assez complet “d’héritages” pour les données structurées, il faut donc réfléchir précisément à ses données.
Par exemple, il existe le type Article, mais si l’on a affaire à une actualité, il sera plus judicieux d’utiliser le type NewsArticle, qui est un sous-type d’Article. Avant de faire son choix, il faut donc bien regarder s’il n’existe pas une structure de données précise correspondant à son besoin, plutôt qu’une structure “générique”.

Dans les exemples qui suivent, je mettrai un extrait de code minimal pour chaque type de Rich Snippets afin de donner des exemples concrets et fonctionnels peu importe la solution que vous préférerez adopter.
Ce ne seront pas forcément les réelles solutions mises en place par les sites concernés.
Sachez que chaque type de structure de données est très complet et peut être bien plus renseigné que cela, toutes les propriétés disponibles sont visibles dans les pages schema.org correspondantes.

N’hésitez pas à tester tous les exemples sur l’outil de test de Google. S’il y a parfois quelques “avertissements”, ils seront dus au fait que les exemples sont minimaux, et ne contiennent donc pas systématiquement toutes les propriétés disponibles (notamment mettre les images & logos en ImageObject…), ces avertissements ne sont pas bloquants.

BreadcrumbList

Un BreadcrumbList affichera le Fil d’Ariane directement dans les résultats de recherche au lieu d’afficher l’URL de la page, souvent tronquée pour faute de place. Cela amènera donc un rendu plus propre et agréable visuellement.

Exemple de rendu de BreadcrumbList sur Google

Sans données structurées

<ol>  
   <li>
      <a href="https://www.ebay.fr">eBay</a>  
   </li>  
   <li>    
      <a href="https://www.ebay.fr/b/DVD-et-articles-de-cinema/11232/bn_16549861">DVD et articles de cinéma</a>  
   </li>  
   <li>    
      <span>DVD et Blu-ray</span>  
   </li>
</ol>

JSON-LD

<script type="application/ld+json">
{    
   "@context": "https://schema.org",    
   "@type": "BreadcrumbList",    
   "itemListElement": [        
      {            
         "@type": "ListItem",            
         "position": 1,            
         "item": {                
            "name": "eBay",                
            "@id": "https://www.ebay.fr"           
                 }        
       },        
       {           
          "@type": "ListItem",            
          "position": 2,            
          "item": {                
              "name": "DVD et articles de cinéma",                
              "@id": "https://www.ebay.fr/b/DVD-et-articles-de-cinema/11232/bn_16549861"           
                  }
        },
        {           
          "@type": "ListItem",            
          "position": 3,            
          "item": {                
               "name": "DVD et Blu-ray"            
                  }        
         }    
      ]
   }
</script>

Microdata

<ol itemscope itemtype="https://schema.org/BreadcrumbList">  
   <li itemprop="itemListElement" itemscop
       itemtype="https://schema.org/ListItem">    
      <a itemprop="item" href="https://www.ebay.fr">    
      <span itemprop="name">eBay</span></a>    
      <meta itemprop="position" content="1" />  
   </li>  
   <li itemprop="itemListElement" itemscope
       itemtype="https://schema.org/ListItem">    
      <a itemprop="item" href="https://www.ebay.fr/b/DVD-et-articles-de-cinema/11232/bn_16549861">    
      <span itemprop="name">DVD et articles de cinéma</span></a>    
      <meta itemprop="position" content="2" />  
    </li>  
    <li itemprop="itemListElement" itemscope
        itemtype="https://schema.org/ListItem">    
       <span itemprop="item">      
          <span itemprop="name">DVD et Blu-ray</span>    
          </span>    
          <meta itemprop="position" content="3" />  
     </li>
</ol>

RDFa

<ol vocab="https://schema.org" typeof="BreadcrumbList">  
   <li property="itemListElement" typeof="ListItem">    
      <a property="item" typeof="WebPage" href="https://www.ebay.fr">     <span property="name">eBay</span></a>     
      <meta property="position" content="1">  
    </li>  
    <li property="itemListElement" typeof="ListItem">    
      <a property="item" typeof="WebPage" href="https://www.ebay.fr/b/DVD-et-articles-de-cinema/11232/bn_16549861">    
      <span property="name">DVD et articles de cinéma</span></a>    
      <meta property="position" content="2">  
    </li>  
    <li property="itemListElement" typeof="ListItem">    
       <span property="item">      
       <span property="name">DVD et Blu-ray</span>    
       </span>    
       <meta property="position" content="3">  
    </li>
</ol>

NewsArticle

Un Article permettra d’afficher les données “importantes” d’un article directement dans les résultats de recherche (date de publication, auteur, etc…). Ce qui peut permettre à l’internaute de directement repérer votre article plutôt qu’un autre. Un Article est un type de données qui hérite du type BlogPosting, et qui a comme “sous-type” le NewsArticle ou TechArticle, entre autres. La différence entre tous ces types est légère dans la mise en place, mais il faut tout de même toujours essayer d’utiliser le type de données le plus exact possible. C’est pourquoi dans notre exemple, nous allons utiliser le NewsArticle, car nous avons affaire à une actualité.

Pour un affichage similaire à l’exemple ci-dessus, Google propose des recommandations à suivre.

Sans données structurées

<div>  
  <h1>Art Sonic. Entrez dans les coulisses du plus gros festival de l'Orne</h1>  
  <div><img src="https://media.ouest-france.fr/v1/pictures/cb95990fd9548cb903615ca96372839b-art-sonic-entrez-dans-les-coulisses-du-plus-gros-festival-de-l-orne.jpg" alt="Vue depuis une scène d'Art Sonic" />    
  <span>Maxime JAMES</span>    
  <span>Publié le 22/07/2018 à 18h42</span>    
  <p class="bold">     
     La 23e édition du festival Art Sonic, à Briouze, vient de s’achever. Pendant deux jours, 20 000 festivaliers ont assisté aux concerts. Cela nécessite une importante organisation visible qu’en coulisses.
   </p>  
  </div>
</div>

JSON-LD

<script type="application/ld+json">{
  "@context": "https://schema.org",  "@type": "NewsArticle",  "headline": "Art Sonic. Entrez dans les coulisses du plus gros festival de l’Orne",  "image": "https://media.ouest-france.fr/v1/pictures/cb95990fd9548cb903615ca96372839b-art-sonic-entrez-dans-les-coulisses-du-plus-gros-festival-de-l-orne.jpg",  "datePublished": "2018-07-22T18:42:02+02:00",  "description": "La 23e édition du festival Art Sonic, à Briouze, vient de s’achever. Pendant deux jours, 20 000 festivaliers ont assisté aux concerts. Cela nécessite une importante organisation visible qu’en coulisses.",  "author": {    "@type": "Person",    "name": "Maxime JAMES"  },  "publisher": {    "@type": "Organization",    "name": "Ouest-France",    "logo": "https://www.ouest-france.fr/sites/all/themes/of_amp/images/logos/logo-of-170x60.png"  }}</script>

Microdata

<div itemscope itemtype="https://schema.org/NewsArticle">  <h1 itemprop="headline">Art Sonic. Entrez dans les coulisses du plus gros festival de l'Orne</h1>  <div>    <img itemprop="image" src="https://media.ouest-france.fr/v1/pictures/cb95990fd9548cb903615ca96372839b-art-sonic-entrez-dans-les-coulisses-du-plus-gros-festival-de-l-orne.jpg" alt="Vue depuis une scène d'Art Sonic" />    <span itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="name">Maxime JAMES</span></span>    <span itemprop="datePublished" content="2018-07-22T18:42:02+02:00">Publié le 22/07/2018 à 18h42</span>    <p itemprop="description" class="bold">      La 23e édition du festival Art Sonic, à Briouze, vient de s'achever. Pendant deux jours, 20 000 festivaliers ont assisté aux concerts. Cela nécessite une importante organisation visible qu'en coulisses.    </p>  </div>  <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization" style="display: none;">    <span itemprop="name">Ouest-France</span>    <img itemprop="logo" src="https://www.ouest-france.fr/sites/all/themes/of_amp/images/logos/logo-of-170x60.png" alt="Logo Ouest-France" />  </div></div>

RDFa

<div vocab="https://schema.org" typeof="NewsArticle">  <h1 property="headline">Art Sonic. Entrez dans les coulisses du plus gros festival de l'Orne</h1>  <div>    <img property="image" src="https://media.ouest-france.fr/v1/pictures/cb95990fd9548cb903615ca96372839b-art-sonic-entrez-dans-les-coulisses-du-plus-gros-festival-de-l-orne.jpg" alt="Vue depuis une scène d'Art Sonic" />    <span property="author" typeof="Person"><span property="name">Maxime JAMES</span></span>    <span property="datePublished" content="2018-07-22T18:42:02+02:00">Publié le 22/07/2018 à 18h42</span>    <p property="description" class="bold">      La 23e édition du festival Art Sonic, à Briouze, vient de s'achever. Pendant deux jours, 20 000 festivaliers ont assisté aux concerts. Cela nécessite une importante organisation visible qu'en coulisses.    </p>  </div>  <div property="publisher" typeof="Organization" style="display: none;">    <span property="name">Ouest-France</span>    <img property="logo" src="https://www.ouest-france.fr/sites/all/themes/of_amp/images/logos/logo-of-170x60.png" alt="Logo Ouest-France" />  </div></div>

Recipe (https://schema.org/Recipe)

Une recette peut beaucoup varier d’un site à un autre et par conséquent ne pas toujours correspondre à nos attentes, c’est pourquoi une fiche recette (Recipe) peut permettre d’avoir, tout comme la fiche produit, un accès direct à toutes les informations importantes (temps de préparation, calories, etc…) et ainsi se faire une idée du premier coup d’œil.

Exemple de rendu de Recipe (avec un AggregateRating) sur Google

Afin d’avoir un affichage enrichi sous forme de carte comme ci-dessus, vous pouvez suivre les directives fournies par Google.

Sans données structurées

<div>  <h1>Spaghetti Carbonara II Recipe</h1>  <div>    <img src="https://images.media-allrecipes.com/userphotos/560x315/187850.jpg" alt="Photo of Spaghetti Carbonara II" />    <span>Ready in: <b>40 minutes</b></span>    <span>Nutrition facts: 444 calories</span>    <p>      Pasta, eggs, cheese, and bacon come together in the ultimate Italian favorite: spaghetti carbonara.  Ready in less than 45 minutes, this recipe is a sure kid-pleaser.    </p>    <span>Ingredients:</span>    <ul>      <li>1 pound spaghetti</li>      <li>1 tablespoon olive oil</li>      <li>8 slices bacon, diced</li>      <li>...</li>    </ul>  </div></div>

JSON-LD

<script type="application/ld+json">{    "@context": "https://schema.org",    "@type": "Recipe",    "name": "Spaghetti Carbonara II Recipe",    "image": "https://images.media-allrecipes.com/userphotos/560x315/187850.jpg",    "cookTime": "PT40M",    "recipeIngredient": [        "1 pound spaghetti",        "1 tablespoon olive oil",        "8 slices bacon, diced"    ],    "aggregateRating": {        "@type": "AggregateRating",        "ratingValue": "4.34",        "reviewCount": "1222"    },    "nutrition": {        "@type": "NutritionInformation",        "calories": "444 calories"    }}</script>

Microdata

<div itemscope itemtype="https://schema.org/Recipe">  <h1 itemprop="name">Spaghetti Carbonara II Recipe</h1>  <div>    <img itemprop="image" src="https://images.media-allrecipes.com/userphotos/560x315/187850.jpg" alt="Photo of Spaghetti Carbonara II" />    <span itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">      <meta itemprop="ratingValue" content="4.34">      <meta itemprop="reviewCount" content="1222">    </span>    <span itemprop="cookTime" content="PT40M">Ready in : <b>40 minutes</b></span>    <div itemprop="nutrition" itemscope itemtype="https://schema.org/NutritionInformation">      <span>Nutrition facts:</span>      <span itemprop="calories">444 calories</span>    </div>    <p>     Pasta, eggs, cheese, and bacon come together in the ultimate Italian favorite: spaghetti carbonara.  Ready in less than 45 minutes, this recipe is a sure kid-pleaser.    </p>    <span>Ingredients:</span>    <ul>      <li itemprop="recipeIngredient">1 pound spaghetti</li>      <li itemprop="recipeIngredient">1 tablespoon olive oil</li>      <li itemprop="recipeIngredient">8 slices bacon, diced</li>      <li>...</li>    </ul>  </div></div>

RDFa

<div vocab="https://schema.org" typeof="Recipe">  <h1 property="name">Spaghetti Carbonara II Recipe</h1>  <div>    <img property="image" src="https://images.media-allrecipes.com/userphotos/560x315/187850.jpg" alt="Photo of Spaghetti Carbonara II" />    <span property="aggregateRating" typeof="AggregateRating">      <meta property="ratingValue" content="4.34">      <meta property="reviewCount" content="1222">    </span>    <span property="cookTime" content="PT40M">Ready in: <b>40 minutes</b></span>    <div property="nutrition" typeof="NutritionInformation">      <span>Nutrition facts:</span>      <span property="calories">444 calories</span>    </div>    <p>     Pasta, eggs, cheese, and bacon come together in the ultimate Italian favorite: spaghetti carbonara.  Ready in less than 45 minutes, this recipe is a sure kid-pleaser.    </p>    <span>Ingredients:</span>    <ul>     <li property="recipeIngredient">1 pound spaghetti</li>     <li property="recipeIngredient">1 tablespoon olive oil</li>     <li property="recipeIngredient">8 slices bacon, diced</li>     <li>...</li>    </ul>  </div></div>

Si vous regardez le code source de la page utilisée en exemple, vous verrez que le type Recipe est extrêmement complet, puisque même les taux de graisse, protéines, sel, cholestérol, etc… entre autres sont indiqués grâce au sous-type NutritionInformation, même s’ils ne sont pas forcément affichés dans la carte enrichie associée. Il faut bien retenir qu’un maximum d’informations dans les Rich Snippets sera bénéfique, il ne faut donc pas hésiter à les indiquer, même si ça fait légèrement modifier la structure HTML globale.

Product & Offer (https://schema.org/Product & https://schema.org/Offer)

Avoir une fiche produit (Product) directement dans les résultats de recherche peut être un atout majeur pour inciter les internautes à préférer son site. Avoir cette “mini fiche produit” dans les SERP est faisable grâce à ce type de structure de données qui, associé à une Offer, donne un accès direct à l’état du stock, son prix (ou même sa fourchette de prix), etc…

Exemple de rendu de Product (avec des Offers) sur Google

Des préconisations Google permettent d’obtenir un résultat similaire à celui ci-dessus.

Sans données structurées

<div>  <h1>OnePlus 6</h1>  <div>    <p>      Le OnePlus 6, le successeur du OnePlus 5T, est sorti en mai 2018. Il dispose d'un écran AMOLED de 6,28 pouces, d'un SoC Qualcomm Snapdragon 845 épaulé par 6 ou 8 Go de RAM et d'un double capteur photo de 16+20 mégapixels.    </p>    <img src="https://bestengine.humanoid.fr/uploads/products/oneplus-6-rouge.png" alt="OnePlus 6 rouge" />    <span>Comparatif de prix :</span>    <ul>      <li>427€ sur <b>Gearbest</b></li>      <li>519€ sur <b>OnePlus</b></li>    </ul>  </div></div>

JSON-LD

<script type="application/ld+json">{  
  "@context": "https://schema.org",    
  "@type": "Product",    
  "name": "6",    "description": "Le OnePlus 6, le successeur du OnePlus 5T, est sorti en mai 2018. Il dispose d'un écran AMOLED de 6,28 pouces, d'un SoC Qualcomm Snapdragon 845 épaulé par 6 ou 8 Go de RAM et d'un double capteur photo de 16+20 mégapixels.",    "brand": {      "@type": "Organization",      "name": "OnePlus"   },    "image": [        "https://bestengine.humanoid.fr/uploads/products/oneplus-6-rouge.png"    ],    "offers": [        {            "@type": "Offer",            "price": 427,            "priceCurrency": "EUR",            "availability": "https://schema.org/InStock",            "seller": {                "@type": "Organization",                "name": "Gearbest"            }        },        {            "@type": "Offer",            "price": 519,            "priceCurrency": "EUR",            "availability": "https://schema.org/InStock",            "seller": {                "@type": "Organization",                "name": "OnePlus"            }        }    ]}</script>

Microdata

<div itemscope itemtype="https://schema.org/Product">  <h1>    <span itemprop="brand" itemscope itemtype="https://schema.org/Organization">      <span itemprop="name">OnePlus</span>    </span>    <span itemprop="name">6</span>  </h1>  <div>    <p itemprop="description">      Le OnePlus 6, le successeur du OnePlus 5T, est sorti en mai 2018. Il dispose d'un écran AMOLED de 6,28 pouces, d'un SoC Qualcomm Snapdragon 845 épaulé par 6 ou 8 Go de RAM et d'un double capteur photo de 16+20 mégapixels.    </p>    <img itemprop="image" src="https://bestengine.humanoid.fr/uploads/products/oneplus-6-rouge.png" alt="OnePlus 6 rouge" />    <span>Comparatif de prix :</span>    <ul>      <li itemprop="offers" itemscope itemtype="https://schema.org/Offer">        <span itemprop="price" content="427">427</span>        <span itemprop="priceCurrency" content="EUR">€</span>          <link itemprop="availability" href="https://schema.org/InStock" />        sur         <span itemprop="seller" itemscope itemtype="https://schema.org/Organization">          <b itemprop="name">Gearbest</b>        </span>      </li>      <li itemprop="offers" itemscope itemtype="https://schema.org/Offer">        <span itemprop="price" content="519">519</span>        <span itemprop="priceCurrency" content="EUR">€</span>          <link itemprop="availability" href="https://schema.org/InStock" />        sur         <span itemprop="seller" itemscope itemtype="https://schema.org/Organization">          <b itemprop="name">OnePlus</b>        </span>      </li>    </ul>  </div></div>

RDFa

<div vocab="https://schema.org" typeof="Product">  <h1>    <span property="brand" typeof="Organization">      <span property="name">OnePlus</span>    </span>    <span property="name">6</span>  </h1>  <div>    <p property="description">      Le OnePlus 6, le successeur du OnePlus 5T, est sorti en mai 2018. Il dispose d'un écran AMOLED de 6,28 pouces, d'un SoC Qualcomm Snapdragon 845 épaulé par 6 ou 8 Go de RAM et d'un double capteur photo de 16+20 mégapixels.    </p>    <img property="image" src="https://bestengine.humanoid.fr/uploads/products/oneplus-6-rouge.png" alt="OnePlus 6 rouge" />    <span>Comparatif de prix :</span>    <ul>      <li property="offers" typeof="Offer">        <span property="price" content="427">427</span>        <span property="priceCurrency" content="EUR">€</span>          <link property="availability" href="https://schema.org/InStock" />        sur         <span property="seller" typeof="Organization">          <b property="name">Gearbest</b>        </span>      </li>      <li property="offers" typeof="Offer">        <span property="price" content="519">519</span>        <span property="priceCurrency" content="EUR">€</span>          <link property="availability" href="https://schema.org/InStock" />        sur         <span property="seller" typeof="Organization">          <b property="name">OnePlus</b>        </span>      </li>    </ul>  </div></div>

Comme pour les Recipe ou les Article, et beaucoup d’autres, les Product aussi peuvent contenir un AggregateRating qui sera affiché dans le résultat de recherche s’il est renseigné et rendra ainsi le tout plus “esthétique”.

Et plein d’autres encore…

Ici, quelques exemples de types de données structurés ont été donnés, mais il en existe encore énormément d’autres, pour les évènements (https://schema.org/Event), les avis (https://schema.org/Review), les offres d’emploi (https://schema.org/JobPosting), etc… Si vous avez des pages web correspondant à un type de données bien précis, celui-ci existera très probablement sur Schema.org, il ne vous restera donc plus qu’à le mettre en place en suivant les exemples donnés sur le site. Si aucun type ne correspond, vous pourrez toujours y mettre la structure de données d’une WebPage (https://schema.org/WebPage), qui peut être mise sur toutes les pages de votre site en plus des données plus précises.

Comme dit précédemment, la méthode de mise en place conseillée est le JSON-LD, et c’est sûrement dû à sa simplicité. En mettant en place les Rich Snippets via les Microdata ou le RDFa, notre code HTML se complexifie très rapidement par l’ajout de nombreux <span> ou <meta>, afin de pouvoir séparer bien distinctement chaque donnée. Mais aussi par l’ajout d’éléments en class="visually-hidden" (ou display: none;), pour ne pas que cela change l’apparence de la page pour l’utilisateur et/ou les bots (ou lecteurs d’écran). Ce problème n’est pas présent avec le JSON-LD qui permet, en plus, de facilement visualiser les données, en ayant toutes nos données enrichies à un seul et même endroit dans le code source de notre page.

Conclusion

En 2018 encore, les Rich Snippets ne sont pas énormément utilisés malgré leur atout certain pour un meilleur résultat dans les SERP des différents moteurs de recherche…
En effet, ces données structurées permettent d’avoir une réelle accroche visuelle sur ses contenus, et ainsi attirer l’œil de l’internaute, ce qui va se traduire par un nombre de visiteurs accru (Il faut tout de même savoir que tous les types de données structurées ne changent pas l’apparence de la page dans les résultats, mais ces données ne sont pas pour autant inutiles…).
De plus, cela permet d’aider les moteurs de recherche à comprendre le contenu de la page. Il pourra ainsi mieux saisir le sujet de la page en moins de temps, ce qui va se traduire par une réduction du temps passé par les robots des moteurs de recherche sur chaque page, et ainsi optimiser son temps de crawl désormais si précieux.

Slickteam