Portrait Olivier Duffez

Olivier Duffez

Créateur de WebRankInfo,
consultant en référencement

Les Rich Snippets de Google, basés sur l’analyse des données web structurées

Depuis le temps que les spécialistes du secteur se demandaient pourquoi Google n’exploitait pas plus les données structurées ! Google vient d’annoncer qu’ils allaient utiliser les 2 principaux formats de marquage de données structurées (les microformats et le standard RDFa) pour afficher certains résultats de manière enrichie : note moyenne et nombre d’avis par les consommateurs, adresse d’une entreprise, etc. Un petit pas vers le web sémantique… Cet article détaille tout cela et explique comment les webmasters doivent mettre à jour leurs sites pour en tirer profit.

Le principe des microformats et de RDFa

Intérêt des données structurées

Rien de bien nouveau dans tout ça, des standards existent depuis des années, mais tant que des acteurs majeurs comme Google ne les utilisent pas, cela n’avance pas tellement. Peut-être d’ailleurs que cette étape va nous faire avancer vers ce qu’on appelle le web sémantique ou peut-être le web 3.0 ? Il faudra encore être patient…

Imaginons que vous deviez afficher des données structurées sur une page web (des avis de consommateurs sur un produit, les coordonnées d’une personne ou d’une entreprise, etc.). Pour que l’internaute les repère correctement, vous n’avez pour l’instant pas vraiment d’autre choix que d’utiliser des balises HTML standard accompagnées de styles CSS, d’agencement à l’écran et de quelques explications. Mais qu’en est-il des moteurs de recherche ? Comment peuvent-ils comprendre que 43 est ici le nombre d’avis, que 4,3 est la note moyenne attribuée à un produit, etc. ? C’est ici qu’interviennent les standards permettant de définir les propriétés des données figurant sur votre page web.

Prenons l’exemple d’une page affichant les coordonnées d’une entreprise. Voici le rendu vu par l’internaute :

Pizzéria Vechio
Tél : 05 62 73 34 73
22, allées Jean Jaurès
31000 Toulouse (France)

Voici un exemple de code HTML classique pour ces données :

<div>Pizzéria Vechio<br />
Tél : 05 62 73 34 73<br />
22, allées Jean Jaurès<br />
31000 Toulouse (France)
</div>

Voici un exemple de code HTML utilisant les microformats pour ces mêmes données :

<div class="vcard"><span class="fn org">Pizzéria Vechio</span>
Tél : <span class="tel">05 62 73 34 73</span>
<div class="adr">
<span class="street-address">22, allées Jean Jaurès</span><br />
<span class="postal-code">31000</span>
 <span class="locality">Toulouse</span>
 (<span class="country-name">France</span>)
</div>
</div>

Grâce aux noms de classes CSS standardisées utilisés dans ce second exemple de code, il est très facile d’extraire les données sémantiques sans erreur (nom de l’entreprise, téléphone, adresse complète).

Application aux pages de résultats Google (SERP)

