Non, ce n’est ni une insulte, ni un gros mot. Les rich snippets, en français extraits enrichis, sont des données codifiées que vous pouvez intégrer sur votre page web pour rajouter des informations compréhensibles directement par les moteurs de recherche. Celles-ci sont affichées sur la page des résultats, en plus des infos traditionnelles, afin d’apporter à l’internaute des détails supplémentaires sur une page. Elles n’influent en aucun cas sur le positionnement de votre site sur les moteurs.
Comme les images sont plus parlantes que les mots, voici une petite explication illustrée :
Les extraits basiques
Sur google, après avoir saisi une requête de recherche, vous atterissez sur ce qu’on appelle la SERP (page de résultats). Chaque SERP possède de 10 à 100 résultats (au choix) comportant chacun trois caractéristiques basiques :
- TITLE
- URL
- DESCRIPTION
Les extraits enrichis
Grâce aux extraits enrichis, vous pouvez ajouter des données et même modifier l’affichage de certaines infos de votre page :
Cette page web utilise les rich snippets. Vous les voyez ?
Tout d’abord l’URL est construite sur le format du fil d’ariane qui permet d’aller directement à l’élément parent de la page recherchée. C’est pratique mais surtout beaucoup plus esthétique qu’une simple URL parfois incompréhensible pour les internautes.
L’avis des visiteurs a également été rajoutée et, même si sa valeur est discutable car cela est facilement manipulable par le webmaster du site concerné, cela peut sensiblement améliorer le taux de clics vers votre page en accrochant l’oeil des consommateurs potentiels.
Vous pouvez aller encore beaucoup plus loin. Par exemple, si vous êtes un groupe de musique vous pouvez ajouter un lien vers quatre de vos chansons avec leur durée respective directement dans les SERP.
Classe, non ?
Je veux en intégrer sur mes pages, comment faire ?
Le principe est assez simple à comprendre et à appliquer si vous vous y connaissez déjà en HTML car il suffit simplement d’ajouter des attributs à vos différentes balises (div, p, span, etc..).
Vous devez tout d’abord sélectionner le format de balisage que vous voulez utiliser.
Il en existe trois différents :
- microdonnées
- microformats
- RDFa
Je vous recommande d’utiliser le format de microdonnées. C’est celui que j’ai toujours mis en place et je n’ai jamais eu de soucis particulier (c’est d’ailleurs celui qui est conseillé partout). Toute la documentation est disponible sur le site Schema.org.
Je ne sais pas trop par où commencer pour faire un fil d’ariane, un peu d’aide svp !
Imaginons que vous possédiez un site e-commerce ayant ce type d’arborescence :
Pour accéder à « produit 1″, l’url qui s’affiche dans les SERP est à l’heure actuelle :
http://www.mon-site.com/high-tech/marque1/objet.php?id=1
Vous aimeriez afficher une URL façon fil d’ariane (breadcrumb en anglais) :
http://www.mon-site.com > high-tech > Marque 1
Rendez-vous sur schema.org et recherchez WebPage pour voir le tableau contenant les différentes propriétés de cet élément (http://schema.org/WebPage).
Construisez maintenant votre fil d’ariane :
1) Pour pouvoir utiliser la propriété breadcrumb vous devez signaler au moteur que votre page sera d’un type WebPage
<body itemscope itemtype="http://schema.org/WebPage">
2) Déclarez votre bloc « fil d’ariane » :
<div itemprop="breadcrumb"></div>
3) Déclarez ensuite, à l’intérieur de ce bloc, les différents éléments enfants :
<a href="http://www.mon-site.com/high-tech" title="Consultez nos produits High-Tech !">
High-Tech
</a>
4) Séparez chaque élément via le symbole > :
<div itemprop="breadcrumb">
<a href="http://www.mon-site.com/high-tech" title="Consultez nos produits High-Tech !">
High-Tech
</a> >
<a href="http://www.mon-site.com/high-tech/Marque1" title="Consultez tous les produits High-Tech de Marque 1 !">
Marque 1
</a> >
<a href="http://www.mon-site.com/high-tech/Marque1/objet.php?id=54" title="Les produits de Marque 1">
Objet
</a>
</div>
Voilà, votre fil d’ariane est construit et devrait être pris en compte par Google dans quelques jours (voire moins) !
N’hésitez pas à naviguer sur schema.org et explorer l’ensemble des différentes propriétés disponibles pour pouvoir profiter pleinement
du potentiel d’affichage des SERP !
Bon rich snippeting !
Merci pour ces précisions!
Il y a une chose que je n’ai pas bien saisi en revanche. Sur mon site internet, j’aimerais mettre un système de note par rapport à la qualité de mes cours de cuisine.
Je n’ai pas tout à fait bien compris le système de fonctionnement des Rich Snippets, pourrait-on comparer cela à une sorte de « masque » fournit. J’entends par là, est ce que l’on appose ces rich snippets sur n’importe quel système d’annotation dont j’ai créé le design ou non?
En tout cas merci pour ce post!