Mettre en avant votre site avec Microdata selon Schema.org

Microdata est une spécification HTML5 du WHATWG (Web Hypertext Application Technology Working Group). Ce format de données propose une syntaxe de balises méta pour des données structurées, permettant aux administrateurs d’enrichir leurs contenus en métadonnées afin qu’une machine puisse interpréter le contexte sémantique correspondant.

Ces métadonnées permettent aux programmes tels que les moteurs de recherche ou les lecteurs d’écran (Screenreader) d’interpréter différentes formes et types de contenus, de manière à les mettre en valeur. Ces données structurées sont entre autres importantes pour l’optimisation pour les moteurs de recherche (SEO), car les annotations sémantiques permettent et facilitent l’indexation de la page Web correspondante 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 internautes. Microdata s’appuie sur un vocabulaire homogénéisé avec Schema.org pour la structuration de données.

Comparatif de Microdata avec d’autres formats de données

Tandis que la communauté s’accorde à dire qu’HTML devrait devenir plus sémantique, le choix du format des balises HTML est cependant toujours controversé. En tant que module séparé pour HTML5, Microdata a été à l’origine introduit sur le marché comme une alternative au standard de l’époque, RDFa. Ce dernier était en effet recommandé par le consortium W3C pour l’attribution de métadonnées en HTML et XHTML. Le but était d’obtenir une syntaxe simplifiée et aux fonctionnalités comparables. Un avantage est la proximité avec les versions les plus récentes d’HTML. Microdata a gagné en signification à travers le projet Schema.org : cette initiative communautaire des fournisseurs de moteurs de recherche Google, Bing, Yahoo et Yandex fournit en effet un lexique uniforme de balises (métadonnées) pour l’attribution d’annotations sémantiques 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 compatible 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 compatible 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épertoire de Schema.org. Si le type de l’item est défini, différentes propriétés correspondantes lui seront attribuées. Cette distinction 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écisément d’itemprop.
Itemtype : l’attribut HTML5 itemtype est applicable 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 pertinents d’une page Web peuvent se voir attribuer des types généraux selon Schema.org et qui pourront être interprétés par tous les moteurs de recherche courants.
Itemprop : l’attribut HTML5 itemprop dote un élément des propriétés d’un type d’item mentionné précédemment. Le site Schema.org permet de se renseigner sur les différents types d’items et les propriétés correspondantes.

L’intégration 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 classiques servant à l’attribution d’annotations sémantiques. Fondamentalement, les attributs Microdata sont indépendants de ces Tags HTML. Les Tags HTML tels que <div> ou <span> sont à considérer comme des éléments de support des attributs Microdata, car les tags ne comportent pas de sémantique 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ésentation d’un navigateur Web. Il est d’ailleurs utilisé pour déterminer un itemprop.

On intègre en principe des métadonnées via des attributs Microdata dans tous les tags HTML. Les exemples suivants vous indiquent comment intégrer des métadonnées telles que des éléments div- et span, des hyperliens, éléments de graphiques ou encore de listes.

Caractériser une illustration avec Microdata

Un domaine d’application typique dans la détermination d’annotations sémantiques de contenus Web est l’intégration de logos d’entreprise. Tandis qu’un visiteur humain est en mesure d’identifier un graphique caractéristique en tant que logo d’entreprise, les programmes tels que les robots d’indexation sont dépendants de microdonnées pour établir ce contexte :

Balises de logos d’entreprise :

<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’illustration intégrée dans la ligne 03. Ce tag div non spécifique est considéré comme porteur d’informations grâce à l’attribut itemscope. L’attribut itemtype renvoie au type « organization » selon les standards de Schema.org. Le robot d’indexation peut ainsi reconnaître lorsqu’il s’agit d’une demande relative au tag div à propos d’une information sur l’entreprise. L’itemtype comprend donc des propriétés telles que « URL » ou « logo » avec leurs valeurs respectives. Le moteur de recherche peut par conséquent identifier le graphique comme logo de l’entreprise et établir un lien vers la page d’accueil de l’entreprise. Les moteurs de recherche tels que Google utilisent ce type de graphiques 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 caractérisé « Brand » selon Schema.org. Le nom de la marque et le logo sont mentionnés comme propriétés dans l’espace de sauvegarde correspondant.

Attributs de données de contact avec Microdata

