Microdata est une spé­ci­fi­ca­tion HTML5 du WHATWG (Web Hypertext Ap­pli­ca­tion Tech­no­logy Working Group). Ce format de données propose une syntaxe de balises méta pour des données struc­tu­rées, per­met­tant aux ad­mi­nis­tra­teurs d’enrichir leurs contenus en mé­ta­don­nées afin qu’une machine puisse in­ter­pré­ter le contexte sé­man­tique cor­res­pon­dant. Ces mé­ta­don­nées per­met­tent aux pro­grammes tels que les moteurs de recherche ou les lecteurs d’écran (Screen­rea­der) d’in­ter­pré­ter dif­fé­rentes formes et types de contenus, de manière à les mettre en valeur. Ces données struc­tu­rées sont entre autres im­por­tantes pour l’op­ti­mi­sa­tion pour les moteurs de recherche (SEO), car les an­no­ta­tions sé­man­tiques per­met­tent et fa­ci­li­tent l’in­dexa­tion de la page Web cor­res­pon­dante dans les résultats de recherche (SERPs). C’est aussi l’occasion d’apporter plus de détails dans ces SERPs, aussi bien pour les moteurs de recherche que pour les in­ter­nautes. Microdata s’appuie sur un vo­ca­bu­laire ho­mo­gé­néisé avec Schema.org pour la struc­tu­ra­tion de données.

Com­pa­ra­tif de Microdata avec d’autres formats de données

Tandis que la com­mu­nauté s’accorde à dire qu’HTML devrait devenir plus sé­man­tique, le choix du format des balises HTML est cependant toujours con­tro­versé. En tant que module séparé pour HTML5, Microdata a été à l’origine introduit sur le marché comme une al­ter­na­tive au standard de l’époque, RDFa.  Ce dernier était en effet re­com­mandé par le con­sor­tium W3C pour l’at­tri­bu­tion de mé­ta­don­nées en HTML et XHTML. Le but était d’obtenir une syntaxe sim­pli­fiée et aux fonc­tion­na­li­tés com­pa­rables. Un avantage est la proximité avec les versions les plus récentes d’HTML. Microdata a gagné en sig­ni­fi­ca­tion à travers le projet Schema.org : cette ini­tia­tive com­mu­nau­taire des four­nis­seurs de moteurs de recherche Google, Bing, Yahoo et Yandex fournit en effet un lexique uniforme de balises (mé­ta­don­nées) pour l’at­tri­bu­tion d’an­no­ta­tions sé­man­tiques sur une page Web. Microdata est pendant longtemps resté le format favori de Google, mais l’écart s’est réduit depuis. En dehors de Microdata, Schema.org est aussi com­pa­tible avec les attributs au format RDFa. De plus, le format JSON-LD introduit un nouveau format de balise basé sur un script. Ce dernier n’est cependant pas com­pa­tible avec tous les types de données pour Google. C’est pour ces raisons que Microdata reste d’actualité.

La syntaxe avec Microdata

Le principe de la syntaxe de Microdata est basé sur des couples nom/valeur, aussi appelés items. Ces derniers peuvent être expliqués en trois étapes. Un élément est tout d’abord délimité et marqué comme un item. Un type précis est ensuite attribué à cet élément, selon le ré­per­toire de Schema.org. Si le type de l’item est défini, dif­fé­rentes pro­prié­tés cor­res­pon­dantes lui seront at­tri­buées. Cette dis­tinc­tion s’effectue à l’aide des attributs HTML5 itemscope, itemtype et itemprop :

  • Itemscope : l’attribut HTML5 itemscope est utilisé au sein d’une balise div, dans le but de définir un domaine précis en tant qu’item. Cet élément est déterminé au moyen d’itemtype et plus pré­ci­sé­ment d’itemprop.

  • Itemtype : l’attribut HTML5 itemtype est ap­pli­cable avec tous les éléments pour lesquels on a défini l’attribut itemscope. Il sert à renvoyer vers un schéma prédéfini. De cette manière, les éléments per­ti­nents d’une page Web peuvent se voir attribuer des types généraux selon Schema.org et qui pourront être in­ter­pré­tés par tous les moteurs de recherche courants.   

  • Itemprop : l’attribut HTML5 itemprop dote un élément des pro­prié­tés d’un type d’item mentionné pré­cé­dem­ment. Le site Schema.org permet de se ren­seig­ner sur les dif­fé­rents types d’items et les pro­prié­tés cor­res­pon­dantes.

L’in­té­gra­tion des attributs itemscope, itemtype et itemprop dans le code HTML s’effectue selon le schéma de base suivant :

Schéma de base des balises Microdata pour un item : 

<div itemscope itemtype="http://schema.org/Typ">
    <span itemprop="propriété">Item</span>
