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.

• Les rich snippets, c’est quoi ? Définition
• Exemples du rich snippet dans la SERP de Google
• Exemple de schema.org pour une recette de cuisine
• Intégrer le thumbnail d’une vidéo dans les résultats de recherche
• Pour un événement avec prix
• Tout passer en ld Json pour plus de visibilité dans Google
• Comment faire des rich snippets et extraits enrichis ?
• Déclaration Header.php
• Review et compteurs d’avis
• Custom Fields pour WordPress
• Comment tester les rich snippets ?

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

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 :

[pastacode lang=”markup” manual=”%3Cscript%20type%3D%22application%2Fld%2Bjson%22%3E%7B%22%40context%22%3A%22http%3A%5C%2F%5C%2Fschema.org%5C%2F%22%2C%0A%22%40type%22%3A%22Recipe%22%2C%0A%22image%22%3A%7B%22%40type%22%3A%22ImageObject%22%2C%0A%22url%22%3A%22https%3A%5C%2F%5C%2Fmonsiteinternet.com%5C%2Fdossierimage%5C%2F%5C%2Fmon-image.jpg%22%2C%0A%22width%22%3Aen%20px%2C%0A%22height%22%3A%20en%20px%7D%2C%0A%22name%22%3A%22Donner%20un%20nom%22%2C%0A%22aggregateRating%22%3A%7B%22%40type%22%3A%22AggregateRating%22%2C%0A%22ratingValue%22%3A%224.3%22%2C%0A%22ratingCount%22%3A%224%22%7D%7D%0A%3C%2Fscript%3E%09″ message=”” highlight=”” provider=”manual”/]

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 :

[pastacode lang=”markup” manual=”%3Cscript%20type%3D%22application%2Fld%2Bjson%22%3E%0A%7B%0A%20%22%40context%22%3A%20%22http%3A%2F%2Fschema.org%22%2C%0A%20%22%40type%22%3A%20%22VideoObject%22%2C%0A%20%22name%22%3A%20%22Ma%20vid%C3%A9o%20magnifique%20visible%20dans%20Google%22%3A%20%22http%3A%2F%2F.monsite.com%2Fthumbnail.jpg%22%2C%0A%20%22uploadDate%22%3A%20%222018-05-08T09%3A00%3A00%2B09%3A00%22%2C%0A%20%22duration%22%3A%20%22PT1M30S%22%2C%0A%20%22contentUrl%22%3A%20%22http%3A%2F%2Fmonsite.com%2Fmavideo.flv%22%2C%0A%20%22embedUrl%22%3A%20%22http%3A%2F%2Fmonsite.com%2Fvideoplayer.swf%3Fvideo%3Dnum%C3%A9ro%22%2C%0A%20%22interactionCount%22%3A%20%22250%22%0A%7D%0A%3C%2Fscript%3E” message=”Ld Json pour une vidéo dans la SERP” highlight=”” provider=”manual”/]

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 :

[pastacode lang=”markup” manual=”%20%20%20%20%3Cdiv%20class%3D%22event-wrapper%22%20%20%3D%22http%3A%2F%2Fschema.org%2FEvent%22%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22event-date%22%20%3D%22startDate%22%20content%3D%222018-09-14T08%3A30%22%3E14%20septembre%202018%3C%2Fdiv%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22event-title%22%20%3D%22name%22%3EOn%20refait%20un%20petit%20d%C3%A9jeuner%20SEO%20les%20gars%20%3F%3C%2Fdiv%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22event-venue%22%20%3D%22location%22%20%20%3D%22http%3A%2F%2Fschema.org%2FPlace%22%3E%0A%20%20%20%20%20%20%20%20%3Cspan%20%3D%22name%22%3EFacem%20Web%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22address%22%20%3D%22address%22%20%20%3D%22http%3A%2F%2Fschema.org%2FPostalAddress%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cspan%20%3D%22streetAddress%22%3E13%2C%20rue%20Emile%20Lenglet%3C%2Fspan%3E%3Cbr%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cspan%20%3D%22addressLocality%22%3EArras%3C%2Fspan%3E%2C%0A%20%20%20%20%20%20%20%20%20%20%3Cspan%20%3D%22addressRegion%22%3EHauts%20de%20France%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cspan%20%3D%22postalCode%22%3E62000%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22event-time%22%3E10%20heures%3C%2Fdiv%3E%0A%20%20%20%20%20%3Cspan%20%3D%22offers%22%20%20%3D%22http%3A%2F%2Fschema.org%2FOffer%22%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22event-price%22%20%3D%22price%22%20content%3D%220%3C%2Fdiv%3E%0A%20%20%20%20%20%20%3Cspan%20%3D%22priceCurrency%22%20content%3D%22EUR%22%20%2F%3E%0A%20%20%20%20%20%20%3Ca%20%3D%22url%22%20href%3D%22https%3A%2F%2Ffacemweb.com%2Fcontacter-facem-web%22%3ES’inscrire%3C%2Fa%3E%0A%20%20%20%20%20%3C%2Fspan%3E%0A%20%20%20%20%3C%2Fdiv%3E” message=”Microdata d’un événement reprenant le schema.org” highlight=”” provider=”manual”/]