3 ingénieurs de Google l’expliquent sur le blog officiel ( certaines données structurées vont être spécialement analysées par Google afin d’afficher quand c’est possible des descriptions enrichies dans les pages de résultats (SERP). Voici par exemple l’affichage d’un résultat correspondant à une page qui contient des données structurées de type « Avis de consommateurs » (review) :

Exemple de Rich Snippet Google : avis de consommateurs (reviews)

Exemple de Rich Snippet Google : avis de consommateurs (reviews)

Optimiser son référencement avec les microformats ou RDFa

Pour avoir une chance d’avoir vos résultats enrichis de cette façon, il faut bien entendu intégrer vos données structurées sur vos pages avec l’un ou l’autre des formats reconnus par Google. Vous n’avez aucune garantie que Google en tienne compte, surtout à l’heure où j’écris cet article, mais je vous conseille de tester. Pour ma part, je l’ai testé depuis pas mal de temps dans mes travaux sur l’optimisation du référencement local et j’en parle en formation Google Maps.

Comment tagguer des données associées à un avis (review)

Si vous affichez des avis sur vos pages, voici les noms des structures à utiliser. Dans les cas où les 2 standards diffèrent, le nom à utiliser pour les microformats est indiqué entre parenthèses.

Propriété Description
itemReviewed (item) L’élément pour lequel est donné l’avis
name (fn) Nom de l’élément pour lequel est donné l’avis. Elément fils de item.
rating La valeur numérique attribuée à l’avis (un nombre entre 1 et 5, 1 étant la plus mauvaise note et 5 la meilleure)
reviewer Nom de la personne ayant donné son avis
dtreviewed Date de l’avis
description Le contenu de l’avis

Comment tagguer des données associées à une personne

Comme précédemment voici les propriétés à utiliser :

Propriété Description
name (fn) Nom
nickname Surnom
url Lien vers une page web (par exemple le site de la personne)
affiliation (org) Nom de l’organisation avec laquelle la personne est associée (par exemple son employeur). Si fn et org ont exactement la même valeur, Google considèrera que ces données sont celles d’une entreprise ou d’une organisation et non d’une personne.
address (adr) Adresse de la personne
street-address Rue
locality Ville (élément fils de address)
region Région géographique (état, province, comté). Elément fils de address.
postal-code Code postal. Elément fils de address.
country-name Pays. Elément fils de address.
photo Référence à une photo de la personne
title Fonction de la personne (par exemple Directeur financier)
role Rôle de la personne (par exemple Expert comptable)

Comment tagguer des données associées à un produit

Comme précédemment voici les propriétés à utiliser :

Propriété Description
brand Marque du produit
category Catégorie du produit (par exemple « Livres » ou « Voitures »)
description Description du produit
name (fn) Nom du produit
price Prix du produit (nombre à virgule flottante pouvant inclure une monnaie)
photo URL d’une photo du produit
url URL de la fiche produit

Comment tagguer des données associées à une entreprise

Comme précédemment voici les propriétés à utiliser :

Propriété Description
name (org/name) Nom de l’entreprise (avec les microformats il est conseillé d’utiliser à la fois org et name.
url Lien vers une page web (par exemple le site de l’entreprise)
affiliation (org) Nom de l’organisation avec laquelle la personne est associée (par exemple son employeur). Si fn et org ont exactement la même valeur, Google considèrera que ces données sont celles d’une entreprise ou d’une organisation et non d’une personne.
address (adr) Adresse de l’entreprise
street-address Rue
locality Ville (élément fils de address)
region Région géographique (état, province, comté). Elément fils de address.
postal-code Code postal. Elément fils de address.
country-name Pays. Elément fils de address.
tel Numéro de téléphone

Prévenez Google !

Si vous avez utilisé ce type de données structurées (ou que vous prévoyez de le faire bientôt), vous pouvez toujours en informer Google via ce formulaire. Aucune réponse n’est garantie, ni aucune prise en compte de votre site, mais qui ne tente rien n’a rien ;-)

Conseils et discussions sur les Rich Snippets…

Vous pouvez consulter les spécifications officielles des microformats hCard ou hReview ou hProduct, celles de RDFa. Nous discutons de tout ça dans le forum WebRankInfo : Utiliser les microformats ou RDFa pour les Rich Snippets de Google.

Cet article vous a-t-il plu ?

Cliquez pour voter !

Laisser un commentaire

Remarques :

  • Si vous souhaitez poser une question ou détailler un problème technique, il ne faut pas utiliser le formulaire ci-dessous qui est réservé aux avis. Posez votre question directement dans le forum Gmail de WebRankInfo. L'inscription est gratuite et immédiate.

  • En postant un avis, vous acceptez les CGU du site WebRankInfo. Si votre avis ne respecte pas ces règles, il pourra être refusé. Si vous indiquez votre adresse email, vous serez informé dès que votre avis aura été validé (ou refusé...) ; votre adresse ne sera pas utilisée pour vous envoyer des mailings et ne sera pas revendue ou cédée à des tiers.

21 commentaires

Nugues

Tout cela est infiniment intéressant, merci pour les informations précises et la description des tags.
Merci
Nugues

Répondre
Guide des loisirs

C’est très intéressant, cela pourrait permettre d’attirer l’attention de l’internaute sur un résultat de recherche (en comparaison d’un résultat conccurant sans snippet ).
Mais, cela ne risque t’il pas d’être la porte ouverte aux robots aspirateurs (qui sévicent déjà) en leur permettant d’identifier facilement la structure d’un contenu (notamment type annuaire)?
C’est robots existent déjà, mais ils sont développés spécifiquement pour aspirer tel ou tel site web, là ça pourrait leur permettre de fonctionner sur tout ceux utilisant cette syntaxe…

Répondre
djerba

Merci pour l’info
Je vient de tester sur mon annuaire :)
Et je confirme que Google le teste aussi sur Google map !
Voici l’exemple concret :
en fait, j’ai remarqué des visites à travers un Map Marker d’un hôtel que je n’ai pas ciblé ;)

http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=hasdrubal thalassa djerba&vps=1&jsv=158b&sll=33.750606,11.105804&sspn=0.559501,1.235962&ie=UTF8&latlng=33886659,10847903,2915429456576663877&ei=52cPSpqnJIumoQP65bQQ&cd=1

Ces données sont mal intégrées et ça explique que Google fait le remix en faisant la collecte entre ses différents services

Répondre
Sun Location

Encore un pas vers une analyse de google plus poussée du contenu de nos sites internet :)…

Es ce que les microformats hCard ou hReview ou hProduct sont les seuls ou es ce qu’il en existe d’autres adapté à d’autres modèles de données ?

Répondre
Olivier Duffez

