Rich snippet
Les snippets sont de petits textes extraits d’un site web et affichés dans les pages des résultats de recherche. Ils se composent normalement d’un titre, d’une description et d’une URL. Ils fournissent un aperçu du résultat de recherche et visent à inciter le lecteur à cliquer sur le lien. Souvent, les moteurs de recherche comme Google utilisent la meta description de la page cible et le meta titre pour le snippet. Toutefois, Google peut également "assembler" le snippet à partir des textes de la page elle-même.
Les rich snippets sont une forme plus avancée des snippets et peuvent contenir d’autres éléments comme des étoiles de notation, des liens, des images, des prix ou encore d’autres formes d’informations. Ces informations supplémentaires peuvent être mises en évidence par un formatage spécifique dans le code source et sont présentées dans les résultats de la recherche. Cela permet aux visiteurs de savoir plus rapidement si le résultat de la recherche est pertinent pour leur recherche. Les rich snippets peuvent être utilisés pour augmenter le taux de clics.
Les informations peuvent être formatées d’une certaine façon au sein du code source et affichées de manière proéminente dans les résultats de recherche. Cela est censé aider les visiteurs à décider rapidement sur quel résultat cliquer et si les résultats proposés sont pertinents pour sa recherche. Les snippets enrichis peuvent être utilisés afin d’augmenter le taux de clics.
Procédure
Pour afficher des rich snippets dans les résultats de recherche, l'information doit être présente dans le code source et marquée en conséquence. La procédure peut être exécutée en trois étapes :
Définir le langage de balisage
Les langages balisés qui sont prioritairement acceptés par Google sont les microformats, les microdonnées et les RDFa.
Étiquetage du contenu
Google soutient différentes formes d’informations. Il intègre des snippets enrichis lorsque les indications suivantes sont données :
- Critique, par exemple via l'agrégation
- Personnalités, auteurs
- Entreprises et organisations
- Recettes
- Produits
- Evénements
- Musique
- Prix
- Vidéos
- Informations relatives au droit d’auteur
Schema.org propose une collection de balises HTML et de balisages qui peuvent être employés dans l’utilisation de snippets enrichis. Les webmasters peuvent simplement piocher dans cette liste et utiliser les balisages de Schema.org correspondant. Les moteurs de recherche lisent les données structurées et incluent les snippets enrichis correspondant dans les résultats de recherche. Les moteurs de recherche accordent une grande valeur à ces données structurées, car elles permettent un accès plus simple aux informations.
La mise en valeur des données est une fonction rendue disponible par Google Search Console. Elle peut être utilisée pour marquer certaines informations pertinentes du site web, sans compléter le code source avec le langage de balisage.
Modes de mises en œuvre de snippets enrichis
Il existe différentes manières de mettre en œuvre des snippets enrichis, en fonction de l’objectif et de la norme utilisée.
Microdonnées
Les microdonnées permettent la déclaration de types d’informations utilisant le format HTML5 et attribuent des propriétés. Il est donc possible de déclarer des critiques, des personnes, des produits, des entreprises, des recettes, des événements, des organisations, des vidéos, etc., en utilisant un vocabulaire spécial. Une personne marquée par une microdonnée dans le code source pourrait ressembler à cela :
<div itemscope itemtype=“http://data-vocabulary.org/Person”> My name is <span itemprop=“name”>John Doe</span> and I am a <span itemprop=“title”>programmer</span> at <span itemprop=“affiliation”>Example Co., Ltd.</span>. More information about me can be found at: <a href=“http://www.example.com” itemprop=“url”>www.example.com</a>. I come from <span itemprop=“address” itemscope itemtype=“http://data-vocabulary.org/Address”> <span itemprop=“locality”>Cologne</span> in <span itemprop=“region”>North Rhine-Westphalia.</span> </span> </div>
L’utilisation d’itemscope au cœur du tag indique qu’un élément suit. Le type d’élément est spécifié en tant que « personne » en utilisant le itemtype= e=“http://data-vocabulary.org/Person”. L’objet est ensuite complété par des propriétés en ajoutant itemprop= “ ”. À l’intérieur des guillemets se trouvent différentes propriétés telles que le nom, le titre, l’affiliation, l’URL ou l’adresse. La propriété de l’adresse est un cas spécial et peut être divisée en sous-propriétées, comme le département et la région.
Microformats
Les microformats sont aussi utilisés dans le tag HTML et aident à la mise en place de snippets enrichis. On peut décrire les entités et autres propriétés au travers d’un attribut de classe au sein du tag. Afin de créer le concept d’une personne, le microformat hCard est utilisé et est enregistré dans le code source en utilisant class= “vcard”. L’exemple ci-dessous illustre ce à quoi un microformat pourrait ressembler.
<div class=“vcard”> My name is <strong class=“fn”>John Doe</strong> and I am a <span class=“title”>programmer</span> at <span class=“org”>Example Co., Ltd.</span>. More information about me can be found at: <a href=http://www.example.com class=“url”>www.example.com</a>. I come from <span class=“adr”> <span class=“locality”>Cologne</span> in <span class= “region”> North Rhine-Westphalia.</span> </span> </div>
Dans ce cas-là également, la personne est définie sur la base de différentes propriétés. L’adresse peut aussi être spécifiquement séparée en sous-catégories. La définition des différentes propriétés est faite en utilisant la série class=“ ”. Ce n’est pas une coïncidence si la plupart des propriétés ont le même nom que celles mentionnées dans l’exemple des microdonnées ci-dessus. Les propriétés utilisées pour la microdonnée se basent sur le microformat hCard.
RDFa
Le RDFa rend aussi possible l’intégration d’éléments avec leurs propriétés respectives. De ce fait, les critiques, les personnes ou les recettes sont directement disponibles pour les snippets enrichis. Cependant, au contraire de la microdonnée et du microformat, le RDFa emploie des tags XHTML afin de définir ces propriétés. L’exemple suivant, qui présente une utilisation du format RDFa, reprend les caractéristiques précédentes :
<div xmlns:v=“http://rdf.data-vocabulary.org/#” typeof=“v:Person”> My name is <span property=“v:name”>John Doe</span> and I am a <span property=“v:title”>programmer</span> at <span property=“v:affiliation”>Example Co., Ltd.</span>. More information about me can be found at: <a href=“http://www.example.com” rel=“v:url”>www.example.com</a>. I come from <span rel=“v:address”> <span typeof=“v:Address”> <span property=“v:locality”>Cologne</span> in <span property=“v:region”> North Rhine-Westphalia</span>. </span> </span> </div>
La déclaration d’espace nom, couplée aux xmlns, montre quel vocabulaire est utilisé dans la définition des éléments et leurs propriétés. L’usage du typeof=“v :Person ” définit le type d’élément, dans ce cas une personne. Pour ajouter une propriété, on utilise la série property=“v :Property ”. « Property » doit bien sûr être substituée par le terme correspondant. Pour préciser une URL, on utilise à la place le rel-tag. Exactement comme avec les microdonnées et les microformats, l’adresse peut aussi être sous-divisée et on peut lui attribuer plusieurs sous-propriétés.
Différences entre la microdonnée, le microformat et le RDFa
Pendant un certain temps, la microdonnée était le seul standard soutenu par Schema.org. Elle est donc reconnue par la majorité des moteurs de recherche et peut être mise en œuvre sans aucune difficulté. Cependant, un des avantages du RDFa consiste en son extension très facile en comparaison avec les standards limités des deux autres modèles. D’un autre côté, les microformats sont plutôt facile d’utilisation et peuvent en conséquence être relativement rapidement mis en œuvre.
JSON-LD comme alternative
Les données structurées peuvent également être transférées vers Google et d'autres moteurs de recherche avec JSON-LD. L'avantage de cette méthode est que le marquage des éléments de la page est échangé à l'aide d'un script. Ainsi, le code source lui-même n' a pas à être modifié.
JSON-LD travaille avec des paires nom-valeur et garantit ainsi une affectation claire des données structurées. L'affectation est faite aux mêmes schémas que pour les autres langues de marquage.
Voici comme une publication peut être affichée avec JSON-LD :
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Livre",
"name": "Introduction au SEO",
"publisher": "Ryte",
"offers":
{
"@type": "Offre",
"price": "0,00",
"priceCurrency": "EUR",
},
}
</script>
Phase de test
Après que chaque microdonnée ait été ajoutée dans le code source, elle peut être testée pour la donnée structurée en utilisant le rich Snippets Tools. Si des snippets enrichis sont affichés sur cet outil de test, on peut présumer qu’ils seront aussi prochainement visibles dans les résultats de recherche. Cependant, l’expérience a montré que cela peut prendre quelques semaines.
Importance pour le référencement
La structure des snippets joue un grand rôle dans l’attitude du visiteur et dans l'évolution du taux de clics. Le taux de clics des résultats de recherche est un facteur important dans l’évaluation et le classement d’un site web. Les snippets enrichis sont utilisés pour mettre en valeur des résultats de recherche individuels, car les éléments visibles comme les vidéos, les images et les étoiles de notation peuvent être intégrés. Parmi les résultats de recherche normaux, les rich snippets sont particulièrement visibles et peuvent conduire à un plus grand nombre de clics sur le snippet. L'optimisation du référencement a entre-temps développé sa propre niche sous la forme de Rich Snippet Optimization, ou optimisation des rich snippets.