Microdata : kesako ? Exemples pratiques

Avec le web 2.0, qu’on appelle aussi le « web interactif » ou « web social », sont apparus de nouveaux outils et de nouvelles pratiques.

Parmi ces nouvelles pratiques, l’arrivée des microformats a permis de faire un pas de plus vers le « web sémantique » , composante importante du « web de demain ».

Le « web sémantique », qu’est-ce que c’est ? Et comment l’utiliser pour Booster Mon Business ?

Le « web sémantique », vise à favoriser des méthodes communes pour échanger des données en liant et structurant les informations sur internet. Il fournit donc un modèle qui permet aux différentes données contenues dans les sites internet d’être partagées et réutilisées.

Appliquer ces nouvelles pratiques en respectant les recommandations définies par le W3C, permet donc non seulement de donner un sens sémantique au contenu des pages d’un site internet, mais aussi d’améliorer le SEO (Search Engine Optimisation) du site car ces métadonnées sont lues et comprises par les moteurs de recherche, en particulier, Google.

Mais alors sur un site internet, qu’est-ce que ça donne ?

Les microformats :

Avant l’arrivée du HTML5, on a vu émerger en 2003 une nouvelle pratique : Les microformats.

Leur intérêt était de rajouter des informations dans le code HTML de la page sous forme d’attributs avec différentes valeurs liés à des balises. Ces attributs indiquaient quelle était la nature du contenu de la balise.
On peut donc indiquer par exemple : « cette balise div a la class footer car c’est elle qui contient tous les éléments du footer » : C’est ce qu’on appelle les microformats simples.

Pour aller plus loin, des modèles de conception ont été conçus pour permettre une plus grande précision, et pour rendre ce qui est lisible par un humain compréhensible par une machine. On peut par exemple indiquer : « ce qui est contenu dans cette div indique un numéro de téléphone », « cette div contient deux span, la première indiquant qu’il s’agit d’un téléphone fixe, et la deuxième contenant le numéro de téléphone en question » : C’est ce qu’on appelle les design pattern, ou modèles de conception.

Enfin, sont apparus des générateurs de modèles entiers et complexes pour des fonctions précises souvent présentes sur les sites internet. C’est le cas par exemple de l’hCard qui peut être générée grâce à l’hCrd creator . Il s’agit ici d’indiquer une sorte de carte de visite (hCard) dans laquelle on pourra retrouver des infos telles que l’organisme/entreprise, l’email, l’adresse (contenant un numéro de rue, un code postal, une ville, un pays)… : C’est ce qu’on appelle les microformats composés.

Les Microdata :

Avec l’arrivée du HTML5, de nouveaux éléments sont venus renforcer le sens des composant des pages sémantiques des sites internet.
Par exemple on a vu apparaître de nouvelles balises ( <header> , <section> , <article> , <nav>…) Qui permettent de structurer la page en indiquant simplement « il s’agit du menu de navigation, il s’agit d’une section de la page… » sans avoir à ajouter des attributs comme c’était le cas avant.

Parmi ces nouveautés HTML5, ont été ajoutées les microdata, ou microdonnées.
Les microdata ont le même but et le même genre de fonctionnement que les microformats, mais permettent une maîtrise et une précision encore plus importante. Microdata et microformats sont donc différents, mais fonctionnent tous les deux et peuvent cohabiter sur une même page.
Les microdata n’ont pas encore de normes, mais des recommandations ont été définies par le W3C.

Les microdata sont des attributs supplémentaires permettant de préciser certains aspects sémantiques des éléments. Ils sont donc tout à fait dans la même ligne que les microformats puisqu’ils ajoutent des métadonnées dans le code HTML d’une page internet.

On distingue trois attributs principaux :

itemscope : annonce des blocs qui seront balisés
itemtype : Précise le type d’éléments concerné (on trouvera une url vers shema.org pointant vers la page modèle de l’élément concerné).
itemprop : Descendant de itemscop, itemprop est spécifique au nom des champs et vient remplacer entre autre les attributs de class que l’on appliquait avec les microformats. Il permet d’indiquer précisément la nature du contenu d’une balise en annonçant par exemple « cette balise contient la date de création de l’article », « cette balise contient le nom de l’auteur de l’article » ou encore « cette balise contient le texte de l’article ».

A ces trois éléments, viennent s’ajouter :

itemref : Permet de faire référence à des informations déjà définies dans la page pour éviter de surcharger le code.
itemid : Fait référence à une clé unique, reconnue universellement. C’est le cas par exemple des numéros ISBN des livres (International Standard Book Number). On pourra alors dire : « L’itemid de cette balise est : urn:isbn:0321687299 , il s’agit donc du livre Introducing HTML5 ».

Les informations contenues dans la page seront donc structurées de manière hiérarchique.
On donnera l’attribut itemscope à la balise parent délimitant le groupe d’information pour annoncer que le contenu de la balise est enrichi sémantiquement.
Puis on apposera l’attribut itemprop aux différents éléments contenus dans cette balise que l’on souhaite documenter, avec des valeurs précises. Ces valeurs renseigneront sur la nature du contenu (un nom, une url, une image, une date, un livre…)

Plus le code html est documenté, riche et précis, plus le contenu de la page aura du sens. Or aujourd’hui, la sémantique est très importante, et de plus en plus, les moteurs de recherche interprètent ces informations et remontent le référencement naturel (SEO) des sites qui ont un contenu riches et sensé.

Le site Shema.org propose toute l’arborescence des types définis. Plus on descend dans l’arborescence, plus le vocabulaire se précise et plus la valeur sémantique de la page sera grande.

Conclusion

A l’ère du web sémantique, et pour anticiper le « web de demain », il est aujourd’hui très important de soigner le code html des pages des sites internet en apportant des métadonnées riches et précises pour donner du sens au contenu, et permettre aux machines de comprendre ce contenu.
Chez Accro-Web, nous prenons toujours soin d’optimiser le référencement naturel et gratuit (SEO) des sites que nous créons. Nous savons nous adapter aux nouvelles technologies, aux nouveaux usages et aux nouvelles pratiques pour apporter un service de qualité, respectueux des normes et des pratiques d’aujourd’hui et de demain.