Pour l’instant j’ai l’impression que les seuls microformats pris en compte sont hCard, hReview et hProduct, mais Google a dit que ça allait évoluer.

Répondre
pcamliti

Bravo WRI pour cette étude et une synthétisation comme vous savez si bien le faire !

Répondre
benjamin935

Effectivement il était temps que les microformats soient pris en compte par google. Yahoo tourne du sujet depuis un moment mais comme yahoo n’a plus vraiment le même poids que google cela ne décollait pas.
Par contre lors de l’intégration des micro formats dans une page web j’ai cru comprendre que l’insertion des class css seule suffisait pas; il faut aussi intéger l’appel à une dtd particulière. Est ce vrai ?

Répondre
Olivier Duffez

Je crois bien que la DTD c’est pour le RDFa, pas pour les microformats.

Répondre
Mister Bark

Les noms comme « name » ou « title » me semblent très mal choisis par ces standards.
En effet, bon nombre de bugs css existent sous internet explorer lorsqu’une class porte le nom d’une balise…

Je me souviens d’un problème IE sur lequel j’avais passé des jours :
ma class s’appelait input, et internet explorer ne faisait pas la différence dans le css entre « input », qui est le nom d’une balise, et « .input » qui est le nom d’une class !
Résultat, toutes les balises input étaient concernées…

CCL: ne JAMAIS donner comme nom de class (ou id) un nom de balise, de champ, etc.

Répondre
Nicolas

Je vous invite à lire :

Répondre
David

Déjà qu’il n’est pas facile de faire implémenter des titres et metas à certains annonceurs, cela va se compliquer mais les résultats seront tellement mieux !!!

Merci pour cet artcile très clair et didactique.

Répondre
Nicolas

Bonjour,

Le problème de l’utilisation des microformats et de RDFa réside dans l’utilisation d’une technologie (HTML) qui n’a vocation qu’à donner la nature de l’information, technologie qui est donc inadaptée à la problématique « sémantique » traduite par le triplet RDF {sujet, prédicat, objet} .

En effet, le système de balisage HTML donne le type d’une information (titre, paragraphe, élément de liste, etc.) sans réellement apporter de sens/sémantique comme le permet XML.

C’est une bonne chose que Google se penche sur ces problématiques, mais il devrait plutôt se pencher sur RDF/XML.

Répondre
kitten13

merci pour l’article toute fois j’ai une question :

Comment appliquer exactement le tag name (fn) ?

Faut il prendre en compte le (fn) ?

merci

Répondre
vl

Merci pour cet excellent article … Peut-on envisager de mettre plusieurs class au même élément ? Par exemple le nom d’un produit,
?

le fn sera t’il prix en compte dans ce cas ? ce qui éviterai l’ajout d’un span inutile … Si quelqu’un a la réponse, je ne l’ai trouvée nulle part pour l’instant.

Répondre
Djerba

@VL
Je me rappelle bien qu’en 2008 Google a annoncé son acceptation de ces microforamats.

J’utilise : http://hcard.geekhood.net/ comme validateur

Et un plugin firefox qui exporte les vcard et qui a été suggéré par Google aussi :

Le plugin s’appelle Operator et il est très performant :)

Répondre
VL

@Djerba
Merci pour cette réponse ,
j’avais déjà installé Operator mais pas encore de validateur.
C’est chose faite, et effectivement le cumul de « class » est bien supporté …
C’est une bonne chose, mais les avis restent partagés quand au bénéfice, et poids de page supplémentaire.

Répondre
FemmeTaureau

Bonjour,
Merci pour l’article mais il semble un peu compliqué ce concept Rich Snippets.
Pouvez-vous nous détailler les sections « comment taguer » au moins par des exemples explicatifs?
Vraiment, le web sémantique me fascine car il touche l’honnêteté avec l’internaute.

Répondre
FemmeTaureau

Bonjour,
Je veux savoir quand doit-on utiliser Rdfa et quand doit-on utiliser les microformats?
Merci.

Répondre
antonio32

Bonjour tous le monde,
J’ai un site de Pizza en ligne j’obtenir le risch snippets dans les résultat de recherche de google de la page index seulement , comment faire l’amélioration pour obtenir l’image dans tous les pages de mon site et merci

Répondre
omallot

Bonjour,
merci pour ces explications…
Est-ce qu’il existe un moyen propre qui n’affiche les Rich Snippets que pour les moteurs de recherche ?

Répondre
Olivier Duffez

désolé je n’ai pas compris la question, les rich snippets sont une fonctionnalité exclusive des moteurs de recherche, ça ne peut pas s’afficher ailleurs…
si la question est « comment cacher aux internautes les informations dont ont besoin les moteurs de recherche pour afficher les rich snippets ? », la réponse est « on ne peut pas » (à part faire du cloaking, qui est interdit par les moteurs)

Répondre