Rich snippets, définition → C'est quoi le rich snippet Google ?

Rich snippets : Qu’est-ce que le rich snippet pour Google ?

Google n’en finit plus de vouloir manger votre site Internet. En référencement naturel SEO, il apparaît plusieurs solutions pour faciliter une meilleure visibilité. Nous avons au travers de ce blog exposé de nombreuses solutions et nous vous proposons différentes analyses et études pour assurer une parfaite prestation en référencement. Parmi les éléments constitutifs de la visibilité sur Google, il existe le rich snippet. qu’est-ce donc ? Explications.

Que sont les rich snippets en référencement SEO ?

Le « rich snippet » est traduisible en français par « extrait enrichi » et représente un descriptif de page ou d’article apparaissant dans les pages de résultats de Google appelées SERP pour Search Engine Result Page. L’extrait correspondant à la metadescription dans l’affichage classique est dans ce cas enrichi par rapport aux trois ou quatre lignes habituelles. Google utilise les rich snippets pour présenter des avis, des recettes de cuisine, des entreprises, des événements, de la musique, des applications, des produits, des personnes. Cela fait partie de de ce que l’on définit comme des données structurées.

Pour bénéficier de rich snippets dans les résultats de recherche de Google, il apparaît nécessaire d’optimiser les contenus de votre site Internet avec ce que l’on nomme le balisage de données structurées. Ce balisage, s’il n’est pas prouvé qu’il apporte un meilleure positionnement des résultats, permet assurément d’améliorer le taux de clic (Click-trough rate) sur la page de résultat de Google puisque le lien bleu est ainsi rendu plus visible. Une étude particulièrement en 2015 avait permis de montrer qu’un résultat pourvu de Rich snippet en position 2 permet d’améliorer la performance de clic au-delà d’une première position sur cette même page. Nous vous invitions à relire notre article à l’époque sur les extraits enrichis et données structurées.

Exemples de rich snippet dans les résultats Google

Il existe différents types d’extraits enrichis ou rich snippets comme exposé dans la définition ci-dessus. Toutefois voici quelques exemples, en commençant par les recettes de cuisine où Google est particulièrement exploité.

Les recettes de cuisines en schema.org vues par Google

rich snippet de recette de cuisine

Dans cet exemple, on note que le deuxième lien comprend une image reprise de la recette du burger végétarien, des évaluations (les petites étoiles jaunes) avec une note, le nombre d’avis et la durée de préparation de la recette (30 min). C’est également le cas pour le quatrième lien qui présente lui aussi des avis et un temps de préparation de 30 minutes.

Pour réaliser ce type de rich snippet, a minima, il est nécessaire d’utiliser un balisage correspondant à ceci sur la page en question :

<script type="application/ld+json">{"@context":"http:\/\/schema.org\/",
"@type":"Recipe",
"image":{"@type":"ImageObject",
"url":"https:\/\/monsiteinternet.com\/dossierimage\/\/mon-image.jpg",
"width":en px,
"height": en px},
"name":"Donner un nom",
"aggregateRating":{"@type":"AggregateRating",
"ratingValue":"4.3",
"ratingCount":"4"}}
</script>	

Dans le cas ci-dessus, votre metadescription est enrichie de l’image en question, des évaluations (note moyenne + nombre de votes) mais c’est tout. En soi, cela tranche déjà avec un snippet classique et vous booste votre visibilité indéniablement. Étonnement, et bien que ce soit un tantinet black Hat, vous pouvez réaliser ce type d’affichage sur n’importe quel document, même si ce n’est pas une recette, pourvu que vous utilisiez un script de type « application/ld json » pour promouvoir un contexte de schema.org avec un type d’affichage, la fameuse « Recipe ».

Néanmoins, il est sage ici de vous alerter sur les risques Googleliens que vous pourriez avoir. L’usage de ce type d’abus de visibilité que nous avons testé (oui on pousse le moteur pour comprendre) peut vous amener à la pénalité. Et vous faire perdre trente pour cent de trafic en cas de découverte par les quality raters de chez Google n’est pas un objectif.