</div>

Balises Microdata en pratique

Comme d’autres formats, il existe toute une série de Tags HTML clas­siques servant à l’at­tri­bu­tion d’an­no­ta­tions sé­man­tiques. Fon­da­men­ta­le­ment, les attributs Microdata sont in­dé­pen­dants de ces Tags HTML. Les Tags HTML tels que <div> ou <span> sont à con­si­dé­rer comme des éléments de support des attributs Microdata, car les tags ne com­por­tent pas de sé­man­tique propre.

<div></div> L’élément div définit une zone de texte précise dans une nouvelle ligne du corps du texte. Un itemscope commence et se termine en général par ce tag.
<span></span> L’élément span définit un domaine en ligne général, sans avoir d’influence sur la pré­sen­ta­tion d’un na­vi­ga­teur Web. Il est d’ailleurs utilisé pour dé­ter­mi­ner un itemprop.

On intègre en principe des mé­ta­don­nées via des attributs Microdata dans tous les tags HTML. Les exemples suivants vous indiquent comment intégrer des mé­ta­don­nées telles que des éléments div- et span, des hy­per­liens, éléments de gra­phiques ou encore de listes.

Ca­rac­té­ri­ser une il­lus­tra­tion avec Microdata

Un domaine d’ap­pli­ca­tion typique dans la dé­ter­mi­na­tion d’an­no­ta­tions sé­man­tiques de contenus Web est l’in­té­gra­tion de logos d’en­tre­prise. Tandis qu’un visiteur humain est en mesure d’iden­ti­fier un graphique ca­rac­té­ris­tique en tant que logo d’en­tre­prise, les pro­grammes tels que les robots d’in­dexa­tion sont dé­pen­dants de mi­cro­don­nées pour établir ce contexte :

Balises de logos d’en­tre­prise : 

<div itemscope itemtype="http://schema.org/Organization">
    <a itemprop="url" href="http://www.exempleentreprise.fr/">Paged’accueil</a>
    <img itemprop="logo" src="http://www.exempleentreprise.fr/logo.png" />
</div>

Un nouvel élément div est ouvert dans la ligne de code 01, qui est aussi dans la ligne 02 en tant que code HTML pour l’il­lus­tra­tion intégrée dans la ligne 03. Ce tag div non spé­ci­fique est considéré comme porteur d’in­for­ma­tions grâce à l’attribut itemscope. L’attribut itemtype renvoie au type « or­ga­ni­za­tion » selon les standards de Schema.org. Le robot d’in­dexa­tion peut ainsi re­con­naître lorsqu’il s’agit d’une demande relative au tag div à propos d’une in­for­ma­tion sur l’en­tre­prise. L’itemtype comprend donc des pro­prié­tés telles que « URL » ou « logo » avec leurs valeurs res­pec­tives. Le moteur de recherche peut par con­sé­quent iden­ti­fier le graphique comme logo de l’en­tre­prise et établir un lien vers la page d’accueil de l’en­tre­prise. Les moteurs de recherche tels que Google utilisent ce type de gra­phiques pour la création de Knowledge Graphs par exemple.

Dans le cas d’un logo de marque il convient d’utiliser les balises suivantes d‘après Schema.org :

Balises d’un logo de marque : 

<div itemscope itemtype="http://schema.org/Brand">
    <span itemprop="name">nom de la marque</span>
    <img itemprop="logo" src="http://www.exemplemarque.fr/logo.png" />
</div>

L’élément au sein d’itemscope est ca­rac­té­risé « Brand » selon Schema.org. Le nom de la marque et le logo sont men­tion­nés comme pro­prié­tés dans l’espace de sau­ve­garde cor­res­pon­dant. 

Attributs de données de contact avec Microdata

En dehors de l’in­té­gra­tion de ca­rac­té­ris­tiques aux il­lus­tra­tions, l’an­no­ta­tion sé­man­tique de données de contact est par­ti­cu­liè­re­ment in­té­res­sante car elles per­met­tent de nouvelles formes de pré­sen­ta­tion des résultats de recherche sur les robots d’in­dexa­tion telles que les Sidelinks ou les Knowledge Graphs.  Un balisage Microdata détaillé d’in­for­ma­tions de contact s’ef­fec­tue­rait de la manière suivante d’après Schema.org :

Balises de données de contact Google : 

<div itemscope itemtype="http://schema.org/Organization">
    <span itemprop="name">Google.org (GOOG)</span>
    Contact Details:
    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        Main address:
            <span itemprop="streetAddress">38 avenue de l'Opera</span>
            <span itemprop="postalCode">F-75002</span>
            <span itemprop="addressLocality">Paris, France</span>
    </div>
    Tel: <span itemprop="telephone">( 33 1) 42 68 53 00 </span>,
    Fax: <span itemprop="faxNumber">( 33 1) 42 68 53 01 </span>,
    E-mail: <span itemprop="email">secretariat(at)google.org</span>