En ld Json maintenant :

[pastacode lang=”markup” manual=”%20%20%20%3Cscript%20type%3D%22application%2Fld%2Bjson%22%3E%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%22%40context%22%3A%20%22http%3A%2F%2Fschema.org%22%2C%0A%20%20%20%20%20%20%22%40type%22%3A%20%22Event%22%2C%0A%20%20%20%20%20%20%22location%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22Place%22%2C%0A%20%20%20%20%20%20%20%20%22address%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22PostalAddress%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22addressLocality%22%3A%20%22Arras%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22addressRegion%22%3A%20%22Hauts%20de%20France%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22postalCode%22%3A%20%2262000%22%2C%0A%20%20%20%20%20%20%20%20%20%20%22streetAddress%22%3A%20%2213%2C%20rue%20Emile%20Lenglet%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%22name%22%3A%20%22Petit%20d%C3%A9jeuner%20SEO%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22name%22%3A%20%22Petit%20d%C3%A9jeuner%20SEO%22%2C%0A%20%20%20%20%20%20%22offers%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22Offer%22%2C%0A%20%20%20%20%20%20%20%20%22price%22%3A%20%220.00%22%2C%0A%20%20%20%20%20%20%20%20%22priceCurrency%22%3A%20%22EUR%22%2C%0A%20%20%20%20%20%20%20%20%22url%22%3A%20%22https%3A%2F%2Ffacemweb.com%2Fcontacter-facem-web%22%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%22startDate%22%3A%20%222018-09-14T08%3A30%22%0A%20%20%20%20%7D%0A%20%20%20%20%3C%2Fscript%3E” message=”Evénment en ld Json” highlight=”” provider=”manual”/]

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 :

[pastacode lang=”markup” manual=”%3Cscript%20type%3D%22application%2Fld%2Bjson%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%22%40context%22%3A%22http%3A%5C%2F%5C%2Fschema.org%22%2C%0A%09%09%09%22%40type%22%3A%22Recipe%22%2C%0A%09%09%09%22name%22%3A%22Burger%20v%5Cu00e9g%5Cu00e9tarien%22%2C%0A%09%09%09%22image%22%3A%0A%09%09%09%22http%3A%5C%2F%5C%2Fmonsitederecettes.com%5C%2Fdossier-images%5C%2Fmonimage.jpg%22%2C%0A%09%09%09%22description%22%3A%22Une%20recette%20de%20burger%20vegetarien%20chouette%20(detailler)%22%2C%0A%09%09%09%22recipeCategory%22%3A%22Burgers%22%2C%0A%09%09%09%22author%22%3A%0A%09%09%09%7B%22%40type%22%3A%22Person%22%2C%0A%09%09%09%22name%22%3A%22Celui%20qui%20a%20fait%20la%20recette%22%7D%2C%0A%09%09%09%22aggregateRating%22%3A%0A%09%09%09%7B%22%40type%22%3A%22AggregateRating%22%2C%0A%09%09%09%22ratingValue%22%3A5%20(la%20note%20doit%20%C3%AAtre%20attribu%C3%A9e%20par%20tout%20%C3%A0%20chacun)%2C%0A%09%09%09%22reviewCount%22%3A%227%22%20(le%20nombre%20de%20votes%20exprim%C3%A9s)%2C%0A%09%09%09%22bestRating%22%3A5%2C%0A%09%09%09%22worstRating%22%3A0%7D%2C%0A%09%09%09%22prepTime%22%3A%22PT0H15M%22%2C%0A%09%09%09%22cookTime%22%3A%22PT0H45M%22%2C%0A%09%09%09%22totalTime%22%3A%22PT0H15M%22%2C%0A%09%09%09%22recipeYield%22%3A%221%20Pers.%22%2C%0A%09%09%09%22ingredients%22%3A%5B%2230%20g%20de%20je%20ne%20sais%20quoi%22%2C%0A%09%09%09%2260%20g%20de%20j’en%20sais%20pas%20plus%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22100%20g%20de%20je%20cuisine%20avec%20mes%20pieds%22%2C%09%09%09%0A%09%09%09%22(…)%22%20(ici%20bien%20d%C3%A9tailler%20tous%20les%20ingr%C3%A9dients)%5D%2C%0A%09%09%09%22recipeInstructions%22%3A%0A%09%09%09%5B%22Mettez%20ici%20toutes%20les%20instructions%20de%20pr%C3%A9paration.%22%2C%22D%C3%A9taillez%20un%20maximum%20en%20s%C3%A9parant%20de%20cette%20mani%C3%A8re%22%2C%22(…)%22%5D%7D%0A%09%09%09%3C%2Fscript%3E” message=”Exemple de script ld json pour recette de cuisine plus complet” highlight=”” provider=”manual”/]

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) :

