En 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
Schema.org est une communauté visant à créer, maintenir et promouvoir les microdonnées. Le site fut originalement fondé par:
Google
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:
<div>
<h1>Avatar</h1>
<span>Directeur: James Cameron</span>
<span>Science fiction</span>
<img src="https://ex.smnarnold.com/microdata/avatar.jpeg">
</div>
itemscope
Afin d'indiquer que ces informations ont un lien, il est possible de leur spécifier un contexte commun via itemscope
:
<div itemscope>
<h1>Avatar</h1>
<span>Directeur: James Cameron</span>
<span>Science fiction</span>
<img src="https://ex.smnarnold.com/microdata/avatar.jpeg">
</div>
Ainsi, le contenu enfant de la balise ayant l'attribut itemscope
est à propos d'un item en particulier.
itemtype
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
.
<div itemscope itemtype="https://schema.org/Movie">
<h1>Avatar</h1>
<span>Directeur: James Cameron</span>
<span>Science fiction</span>
<img src="https://ex.smnarnold.com/microdata/avatar.jpeg">
</div>
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.
En savoir plus Liste incluant tous les types de schema.org.itemprop
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.
<div itemscope itemtype="https://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>Directeur: <span itemprop="director">James Cameron</span></span>
<span itemprop="genre">Science fiction</span>
<img itemprop="image" src="https://ex.smnarnold.com/microdata/avatar.jpeg">
</div>
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.
meta
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.
<div itemscope itemtype="https://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>Directeur: <span itemprop="director">James Cameron</span></span>
<span itemprop="genre">Science fiction</span>
<img itemprop="image" src="https://ex.smnarnold.com/microdata/avatar.jpeg">
<meta itemprop="sameAs" content="https://www.imdb.com/title/tt0499549/">
</div>
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.
Emboitage
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
.
<div itemscope itemtype="https://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>Directeur:
<span itemprop="director" itemscope itemtype="https://schema.org/Person">
<span itemprop="givenName">James</span>
<span itemprop="familyName">Cameron</span>
</span>
</span>
<span itemprop="genre">Science fiction</span>
<img itemprop="image" src="https://ex.smnarnold.com/microdata/avatar.jpeg">
</div>
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.
Au billet Getting started de schema.org qui a grandement contribué à la rédaction de ce billet.