Introduction aux microdonnées Schema.org.

Pour satisfaire l’internaute, les moteurs de recherche veulent comprendre au maximum vos pages web. En enrichissant votre code HTML avec des microdonnées, vous les aidez dans cette voie… et ils vous le rendent bien !

Prérequis.

Découvrir HTML (en anglais).

sommaire

HTML est sémantique par nature.

HTML est un langage de structuration des données. En cela, il organise le contenu d’une page, et lui donne du sens auprès des moteurs de recherche. En effet, un humain n’aurait pas grand mal à comprendre une page qui ne serait composée que de balises neutres (c’est-à-dire sans valeur sémantique), et que l’on aurait stylisées en conséquence. C’est d’ailleurs ce que l’on fait généralement (et malheureusement) dans un document rédigé avec un traitement de texte : les titres sont considérés comme des titres parce qu’ils sont plus grands, les éléments importants parce qu’ils sont en italique, et ainsi de suite.

Or, comme tout langage de balises descendant de XML (Wikipédia), HTML nous oblige à structurer nos données. HTML 5 favorise plus encore la qualité sémantique, et c’est le langage que nous utiliserons dans l’exemple qui suit.

sommaire

Exemple d’une fiche personnage (sans microdonnées).

Imaginons que je rédige une page web pour présenter Perry l’ornithorynque, un personnage de série animée. Je prévois ici trois blocs : le premier pour l’intitulé, le deuxième pour la description (avec un lien vers l’article Wikipédia), et le troisième pour l’illustration.

<h1>Perry l'ornithorynque</h1> <!-- Intitulé -->
<p> <!-- Description -->
 <a href="http://fr.wikipedia.org/wiki/Phineas_et_Ferb#Perry_l.27ornithorynque">Perry l'ornithorynque</a>
 est agent secret, et son grognement fait craquer toutes les filles !
  <br />Voici sa photo :
  <figure> <!-- Illustration -->
   <img alt="Perry l'ornithorynque"
    src="http://renoult-jonathan.tilde3.eu/mes-contenus/images/perry.png" />
 </figure>
</p>

À ce niveau, le code est lu différemment, qu’il s’agisse d’un humain ou d’un robot. Ainsi, le robot comprend qu’il y a :

  1. un titre,
  2. un paragraphe avec une URL,
  3. une image.

Néanmoins, il ne sait pas faire le lien entre eux. Il ne comprend pas qu’il s’agit de la description d’un personnage. Une phrase comme Voici sa photo n’a absolument aucune signification pour lui. Il faut donc aider le robot à comprendre cette page, car c’est lui qui va la référencer.

sommaire

HTML 5 est sémantique par destin.

En , les moteurs de recherche Google, Bing, Yahoo! et Yandex lancent leur propre schéma de microdonnées pour HTML 5 : Schema.org (site officiel, en anglais). Comme tout autre schéma, il permet d’enrichir sémantiquement le code HTML à l’aide d’attributs à ajouter dans les balises. Chaque attribut va alors invoquer l’une des nombreuses fonctionnalités de ce schéma.

La figure n°1 définit les trois attributs fondamentaux utilisés par Schema.org. Le contenu de l’attribut change selon la fonction que lui réserve l’intégrateur.

Attribut Fonction
itemscope Annonce que le contenu de la balise est défini par l’un des types du schéma.
Il s’agit d’un attribut vide (son équivalent est itemscope=""). Cet attribut est toujours accompagné d’itemtype.
itemtype Définit, à l’aide d’une URL spécifique, le type du schéma utilisé dans la balise.
De nombreux domaines sont couverts, et servent à décrire un lieu, une personne, un évènement, un document, etc.
itemprop Définit l’une des propriétés du type.
Chaque type contient plusieurs propriétés. Ce sont ces attributs qui définissent précisemment le contenu d’une balise.
Figure n°1 : Fonctions des trois attributs fondamentaux de Schema.org.

Vous l’avez compris, les attributs Schema.org définissent ou affinent le contenu d’une balise. En cela, certaines données non balisées nécessiteront sans doute de l’être afin d’accueillir la propriété adéquate. Si aucune balise n’est adaptée, il suffira d’utiliser — comble du paradoxe — les deux balises neutres proposées par HTML : <span> (balise en ligne) et <div> (balise bloc).

sommaire

Exemple d’une fiche personnage (avec les microdonnées Schema.org).

Revenons donc à notre exemple de fiche personnage, et tentons d’en améliorer la sémantique à coup de microdonnées.

Nous allons utiliser le type de base de Schema.org. C’est le type le plus simple, mais dont tous les autres découlent ; et ne sont finalement que des versions de plus en plus affinées. Il s’agit de Thing (« chose » en anglais). On ne peut pas plus général !

La figure n°2 décrit les quatre propriétés qui le composent. Comme avec tous les autres types, ces propriétés ne sont pas toutes nécessaires ; elles n’ont pas besoin d’être toutes utilisées.

Propriété Fonction
name Associe un nom à l’élément (cette fameuse chose).
url Associe une url à l’élément.
description Associe une courte description à l’élément.
image Spécifie l’url d’une image associée à l’élément.
Figure n°2 : Fonctions des quatre propriétés du type Thing pour Schema.org.

Si l’on applique ces quatre propriétés à notre page personnage, on affine considérablement son sens aux yeux des moteurs de recherche. Voici ce que je propose :

<!-- Type d'élément défini -->
<div itemscope itemtype="http://schema.org/Thing">
 <!-- Intitulé -->
 <h1 itemprop="name">Perry l'ornithorynque</h1>
 <!-- Description -->
 <p itemprop="description">
  <!-- Url -->
  <a itemprop="url" href="http://fr.wikipedia.org/wiki/Phineas_et_Ferb#Perry_l.27ornithorynque">Perry l'ornithorynque</a>
  est agent secret, et son grognement fait craquer toutes les filles !
  <br />Voici sa photo :
  <figure>
  <!-- Illustration -->
   <img itemprop="image" alt="Perry l'ornithorynque"
    src="http://renoult-jonathan.tilde3.eu/mes-contenus/images/perry.png" />
  </figure>
 </p>
</div>

Et voilà d’un côté le rendu à l’écran, et de l’autre le résultat dans l’outil pour données structurées de Google.

sommaire

Conclusion.

Affiner la sémantique des pages web, c’est d’abord faire gagner l’internaute : en effet, les moteurs répondent de mieux en mieux aux requêtes des utilisateurs. Mais votre site lui-même est gagnant : il apparaît de manière logique et élégante dans les SERP (pages de résultats de recherche), et génère donc plus de clics. On peut même penser qu’à terme, les moteurs favorisent les pages web « enrichies ». Pas étonnant que le projet Schema.org soit supporté par les plus importants moteurs du marché et soit aujourd’hui une référence !

sommaire