Sémantiser son site web avec Schema.org

Schema.org

Bien qu’extrêmement complexes, les algorithmes des moteurs de recherche sont toujours incapables en 2011 de fournir une réponse systématiquement pertinente aux requêtes des internautes. Pour améliorer la pertinence des résultats de recherche, l'analyse syntaxique ne suffit plus : il faut passer à un web sémantique. Le principe du web sémantique est de décrire tout objet du web avec une métadonnée. Ces métadonnées décrivent fidèlement l’objet web et sont lisibles et compréhensibles des humains comme des machines.

Si le web sémantique commence à se développer chez les gros acteurs du web (Open Graph utilisé par Facebook, RDFa par Yahoo !, …), la multiplicité des formats de données sémantiques représente un frein à son déploiement. C’est pourquoi Google, Yahoo! et Bing se sont unis en juin 2011 pour définir et proposer un format commun de microdonnées sémantiques nommé Schema.org. Ce format est destiné à devenir le standard de référence pour ajouter des données sémantiques à un site web.

Le fonctionnement de Schema.org

Concrètement, Shema.org propose d’ajouter des attributs dans le code HTML pour associer une métadonnée à une information. En fonction du type d’informations à décrire (un livre, un film, une personne, un produit, un restaurant, …), un vocabulaire spécifique, constitué de propriétés, est disponible et détaille sur la page schema.org/docs/full.html.

Essayons par exemple de décrire Tintin avec Schema.org

Dans un premier temps, nous définissons la section de la page consacrée à la description de Tintin. Pour cela, nous utilisons l’attribut itemscope. Cet attribut délimite les informations spécifiques à un élément précis. Cela nous donne par exemple <div itemscope> </div>

Nous recherchons ensuite dans la documentation de Schema.org le type de vocabulaire qui pourrait décrire Tintin. Le vocabulaire Person, sous-vocabulaire de Thing, permet de décrire une personne vivante, morte, immortelle ou fictive. La liste des propriétés disponibles est accessible à cette page : schema.org/Person

Il est ensuite nécessaire de déclarer dans le code HTML le type d’élément que nous souhaitons décrire. C’est l’attribut itemtype qui va nous permettre de le déclarer. La valeur de l’attribut itemtype sera l’url du site schema.org contenant la liste des attributs de notre élément. Cette valeur peut se déclarer juste après l’attribut itemscope. Notre code HTML ressemble maintenant à :

<div itemscope itemtype="http://schema.org/Person">

Grâce à l’attribut itemprop, nous allons ajouter des propriétés à Tintin, comme par exemple son nom et sa date de naissance. La valeur de l’attribut itemprop doit obligatoirement être une propriété définie sur shema.org/Person. Notre code HTML ressemble maintenant à :

<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Tintin</span>
<span itemprop="birthDate">10 janvier 1929</span>
</div>

Rajoutons l’adresse postale de Tintin. Cela se complique légèrement car si la propriété Adress est bien associée au vocabulaire Person, sa valeur doit être de type PostalAdress (schema.org/PostalAddress). Nous allons donc avoir de nouveaux attributs itemscope et itemtype à l’intérieur de notre balise <div itemscope itemtype="http://schema.org/Person">. Cette imbrication va permettre d’élargir considérablement le nombre de propriétés que nous allons pouvoir utiliser. Notre code HTML ressemble maintenant à :

<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Tintin</span>
<span itemprop="birthDate">10 janvier 1929</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">26, rue du Labrador</span>
<span itemprop="addressLocality">Bruxelles</span>
<span itemprop="postalCode">1000</span>
<span itemprop="addressCountry">Belgique</span>
</div>
</div>

Pour ajouter la photo de Tintin et son site web officiel, il suffit simplement d’ajouter une balise img avec itemprop="image" et une balise "a" avec itemprop="url". Voici notre code final :

<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Tintin</span>
<span itemprop="birthDate">10 janvier 1929</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">26, rue du Labrador</span>
<span itemprop="addressLocality">Bruxelles</span>
<span itemprop="postalCode">1000</span>
<span itemprop="addressCountry">Belgique</span>
</div>
<img src="tintin.jpg" itemprop="image" />
<a href="http://www.tintin.com" itemprop="url">Le site web de Tintin</a>
</div>

On se rend vite compte des possibilités offertes par Schema.org et des gains potentiels qu’il pourrait nous apporter au niveau du référencement. Néanmoins, décrire chaque donnée d’un site web avec Schema.org est à l’heure actuelle irréaliste en raison du temps nécessaire. Des outils permettant d’automatiser l’implémentation de schema.org seront les bienvenus !