Intégrer des rich snippets vidéo dans les résultats de recherche

Les vidéos apparaissent dans la SERP en snippet via les thumbnail ! Voici comment faire :

Ld Json pour une vidéo dans la SERP
<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "VideoObject",
 "name": "Ma vidéo magnifique visible dans Google": "http://.monsite.com/thumbnail.jpg",
 "uploadDate": "2018-05-08T09:00:00+09:00",
 "duration": "PT1M30S",
 "contentUrl": "http://monsite.com/mavideo.flv",
 "embedUrl": "http://monsite.com/videoplayer.swf?video=numéro",
 "interactionCount": "250"
}
</script>

C’est mieux qu’une image non ? Quand on sait l’impact de la vidéo dans la recherche des internautes. Ici la durée de la vidéo est précisée (Plus bas des explications sur le facteur temps) ainsi que la date de mise en ligne.

Utiliser l’enrichissement des snippets pour un événement

Là encore, au même titre que pour les recettes, il est possible d’enrichir ses snippets de différentes façons. La préconisation de Google étant le ld Json, nous l’abordons ici. Cela dit, le Microformat et le RDFa fonctionnent toujours pour l’affichage dans la SERP. Par exemple en Microdata :

Microdata d'un événement reprenant le schema.org
    <div class="event-wrapper" itemscope itemtype="http://schema.org/Event">
      <div class="event-date" itemprop="startDate" content="2018-09-14T08:30">14 septembre 2018</div>
      <div class="event-title" itemprop="name">On refait un petit déjeuner SEO les gars ?</div>
      <div class="event-venue" itemprop="location" itemscope itemtype="http://schema.org/Place">
        <span itemprop="name">Facem Web</span>
        <div class="address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
          <span itemprop="streetAddress">13, rue Emile Lenglet</span><br>
          <span itemprop="addressLocality">Arras</span>,
          <span itemprop="addressRegion">Hauts de France</span>
          <span itemprop="postalCode">62000</span>
        </div>
      </div>
      <div class="event-time">10 heures</div>
     <span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
      <div class="event-price" itemprop="price" content="0</div>
      <span itemprop="priceCurrency" content="EUR" />
      <a itemprop="url" href="https://facemweb.com/contacter-facem-web">S'inscrire</a>
     </span>
    </div>

En ld Json maintenant :

Evénment en ld Json
   <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "Event",
      "location": {
        "@type": "Place",
        "address": {
          "@type": "PostalAddress",
          "addressLocality": "Arras",
          "addressRegion": "Hauts de France",
          "postalCode": "62000",
          "streetAddress": "13, rue Emile Lenglet"
        },
        "name": "Petit déjeuner SEO"
      },
      "name": "Petit déjeuner SEO",
      "offers": {
        "@type": "Offer",
        "price": "0.00",
        "priceCurrency": "EUR",
        "url": "https://facemweb.com/contacter-facem-web"
      },
      "startDate": "2018-09-14T08:30"
    }
    </script>

Tout passer en ld json + schema.org pour plus de visibilité

Les sites réalisant des recettes de cuisine ont intérêt toutefois à renforcer ce type de visibilité en ajoutant si je puis dire d’autres ingrédients. Dans l’exemple minimum précédent, nous n’avons pas des éléments comme le temps de préparation de la recette. Pour cela, il faudra enrichir en données supplémentaires sous le même format.

La durée de préparation, de cuisson, les ingrédients utilisés, l’auteur de la recette et la méthode de préparation sont intéressants. Si tout ne s’affiche pas en rich snippet classique, ces éléments structurants sont des facilitateurs pour les moteurs de recherche qui les exploitent dans le temps. La position zéro et son featured snippet, utile pour la recherche vocale entre autres, ça s’obtient en structurant ! Revenons à notre recette de burger végétarien :

