MicrodonnéesEn tant qu'humains🧍, lorsque nous parcourons une page web il nous est possible d'effectuer des corrélations entre différentes informations afin de mieux les comprendre et les interpréter dans leur contexte. Cependant, les moteurs de recherche 🤖 n'ont pas encore atteint ce niveau de sophistication. Il est donc important de les aider avec des balises et attributs supplémentaires.
Par exemple, si un article est intitulé "Avatar", est-ce un article à propos des icônes utilisées afin de représenter une personne ou encore du film de James Cameron?
Sans même y réfléchir, une image répondra probablement à notre question, mais pour le moteur de recherche qui n'est pas en mesure d'analyser l'image, la question restera entière.
D'où l'importance de pouvoir lui spécifier qu'une information est à propos d'un film 🎥, un lieu, une personne, etc. Ainsi, le moteur de recherche pourra déterminer avec plus de précision quand afficher notre page, comment gérer son aperçu sur la page de résultats, comment l'utiliser avec des assistants vocaux (Alexa, Google Home, Siri, etc.), gérer son affichage en mode lecture (Reader mode), etc.
Schema.org est une communauté visant à créer, maintenir et promouvoir les microdonnées. Le site fut originalement fondé par:
- Microsoft
- Yahoo
- Yandex 🇷🇺
Il recense les microdonnées disponibles et reconnues par les moteurs de recherche les plus communs.
Reprenons l'exemple du film Avatar. Une partie du code sur notre page pourrait ressembler à ceci:
Afin d'indiquer que ces informations ont un lien, il est possible de leur spécifier un contexte commun via itemscope:
Ainsi, le contenu enfant de la balise ayant l'attribut itemscope est à propos d'un item en particulier.
Afin d'être plus précis, il est possible de spécifier le type d'item abordé en ajoutant l'attribut itemtype après itemscope.
Dans ce cas, il s'agit d'un item de type Movie.
Le type est spécifié en utilisant une URL pointant vers une définition de schema.org.
Il est ensuite possible de spécifier des propriétés propres à l'item. Ces propriétés sont définies dans la page schema.org correspondant au type d'item en question.
Dans cet exemple, toutes les propriétés disponibles afin de décrire un film se trouvent à l'adresse suivante: schema.org/Movie.
Ainsi, les moteurs de recherches comprendront qu'un film de science-fiction, appelé Avatar et dirigé par James Cameron est mentionné sur cette page.
Une image de référence du film est même fournie au cas où le moteur de recherche déciderait d'afficher un aperçu sur sa page de résultats.
Il est possible que certaines informations soient pertinentes pour un moteur de recherche, mais non désirables pour le lecteur. Ainsi, il est possible d'utiliser la balise <meta> afin de transmettre l'information de n'importe quelle itemprop sans toutefois l'afficher.
Dans ce cas 👆, la propriété sameAs indique que le sujet de l'item est le même que celui de l'url spécifiée (page IMDb d'Avatar). Le but de cette propriété est d'offrir une référence connue au moteur de recherche afin qu'il comprenne exactement le sujet traité.
Cependant, pour des raisons esthétiques, il est possible de cacher cette information.
Nous avons vu comment définir un item de base. Néanmoins, il est fréquent que des items en contiennent d'autres.
Dans l'exemple précédent, il n'y avait qu'un item de type Movie. Cependant, il aurait été possible d'avoir un item enfant de type Person, afin de décrire plus amplement James Cameron.
Pour ce faire, un élément itemprop doit-être bonifié avec son propre contexte itemscope et propre type itemtype.
Ainsi, il est spécifié aux moteurs de recherche que le directeur du film est une personne, que son prénom (givenName) est James et que son nom de famille (familyName) est Cameron.