Outils pour les webmasters

La spécification HTML5 concernant les microdonnées est un moyen d'associer des libellés à des contenus de manière à décrire un type d'information spécifique (avis, personnes ou événements, par exemple). Chaque type d'information concerne un élément spécifique, comme une personne, un événement ou un avis. Par exemple, un événement est associé aux propriétés suivantes : adresse, heure de début, nom et catégorie.

Les microdonnées utilisent des attributs simples dans les balises HTML (souvent <span> ou <div>) pour pouvoir affecter des noms concis et descriptifs aux éléments et aux propriétés. Vous trouverez ci-dessous un exemple de bloc HTML indiquant les coordonnées de Pierre Dumoulin.

<div> 
  Je m'appelle Pierre Dumoulin, mais on m'appelle Pierrot. Voici ma page d'accueil :
  <a href="http://www.example.com">www.example.com</a>
  J'habite à Strasbourg, en Alsace, et je suis ingénieur chez la société ABC.
</div>

Vous trouverez ci-dessous le même contenu HTML balisé à l'aide des microdonnées.

<div itemscope itemtype="http://data-vocabulary.org/Person"> 
  Je m'appelle <span itemprop="name">Pierre Dumoulin</span> 
   
  mais on m'appelle <span itemprop="nickname">Pierrot</span>. 
   
  Voici ma page d'accueil :
  <a href="http://www.example.com" itemprop="url">www.example.com</a>
  
  J'habite à Strasbourg, en Alsace, et je suis <span itemprop="title">ingénieur</span>
  
  chez la <span itemprop="affiliation">société ABC</span>.
</div>

Description de l'exemple

• Sur la première ligne, la propriété itemscope indique que le contenu de la balise <div> est un élément. itemtype="http://data-vocabulary.org/Person indique que cet élément est une personne.
• Chaque propriété de cet élément est identifiée à l'aide d'un attribut itemprop. Par exemple, itemprop="name" décrit le nom de la personne.

Entités imbriquées

L'exemple ci-dessus contient les coordonnées de Pierre Dumoulin, mais pas son adresse. Il contient le même code HTML, mais ici, il inclut la propriété address.

   Je m'appelle <span itemprop="name">Pierre Dumoulin</span>, 
   
   mais on m'appelle Pierrot.
   Voici ma page d'accueil : 
   <a href="http://www.example.com" itemprop="url">www.example.com</a>.
  
   J'habite à 
   <span itemprop="address" itemscope
      itemtype="http://data-vocabulary.org/Address">
      <span itemprop="locality">Strasbourg</span>, 
     
      <span itemprop="region">Alsace</span> 
   </span>
   et je suis <span itemprop="title">ingénieur</span>
  
   chez <span itemprop="affiliation">Tartampion</span>.
  
</div>

Description de l'exemple

• La propriété address est elle-même un élément possédant ses propres propriétés. Pour cela, l'attribut itemscope est associé à l'élément qui sert à déclarer la propriété address, puis l'attribut itemtype est utilisé pour spécifier le type d'élément décrit, comme ceci : <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">.

Pour d'autres d'exemples, consultez la page Éléments imbriqués.

Dates et heures

Pour spécifier des dates et des heures précises, utilisez l'élément time avec l'attribut datetime. Ici, la propriété startDate indique la date de début d'un événement. La valeur de l'attribut datetime est spécifiée au format de date ISO. Ce format permet de fournir aux moteurs de recherche des informations détaillées au format ISO concernant la date, l'heure et éventuellement le fuseau horaire ("2009-10-15T19:00-08:00"), tout en affichant la date sur votre page de manière intelligible pour les visiteurs ("15 octobre 2009, 19 h").

<time itemprop="startDate" datetime="2009-10-15T19:00-08:00">15 octobre 2009, 19 h</time>

Contenu masqué

En règle générale, le contenu masqué n'est pas affiché dans les pages Google. En d'autres termes, n'essayez pas d'afficher du contenu pour les visiteurs de cette manière. Utilisez plutôt le texte masqué pour baliser des informations séparément à l'attention des moteurs de recherche et des applications Web. Nous vous conseillons de baliser le texte qui est effectivement visible par vos visiteurs lorsqu'ils consultent vos pages Web.

Cette consigne fait toutefois l'objet de quelques exceptions. Il peut parfois être intéressant de fournir des informations plus détaillées aux moteurs de recherche, même si vous ne souhaitez pas que ces informations puissent être visibles sur votre page. Par exemple, si un restaurant reçoit une note de 8,5, les utilisateurs vont comprendre que l'évaluation est basée sur une échelle de 1 à 10. En revanche, les moteurs de recherche ne pourront pas le deviner. Dans ce cas, vous pouvez l'indiquer à l'aide de l'élément meta, comme suit :

<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
   Note : <span itemprop="value">8,5</span>
   
   <meta itemprop="best" content="10" />
</div>

Description de l'exemple

• La balise meta sert à spécifier des informations supplémentaires non visibles sur la page Web. Dans cet exemple, il s'agit de la meilleure note possible, "10". La valeur de la propriété est définie à l'aide de l'attribut content.

De même, spécifier la durée d'un événement au format de durée ISO permet de s'assurer qu'elle apparaîtra correctement dans les résultats de recherche :

Durée : 
<span>1 h 30<meta itemprop="duration" content="PT1H30M" />
</span>

Description de l'exemple

• Utilisez la balise meta pour définir la valeur de la propriété (dans cet exemple, une durée). Cela vous permet d'utiliser la valeur de l'attribut content ("PT1H30M") pour spécifier la durée au format de durée ISO 8601, tout en affichant cette même durée de manière intelligible pour les visiteurs sur la page ("1 h 30").
• Google regarde l'élément parent de la balise meta pour identifier les informations qui sont représentées différemment dans la balise meta. Dans cet exemple, il est donc important de veiller à ce que le premier élément parent de la balise meta contienne le texte "1 h 30".

Pour consulter le vocabulaire et des exemples spécifiques, reportez-vous aux articles suivants :

• Avis
• Personnes
• Produits
• Établissements et entreprises
• Recettes
• Événements
• Vidéos (Bien que Google accepte le balisage des vidéos, nous l'utilisons actuellement dans le seul but d'optimiser nos résultats de recherche de vidéos.)

Pour vérifier votre balisage, utilisez l'outil de test des données structurées.