Exemple de script ld json pour recette de cuisine plus complet
<script type="application/ld+json">
            {"@context":"http:\/\/schema.org",
			"@type":"Recipe",
			"name":"Burger v\u00e9g\u00e9tarien",
			"image":
			"http:\/\/monsitederecettes.com\/dossier-images\/monimage.jpg",
			"description":"Une recette de burger vegetarien chouette (detailler)",
			"recipeCategory":"Burgers",
			"author":
			{"@type":"Person",
			"name":"Celui qui a fait la recette"},
			"aggregateRating":
			{"@type":"AggregateRating",
			"ratingValue":5 (la note doit être attribuée par tout à chacun),
			"reviewCount":"7" (le nombre de votes exprimés),
			"bestRating":5,
			"worstRating":0},
			"prepTime":"PT0H15M",
			"cookTime":"PT0H45M",
			"totalTime":"PT0H15M",
			"recipeYield":"1 Pers.",
			"ingredients":["30 g de je ne sais quoi",
			"60 g de j'en sais pas plus",
            "100 g de je cuisine avec mes pieds",			
			"(...)" (ici bien détailler tous les ingrédients)],
			"recipeInstructions":
			["Mettez ici toutes les instructions de préparation.","Détaillez un maximum en séparant de cette manière","(...)"]}
			</script>

Pour les temps de préparation « prepTime », de cuisson « cookTime » et le temps total « totalTime », on utilise les règles WSRR suivantes : la lettre « P » indiquant qu’il s’agit d’une durée. Chaque groupe formé d’un entier et d’une lettre représente un nombre d’unités temporelles, chacune étant divisée en deux sections, séparées par la lettre « T ». Le « H » représente les heures et le « M » ensuite les minutes). Vous pouvez pousser le vice jusqu’aux secondes « S » mais c’est je crois abuser en cuisine (Pour les œufs à la coque ?).
\u00e9 pour le Javascript de « name », c’est du code hexadécimal pour exprimer « é ». Dans l’exemple ci-dessus, pour plus de facilités à la lecture, j’ai préféré l’enlever sur le reste de l’exemple.

Comment mettre des données structurées et extraits enrichis en PHP sur son site pour Google ?

C’est là que cela se corse parfois. Si vous êtes sous PHP avec WordPress, nous vous invitons à réfléchir à une automatisation que vous pourrez avoir via l’usage d’un plugin comme YASR. Cela dit, il est possible de créer des fonctions pour chaque type de thème et c’est bien ceci qu’il faut regarder lorsque vous utilisez des thèmes spécifiques pour la cuisine notamment.  Cela dit, vous pouvez le configurer vous même, au moins pour pour l’ensemble des pages en relatant votre organisation par exemple (par exemple dans footer.php ici en Microdata) :

Pour faciliter la recherche locale - LocalBusiness
<div itemscope itemtype="http://schema.org/LocalBusiness">
	<div><span itemprop="name">Mon nom d'entreprise</span></div>
	<p><span itemprop="description">Décrivez ce que fait votre entreprise</span></p>
	<address itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
		<span itemprop="streetAddress">Mon numéro de rue</span>
		<span itemprop="addressLocality">Ma ville</span>,
		<span itemprop="addressRegion">Ma région</span>
	</address>
	Téléphone: <a href="tel:01234567890"><span itemprop="telephone">Mon numéro de téléphone</span></a>
</div>

En utilisant le header.php pour faire une déclaration du schema.og :

Ouvrez votre fichier header.php. Ici, il faut utiliser la fonction get_post_meta () pour obtenir la valeur du champ personnalisé et l’utiliser dans le thème. Collez l’extrait de code suivant juste avant la balise de fermeture </head> dans votre fichier :

<?php
$schema = get_post_meta(get_the_ID(), 'schema', true);
if(!empty($schema)) {
	echo $schema;
}
?>

Pour l’affichage des rewiew (les évaluations) d’un produit :