[pastacode lang=”markup” manual=”%3Cdiv%20%20%3D%22http%3A%2F%2Fschema.org%2FLocalBusiness%22%3E%0A%09%3Cdiv%3E%3Cspan%20%3D%22name%22%3EMon%20nom%20d’entreprise%3C%2Fspan%3E%3C%2Fdiv%3E%0A%09%3Cp%3E%3Cspan%20%3D%22description%22%3ED%C3%A9crivez%20ce%20que%20fait%20votre%20entreprise%3C%2Fspan%3E%3C%2Fp%3E%0A%09%3Caddress%20%3D%22address%22%20%20%3D%22http%3A%2F%2Fschema.org%2FPostalAddress%22%3E%0A%09%09%3Cspan%20%3D%22streetAddress%22%3EMon%20num%C3%A9ro%20de%20rue%3C%2Fspan%3E%0A%09%09%3Cspan%20%3D%22addressLocality%22%3EMa%20ville%3C%2Fspan%3E%2C%0A%09%09%3Cspan%20%3D%22addressRegion%22%3EMa%20r%C3%A9gion%3C%2Fspan%3E%0A%09%3C%2Faddress%3E%0A%09T%C3%A9l%C3%A9phone%3A%20%3Ca%20href%3D%22tel%3A01234567890%22%3E%3Cspan%20%3D%22telephone%22%3EMon%20num%C3%A9ro%20de%20t%C3%A9l%C3%A9phone%3C%2Fspan%3E%3C%2Fa%3E%0A%3C%2Fdiv%3E” message=”Pour faciliter la recherche locale – LocalBusiness” highlight=”” provider=”manual”/]

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 :

[pastacode lang=”markup” manual=”%3C%3Fphp%0A%24schema%20%3D%20get_post_meta(get_the_ID()%2C%20’schema’%2C%20true)%3B%0Aif(!empty(%24schema))%20%7B%0A%09echo%20%24schema%3B%0A%7D%0A%3F%3E” message=”” highlight=”” provider=”manual”/]

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 :

[pastacode lang=”markup” manual=”%3Cscript%20type%3D%22application%2Fld%2Bjson%22%3E%0A%7B%20%22%40context%22%3A%20%22http%3A%2F%2Fschema.org%22%2C%0A%20%20%22%40type%22%3A%20%22Product%22%2C%0A%20%20%22name%22%3A%20%22Le%20nom%20du%20produit%22%2C%0A%20%20%22aggregateRating%22%3A%0A%20%20%20%20%7B%22%40type%22%3A%20%22AggregateRating%22%2C%0A%20%20%20%20%20%22ratingValue%22%3A%20%22Le%20nombre%22%2C%0A%20%20%20%20%20%22reviewCount%22%3A%20%22Le%20nombre%22%0A%20%20%20%20%7D%0A%7D%0A%3C%2Fscript%3E” message=”Evaluation produit affiché dans la SERP en ld Json” highlight=”” provider=”manual”/]

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

[pastacode lang=”markup” manual=”%3C%3Fphp%0A%20if%20(%20(%24pagerating%20%3D%20get_post_meta(%20%24post-%3EID%2C%20’rating’%2C%20true%20)%20))%20%7B%0A%20%20%20%20%24rating%20%20%3D%20explode(%20%22%2F%22%2C%20%24pagerating%20)%3B%0A%20%20%20%20%24score%20%20%20%3D%20%24rating%5B0%5D%3B%0A%20%20%20%20%24reviews%20%3D%20%24rating%5B1%5D%3B%0A%20%20%20%20%24product%20%3D%20get_the_title()%3B%0A%20%20%20%20%24ratingoutput%20%3D%20’%3Cscript%20type%3D%22application%2Fld%2Bjson%22%3E%7B%22%40context%22%3A%20%22http%3A%2F%2Fschema.org%22%2C%22%40type%22%3A%20%22Product%22%2C%22name%22%3A%20%22’%20.%20%24product%20.%20’%22%2C%22aggregateRating%22%3A%20%7B%22%40type%22%3A%20%22AggregateRating%22%2C%22ratingValue%22%3A%20%22’%20.%20%24score%20.%20’%22%2C%22reviewCount%22%3A%20%22′.%20%24reviews%20.%20’%22%7D%7D%3C%2Fscript%3E’%3B%0A%20%20%20%20echo%20%24ratingoutput%20.%20%22n%22%3B%0A%20%20%7D%0A%3F%3E” message=”Pour WordPress en custom fields” highlight=”” provider=”manual”/]

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 :

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” :

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

aggregateRating
@type	AggregateRating
ratingValue	5
ratingCount	1

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

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” :

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.