</div>

Dans la ligne de code 01, l’attribut itemtype définit l’élément au Tag div de la ligne 01 à la ligne 13 en tant que « or­ga­ni­za­tion », toujours selon Schema.org. Les divers attributs itemprop munissent les éléments des pro­prié­tés « nom », « adresse », « téléphone », « fax » et « email » avec les valeurs res­pec­tives. Jusqu’ici, le schéma ressemble aux exemples pré­cé­dents. Un cas par­ti­cu­lier est cependant à constater dans la ligne 04 : la syntaxe de Microdata prévoit qu’une valeur d’une propriété peut également être un item. Les saisies pré­sen­tées ici sous « Main address » via un deuxième élément div se voient intégrer leur propre itemscope avec l’itemtype « Pos­ta­lAd­dress » défini par Schema.org.  Ceci est plus pré­ci­sé­ment déterminé avec les pro­prié­tés « stree­tad­dress », « pos­tal­Code » et « ad­dress­Lo­ca­lity ».

Munir les contenus Web d’attributs avec Microdata pour des Rich Snippets

Si l’on souhaite voir ap­pa­raître son site Web dans les pages de résultats de recherche de Google sous la forme de Rich Snippets, l’at­tri­bu­tion d’an­no­ta­tions sé­man­tiques est es­sen­tielle. Dans le but de proposer à l’uti­li­sa­teur autant d’in­for­ma­tions que possible sur la page de résultats de recherche, ces dernières sont enrichies d’in­for­ma­tions de produits, de recettes, retours sur ex­pé­rience, évè­ne­ments, ap­pli­ca­tions lo­gi­cielles, vidéos ou encore articles d‘actualité avec les contenus de pages Web cor­res­pon­dants, dans la mesure où ils ont été optimisés de manière à être in­ter­pré­tés par des or­di­na­teurs.  L’exemple fictif suivant d’une offre d’hô­tel­le­rie montre sché­ma­ti­que­ment comment des in­for­ma­tions peuvent être at­tri­buées au moyen d’une syntaxe Microdata selon Schema.org.

Une offre d’hôtel sur la page Web d’un tour-opérateur renseigne gé­né­ra­le­ment des in­for­ma­tions comme le nom de l’hôtel, une courte des­crip­tion et une image du complexe tou­ris­tique au visiteur. Le code HTML de ces in­for­ma­tions de base avec Microdata selon Schema.org res­sem­ble­rait donc à cela : 

Balises pour les in­for­ma­tions de base d’une offre d’hô­tel­le­rie : 

<div itemscope itemtype="http://schema.org/Hotel">
    <span itemprop="name">Nom de l’hôtel</span>
    <span itemprop="description">description de l‘hôtel</span>
    <img itemprop="image" src="http://Images/hotel.jpg" />
</div>

L’attribut itemtype de la ligne 01 renvoie au schéma prédéfini « Hotel ». Ce dernier attribue entre les lignes 02 et 04 les pro­prié­tés « name », « des­crip­tion » et « image », avec les valeurs cor­res­pon­dantes.

Ce squelette de base peut être complété par de nom­breuses autres in­for­ma­tions en tant qu’itemprops ou d’item­scopes su­bor­don­nés. Il convient pour cela de faire attention à ce que l’élément div su­bor­donné soit bien incorporé avec un Tag div de l’itemscope su­bor­donné. Le code suivant élargit l’an­no­ta­tion sé­man­tique d’une offre hôtelière avec une in­di­ca­tion de prix.

Balises pour les prix d’hôtels 

<div itemprop="makesOffer" itemscope itemtype="http://schema.org/Offer"> 
    <span itemprop="price">400 euros</span>
</div>

La propriété « ma­keOf­fers » est in­tro­duite dans la ligne 01 et est définie par l’itemtype « offer ». Le prix est une propriété es­sen­tielle pour une offre. Celui-ci est intégré dans la ligne 02 avec l’itemprop « price » et la valeur « 400 euros ».

Des in­for­ma­tions sup­plé­men­taires telles que les modalités de paiement (itemprop=“pay­men­tAc­cep­ted“), l’em­pla­ce­ment (itemprop=“map“) ou des retours sur ex­pé­rience (itemprop=“reviews“) peuvent être ajoutées d’après Schema.org à ce squelette de base : 

Balises complètes pour une offre d’hô­tel­le­rie: 