Aavant </body>, sur vos pages produits (par exemple single-product.php pour Woocommerce), vous pouvez mettre un code de cette manière :

Evaluation produit affiché dans la SERP en ld Json
<script type="application/ld+json">
{ "@context": "http://schema.org",
  "@type": "Product",
  "name": "Le nom du produit",
  "aggregateRating":
    {"@type": "AggregateRating",
     "ratingValue": "Le nombre",
     "reviewCount": "Le nombre"
    }
}
</script>

Si vous utilisez custom fields, vous pourrez insérer ceci (les CSS faisant le reste) :

Pour WordPress en custom fields
<?php
 if ( ($pagerating = get_post_meta( $post->ID, 'rating', true ) )) {
    $rating  = explode( "/", $pagerating );
    $score   = $rating[0];
    $reviews = $rating[1];
    $product = get_the_title();
    $ratingoutput = '<script type="application/ld+json">{"@context": "http://schema.org","@type": "Product","name": "' . $product . '","aggregateRating": {"@type": "AggregateRating","ratingValue": "' . $score . '","reviewCount": "'. $reviews . '"}}</script>';
    echo $ratingoutput . "n";
  }
?>

A charge pour vous de placer nom et valeur souhaités. Limite toutefois du point de vue de l’abus de visibilité.

De même, s’agissant de produits, il réside ici en plus une question relative au droit de la consommation. Tournez-vous volontiers vers les systèmes proposant une réelle évaluation par les consommateurs, des avis vérifiés par exemple. Dans ce cas, nous vous invitons aussi à prendre le temps de contrôler que l’intermédiare utilise bien des solutions permettant l’affichage dans la SERP. En effet, certaines solutions que nous avons rencontrées garantissaient les évaluations mais sans structurer les données. Dommage.

Comment contrôler et tester les rich snippets pour Google ?

Commençons par le début, Google a créé un tool de test. Voici à quoi cela ressemble :

outil de test des donnees structurees

Il vous suffit de placer une url pour voir la manière dont est lu le code et s’il détecte des erreurs. A gauche, le code, à droite les résultats. Ici on note des erreurs sur les éléments « BlogPosting » :

esemple test rich snippet google

Cela n’handicape pourtant pas l’affichage des review dans la SERP :

aggregateRating
@typeAggregateRating
ratingValue5
ratingCount1

Pour l’ensemble des votes, 5 de valeur et 1 vote… Le problème détecté est en fait un format de date :

format de date erreur

Elle ne respecte pas l’ISO de type : 2017-05-17

Dans la Search console, vous trouverez également des informations relatives à vos données structurées. Cela se trouve dans la section « Apparence dans les résultats de recherche » :

donnees structurees search console

En cliquant sur les éléments où vous savez avoir établi des éléments structurants théoriquement visibles dans la SERP, vous pourrez potentiellement trouver les erreurs.

[Total : 5    Moyenne : 4.8/5]

A propos de l'auteur(e)

Vous aimerez également

Une réponse
  1. Saimiride 4 juin 2018

Laissez un commentaire

Centre de préférences de confidentialité

Google Analytics

Google Analytics est un outil Google d'analyse d'audience Internet permettant aux propriétaires de sites Web et d'applications de mieux comprendre le comportement de leurs utilisateurs. Cet outil peut utiliser des cookies pour collecter des informations et générer des rapports sur les statistiques d'utilisation d'un site Web sans que les utilisateurs individuels soient identifiés personnellement par Google. Le cookie "__ga" est celui qui est le plus utilisé par Google Analytics.
En plus d’établir des rapports statistiques d’utilisation des sites web, Google Analytics peut également être utilisé, conjointement avec certains des cookies publicitaires décrits précédemment, pour proposer des publicités plus pertinentes sur les services Google (comme Google Search), sur l’ensemble d’Internet et pour mesurer votre interaction avec les publicités que nous affichons.

Google Analytics
_ga, _gid, _gat