Microdatas et HTML5

Si les microformats (μF) ont fait leur apparition dès 2003 par le biais de XFN (Xhtml Friends Network : cette syntaxe permet d’indiquer quelles relations existe entre deux webmasters via l’attribut rel d’un lien établi entre leurs deux sites, par exemple rel="friend"), HTML5 a permis au Web sémantique de prendre un nouvel essor.

Les nouvelles balises sémantiques apportées par HTML 5 sont pour la plupart connues (<article>, <figure>, <nav>, <time>…) mais la révolution se situe également dans les attributs conçus pour intégrer des microdatas :

  • itemscope : il identifie des blocs qui sont des éléments balisés (dont les balises ont été enrichies d’informations)
  • itemtype : il donne le type d’élément que l’on définit (exemple : Person)
  • itemprop : il permet de donner des propriétés à l’entité définie par les microdatas (exemple : street-address) : on obtient alors des informations hiérarchiquement structurées

On trouvera le vocabulaire (l’ensemble de propriétés) à utiliser pour identifier une personne, un lieu ou autre élément sur schema.org (utilisé comme référence par Google, Bing et Yahoo!) : http://schema.org/docs/schemas.html ou http://schema.org/docs/full.html - on voit alors qu'il y a une vision hiérarchique des types : on constate une notion d’héritage, qui fait que chaque fils hérite des propriétés de son parent) :
hierarchie_microdatas.png

Voici un exemple concret inspiré de http://schema.org/Person :

<div itemscope itemtype="http://schema.org/Person">
  <span itemprop="name">Isaac Asimov</span>
  <img src="asimov.jpg" itemprop="image" />
  <span itemprop="jobTitle">Writer</span>
  <span itemprop="telephone">(425) 123-4567</span>
  <a href="mailto:moi-asimov@fondation.eu" itemprop="email">
    moi-asimov@fondation.eu</a>
</div>

La première ligne est particulièrement importante :
itemscope itemtype="http://schema.org/Person" indique qu'on va utiliser des microdatas sur un élément de type Personne.
Par la suite, on définit simplement à quelle propriétés correspondent tels contenus HTML : ainsi itemprop="name" s'applique sur la balise span contenant le nom de la personne.

D’autres schémas très utilisés sont Corporation et Article mais aussi Recipe, qui bien utilisée peut donner un résultat mis en valeur dans Google :
tarte_pomme.png

Et ce n’est que le début, comme l’annonce Google :
"Les moteurs de recherche utilisent le balisage dans la page de différentes manières. Par exemple, Google l'utilise pour créer des extraits enrichis dans les résultats de recherche. Tous les types d'informations de schema.org ne s'afficheront pas forcément dans les résultats de recherche, mais il ne fait nul doute que l'exploitation des données sera améliorée à l'avenir."

Voici un autre exemple d’utilisation : un fil d’Ariane balisé avec des microdonnées :
ariane.png

Code type correspondant à un fil d’ariane :

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/Forum" itemprop="url">
    <span itemprop="title">Forum</span>
  </a>
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/forum/php" itemprop="url">
    <span itemprop="title">PHP</span>
  </a>
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/forum/php/frameworks" itemprop="url">
    <span itemprop="title">Bibliothèques et frameworks </span>
  </a>
</div>

Terminons par quelques recommandations :

  • S’il est bon de ne pas lésiner sur les attributs, il vaut mieux ne les utiliser que sur des contenus visibles par les utilisateurs. Des display:none; sur des balises contenant des micro-datas n’empêchent pas celle-ci d’être prises en compte par Google mais ce dernier pourrait décider de blacklister ceux qui abusent de ces techniques.
  • Pour en savoir plus sur les formats de date et d’autres notions avancées : http://schema.org/docs/gs.html#advanced
  • Enfin, Google fournit un outil permet d’analyser vos pages contenant des Rich Snippets : vous pourrez obtenir l’aperçu de votre page dans la page de résultat dans google et des conseils sur le formatage de vos données : http://www.google.com/webmasters/tools/richsnippets

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.