<div itemscope itemtype="http://schema.org/Hotel">
    <span itemprop="name">nom d’hôtel</span>
    <span itemprop="description">description de l‘hôtel</span>
    <img itemprop="image" src="http://Images/hotel.jpg" />
    <div itemprop="makesOffer" itemscope itemtype="http://schema.org/Offer"> 
        <span itemprop="price">400 Euro</span>
    </div>
    <span itemprop="paymentAccepted">Virement, Carte de crédit, etc.</span> 
    <span itemprop="map">URL vers la carte</span> 
    <div itemprop="reviews" itemscope itemtype="http://schema.org/Review"> 
        <span itemprop="name">titre de l‘évaluation</span>
        <span itemprop="author">auteur</span>
        <span itemprop="reviewBody">texte d‘évaluation</span>
        <span itemprop="datePublished">date de l‘évaluation</span>
    </div>
</div>

De la ligne 01 à la ligne 15, l’item « hotel » est défini comme un item de niveau supérieur. Suivent donc les in­for­ma­tions de base nom, des­crip­tion et image, en­re­gis­trées en tant que pro­prié­tés de l’item hôtel. Les attributs de prix d’hôtel s’ef­fec­tuent entre les lignes 05 et 07 grâce à l’attribut itemscope su­bor­donné « Offer ». Ensuite les éléments sur les modalités de paiement et sur l’em­pla­ce­ment sont attribués à l’item su­bor­donné « Hotel ». Les saisies entre la ligne 10 et la ligne 15 sont ca­rac­té­ri­sés avec d’autres item­scopes su­bor­don­nés et l’itemtype « Review » pour les retours sur ex­pé­rience et avec l’itemprop  pour le titre, l’auteur de l‘éva­lua­tion, le texte d’éva­lua­tion et la date.  

Si vous souhaitez faire ap­pa­raître un système de notation par étoiles dans les rich snippets, il convient d’utiliser le balisage suivant :

Balises pour un retour sur ex­pé­rience avec étoiles : 

<div itemscope itemtype="http://schema.org/Review">
    <div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Hotel">
        <span itemprop="name">nom de l’hôtel</span>
    </div>
    <span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
        <span itemprop="ratingValue">4</span>
    </span> stars -
    <b>"<span itemprop="name">Titre de l‘évaluation</span>"</b>
    <span itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">Auteur</span>
    </span>
    <span itemprop="reviewBody">texte d’évaluation</span>
</div>

Intégrer un fil d’Ariane avec Microdata

Une autre pos­si­bi­lité pour mettre en avant plus d’in­for­ma­tions sur les SERPs, est l‘in­té­gra­tion d’un fil d’Ariane (Bread­crumbs en anglais). Il s’agit là d’une balise servant à la structure de na­vi­ga­tion d’un site Web, per­met­tant à l’uti­li­sa­teur de di­rec­te­ment vi­sua­li­ser l’em­pla­ce­ment d’une page Web au sein de sa structure de na­vi­ga­tion.  Un exemple typique pour l’in­té­gra­tion d’un fil d’Ariane dans le code HTML est le suivant :

Balises HTML d’un fil d’Ariane 

<ol>
    <li>
        <a href="http://www.tour-operateur.fr/hotels/">Hotels</a>
    </li>
    <li>
        <a href="http://www.tour-operateur.fr/hotels/deutschland/">Hôtels en France</a>
    </li>
    <li>
        <a href="http://www.tour-operateur.fr/hotels/France/Paris/">Hôtels à Paris</a>
    </li>
<ol>

Cet exemple montre un élément de liste com­por­tant les liens de dif­fé­rentes sous-pages d’un site Web. Schema.org indique le balisage Microdata suivant pour que cette structure de na­vi­ga­tion soit in­ter­pré­tée par des na­vi­ga­teurs et moteurs de recherche :

Balises Microdata pour un fil d’Ariane selon Schema.org : 

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="http://www.tour-operateur.fr/hotels/">
            <span itemprop="name">Hôtels</span></a>
        <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="http://www.tour-operateur.fr/hotels/france/">
            <span itemprop="name">hotels en France</span></a>
        <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="http://www.tour-operateur.fr/hotels/France/Paris/">
            <span itemprop="name">Hôtels à Paris</span></a>
        <meta itemprop="position" content="3" />
    </li>
</ol>

L’élément de liste <ol> est défini par l’attribut itemscope en tant qu’item et classé par l’itemtype « Bread­crum­bList » d‘après Schema.org. Pour chaque élément de liste au sein de la structure de na­vi­ga­tion, un itemscope propre est défini avec l’itemtype « ListItem ». Chaque ListItem du fil d’Ariane se voit attribuer un « nom », un « item » et une « position » comme pro­prié­tés via un itemprops. Celles-ci con­tien­nent des valeurs pour le nom, l’URL et une position pour les com­po­sants du fil d’Ariane. 

Aller au menu principal