Les microdata
Les microdata (ou microdonnées) sont une fonctionnalité HTML5 - créée par le WHATWG - qui permet d'offrir du contenu sémantique dans les documents HTML. Leur utilisation est une manière de formater le contenu du site afin qu'il soit plus facilement assimilé par les moteurs de recherche. En clair, cela fonctionne de la même manière que l'application d'un style à votre texte, sauf qu'il n'y a aucun changement visuel. Ainsi, au lieu de mettre votre texte en gras ou en italique, les microdata indiquent aux robots des moteurs de recherche ceci est l'adresse d'une entreprise ou encore ceci est le nom d'un produit.
Contrairement aux balises métadonnées qui tentent de définir le contenu d'une page entière, les microdata visent une section spécifique du contenu, voire un seul mot.
Exemple de microdata: les Rich Snipets
Google se sert des informations transmises par les microdata pour créer les Rich Snippets (ou "résultats enrichis"). Concrétement, les résultats affichés dans les pages des moteurs de recherche sont alors illustrés par des images miniatures, par des évaluations de produits, par des critiques ou encore par le profil des auteurs. Ces éléments supplémentaires sont déterminés par le contenu de votre page et comment ceux-ci sont définis par les microdata.
Dans cet extrait, les notes, les avis et les prix sont des informations fournies par les microdata du site.
Vous avez la possibilité de tester et de vérifier votre balisage des microdata avec l'outil de test des résultats enrichis de Google.
Les microformats et le marquage Schéma
Pour que les microdata puissent fonctionner, il est nécessaire de respecter une sémantique précise. Il existe un certain nombre de normes disponibles, mais l'une des plus notables est celle des microformats.
En 2011, Google, Yahoo et Bing ont annoncé qu'elles soutiennaient une nouvelle norme de microdata connue sous le nom de Schéma. Bien que les moteurs de recherche soutiendront différentes normes de microdata, il est préférable de n'utiliser qu'un seul marquage afin de ne pas surcharger le code de votre site.
Comment cela fonctionne-t-il ?
Les microdata fonctionnent de la même manière qu'une classe CSS.
L'élément que vous formatez (par exemple, vos coordonnées) est enveloppé dans un <span> avec une définition spécifique qui déclare quel standard que vous utilisez.
Ensuite, d'autres <span> sont placées à l'intérieur pour définir les propriétés spécifiques (par exemple votre nom, votre adresse, votre numéro de téléphone, etc).
Prenons un exemple :
Vous souhaitez indiquer vos informations de contact dans votre page. Cela pourrait ressembler à ceci :
<address>
<p>Jean Viens<br/>
Société Exemple<br/>
604-555-1234<br/>
<a href="https://mon-site-web.fr/">https://mon-site-web.fr/</a>
</p>
</address>
Maintenant, utilisons le marquage spécifique microformat hCard (raccourci de "HTML vCard)") et notre balisage devient :
<address class="vcard">
<p>
<span class="fn">Jean Viens</span><br/>
<span class="org">Société Exemple</span><br/>
<span class="tel">604-555-1234</span><br/>
<a class="url" href="https://mon-site-web.fr/">https://mon-site-web.fr</a>
</p>
</address>
Ici, le nom formaté (fn), l'organisation (org), le numéro de téléphone (tel) et l'adresse web (url) ont été identifiés en utilisant des noms de classes spécifiques. L'ensemble est intégré dans une classe vcard, qui indique que les autres classes forment une hCard. A noter qu'il existe d'autres classes (optionnelles) de hCard et que le rendu visuel est exactement le même dans tous les cas.
Retenez enfin qu'il est possible pour les plugins de navigateurs d'extraire ces informations et de les transférer vers d'autres applications, comme un carnet d'adresses par exemple.