En dehors de l’intégration de caractéristiques aux illustrations, l’annotation sémantique de données de contact est particulièrement intéressante car elles permettent de nouvelles formes de présentation des résultats de recherche sur les robots d’indexation telles que les Sidelinks ou les Knowledge Graphs. Un balisage Microdata détaillé d’informations de contact s’effectuerait 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 « organization », toujours selon Schema.org. Les divers attributs itemprop munissent les éléments des propriétés « nom », « adresse », « téléphone », « fax » et « email » avec les valeurs respectives. Jusqu’ici, le schéma ressemble aux exemples précédents. Un cas particulier 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ésentées ici sous « Main address » via un deuxième élément div se voient intégrer leur propre itemscope avec l’itemtype « PostalAddress » défini par Schema.org. Ceci est plus précisément déterminé avec les propriétés « streetaddress », « postalCode » et « addressLocality ».

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

Si l’on souhaite voir apparaître son site Web dans les pages de résultats de recherche de Google sous la forme de Rich Snippets, l’attribution d’annotations sémantiques est essentielle. Dans le but de proposer à l’utilisateur autant d’informations que possible sur la page de résultats de recherche, ces dernières sont enrichies d’informations de produits, de recettes, retours sur expérience, évènements, applications logicielles, vidéos ou encore articles d‘actualité avec les contenus de pages Web correspondants, dans la mesure où ils ont été optimisés de manière à être interprétés par des ordinateurs. L’exemple fictif suivant d’une offre d’hôtellerie montre schématiquement comment des informations peuvent être attribué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éralement des informations comme le nom de l’hôtel, une courte description et une image du complexe touristique au visiteur. Le code HTML de ces informations de base avec Microdata selon Schema.org ressemblerait donc à cela :

Balises pour les informations de base d’une offre d’hôtellerie :

<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 propriétés « name », « description » et « image », avec les valeurs correspondantes.

Ce squelette de base peut être complété par de nombreuses autres informations en tant qu’itemprops ou d’itemscopes subordonnés. Il convient pour cela de faire attention à ce que l’élément div subordonné soit bien incorporé avec un Tag div de l’itemscope subordonné. Le code suivant élargit l’annotation sémantique d’une offre hôtelière avec une indication 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é « makeOffers » est introduite dans la ligne 01 et est définie par l’itemtype « offer ». Le prix est une propriété essentielle pour une offre. Celui-ci est intégré dans la ligne 02 avec l’itemprop « price » et la valeur « 400 euros ».

Des informations supplémentaires telles que les modalités de paiement (itemprop=“paymentAccepted“), l’emplacement (itemprop=“map“) ou des retours sur expérience (itemprop=“reviews“) peuvent être ajoutées d’après Schema.org à ce squelette de base :

Balises complètes pour une offre d’hôtellerie:

<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 informations de base nom, description et image, enregistrées en tant que propriétés de l’item hôtel. Les attributs de prix d’hôtel s’effectuent entre les lignes 05 et 07 grâce à l’attribut itemscope subordonné « Offer ». Ensuite les éléments sur les modalités de paiement et sur l’emplacement sont attribués à l’item subordonné « Hotel ». Les saisies entre la ligne 10 et la ligne 15 sont caractérisés avec d’autres itemscopes subordonnés et l’itemtype « Review » pour les retours sur expérience et avec l’itemprop pour le titre, l’auteur de l‘évaluation, le texte d’évaluation et la date.

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

Balises pour un retour sur expé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 possibilité pour mettre en avant plus d’informations sur les SERPs, est l‘intégration d’un fil d’Ariane (Breadcrumbs en anglais). Il s’agit là d’une balise servant à la structure de navigation d’un site Web, permettant à l’utilisateur de directement visualiser l’emplacement d’une page Web au sein de sa structure de navigation. Un exemple typique pour l’intégration 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 comportant les liens de différentes sous-pages d’un site Web. Schema.org indique le balisage Microdata suivant pour que cette structure de navigation soit interprétée par des navigateurs 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 « BreadcrumbList » d‘après Schema.org. Pour chaque élément de liste au sein de la structure de navigation, 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 propriétés via un itemprops. Celles-ci contiennent des valeurs pour le nom, l’URL et une position pour les composants du fil d’Ariane.

07/12/2016
Création de sites internet