Débuter avec schema.org, le microformat

La traduction est actuellement en cours. N’hésitez pas à me contacter pour me proposer des améliorations ou des suggestions à propos de cette traduction.
Avertissement

Ceci est la traduction de la page officielle Getting started with schema.org de schema.org, afin de mettre à disposition des internautes francophones les explications sur son utilisation. L’ensemble des informations écrites sont sous Licence Creative Commons Attribution-ShareAlike License (version 3.0). Pour plus d’informations, visitez la page officielle des Terms of service de schema.org.

La plupart des webmasters sont familiarisés avec l’utilisation des balises HTML sur leurs pages Web. Habituellement, les balises HTML permettent d’indiquer au navigateur la manière dont les informations contenues dans les balises doivent être affichées. Par exemple, <h1>Avatar</h1> indique au navigateur d’afficher la chaîne de caractère « Avatar » dans un titre de niveau 1. Cependant, cette balise HTML ne donne aucune indication sur la signification de la chaîne de caractère : « Avatar » pourrait correspondre au très grand succès cinématographique ou à la petite image qui accompagne un profil. Il est alors difficile pour un moteur de recherche d’afficher aux internautes un contenu pertinent.

Schema.org fournit un ensemble de vocabulaires que les webmasters peuvent utiliser afin de baliser leurs pages de façon à ce qu’elles soient compréhensibles pour les principaux moteurs de recherche : Google, Microsoft, Yandex and Yahoo!

L’utilisation du vocabulaire de schema.org, ainsi que le format microdata, permet d’ajouter des informations à votre contenu HTML. Bien que l’objectif à long terme est de soutenir un large éventail de formats, l’objectif initial est le Microdata. Ce guide vous aidera à rapidement vous familiariser avec les microdata et schema.org, de sorte que vous puissiez commencer à ajouter les balises à vos pages Web.

  1. Comment baliser votre contenu avec les microdata
    1. Pourquoi utiliser le microdata ?
    2. itemscope et itemtype
    3. itemprop
    4. Éléments intégrés
  2. Utiliser le vocabulaire de schema.org
    1. Types et propriétés de schema.org
    2. Types attendus, texte et URLs
    3. Test de votre balisage
  3. Avancé : Des informations compréhensibles pour les machines
    1. Dates et durées
    2. Énumérations et références canoniques (canonical)
    3. Information manquante / implicite
    4. Extension de schema.org

1. Comment baliser votre contenu avec les microdata

1a. Pourquoi utiliser le microdata ?

Vos pages web ont une signification sous-jacente que les internautes comprennent quand ils lisent les pages Web. Mais les moteurs de recherche ont une compréhension limitée des sujets de conversation. Par l’ajout de balises supplémentaires dans le code HTML de vos pages Web—des balises qui disent: «Hé moteur de recherche, cette information décrit ce film spécifique, ou un lieu, ou une personne, ou de la vidéo »—vous aidez les moteurs de recherche et d’autres applications à mieux comprendre votre contenu et l’afficher de façon à ce que qu’il soit utile, pertinent.

1b. itemscope et itemtype

Commençons par un exemple concret. Imaginons que vous ayez une page sur Avatar—une page contenant un lien vers la bande-annonce, des informations concernant le réalisateur, et ainsi de suite. Votre code HTML pourra ressembler à ceci :

<div>
 <h1>Avatar</h1>
 <span>Réalisateur: James Cameron (né le 16 août 1954)</span>
 <span>Science fiction</span>
 <a href="../movies/avatar-theatrical-trailer.html">Bande annonce</a>
</div>

Pour commencer, identifiez la section de la page qui est « à propos » du film Avatar. Pour ce faire, ajoutez l’élément itemscope à la balise HTML qui entoure les informations sur l’élément, comme ceci :

<div itemscope>
 <h1>Avatar</h1>
 <span>Réalisateur: James Cameron (né le 16 août 1954)</span>
 <span>Science fiction</span>
 <a href="../movies/avatar-theatrical-trailer.html">Bande annonce</a>
</div>

En ajoutant itemscope, vous indiquez que le code HTML contenu dans le bloc <div> ... </div> parle d’un sujet en particulier.
Mais ce n’est pas tout de préciser qu’il existe un sujet, encore faut-il préciser quel type de sujet est concerné. Vous pouvez spécifier le type en utilisant l’attribut itemtype immédiatement après itemscope.

<div itemscope itemtype="http://schema.org/Movie">
 <h1>Avatar</h1>
 <span>Réalisateur: James Cameron (né le 16 août 1954)</span>
 <span>Science fiction</span>
 <a href="../movies/avatar-theatrical-trailer.html">Bande annonce</a>
</div>

Ceci spécifie que l’élément contenu dans la div est en fait un film (Movie), tel que défini dans la hiérarchie des types de schema.org. Les types de sujet sont à renseigner comme des URLs, dans ce cas http://schema.org/Movie.

1c. itemprop

Quelles sont les informations supplémentaires que nous pouvons indiquer aux moteurs de recherche sur le film Avatar ? Les films possèdent des propriétés intéressantes, comme les acteurs, réalisateur, notes du public, … Pour étiqueter les propriétés d’un sujet, utilisez l’attribut itemprop. Par exemple, pour identifier le réalilsateur d’un film, ajoutez itemprop = « directeur » dans l’élément englobant le nom du réalisateur. (Il y a une liste complète de toutes les propriétés que vous pouvez associer à un film via http://schema.org/Movie.)

<div itemscope itemtype="http://schema.org/Movie">
 <h1 itemprop="name">Avatar</h1>
 <span>Réalisateur: <span itemprop="director">James Cameron</span> (né le 16 août 1954)</span>
 <span itemprop="genre">Science fiction</span>
 <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Bande annonce</a>
</div>

Remarque : nous avons ajouté une balise <span> ... </span> supplémentaire afin de renseigner l’attribut itemprop sur le texte approprié. Les balises <span> ne modifiant pas la façon dont les pages sont affichées par un navigateur Web, ils constituent un élément HTML pratique à utiliser avec itemprop.
Les moteurs de recherche peuvent désormais comprendre non seulement que http://www.avatarmovie.com est une URL, mais aussi que c’est l’URL de la bande annonce du film de science-fiction Avatar, qui a été réalisé par James Cameron.

1d. Éléments intégrés

Parfois, la valeur de la propriété d’un élément peut-être elle-même un autre élément avec son propre ensemble de propriétés. Par exemple, nous pouvons préciser que le réalisateur du film est un élément de type Person (personne) et cette Person a les propriétés name (nom) et birthDate (date de naissance). Pour spécifier que la valeur d’une propriété est un autre élément, vous commencez un nouvel itemscope juste après l’itemprop correspondant.

<div itemscope itemtype="http://schema.org/Movie">
 <h1 itemprop="name">Avatar</h1>
 <div itemprop="director" itemscope itemtype="http://schema.org/Person">
 <span>Réalisateur: <span itemprop="director">James Cameron</span> (né le <span itemprop="birthDate">16 août 1954</span>)</span>
 </div>
 <span itemprop="genre">Science fiction</span>
 <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Bande annonce</a>
</div>

2. Utiliser le vocabulaire de schema.org

2a. Types et propriétés de schema.org

Pas toutes les pages Web sont consacrées à des vidéos ou des personnes—en plus des types Movie et Person décrits dans la partie 1, schema.org a décrit un certain nombre de types de sujet dont chacun a son propre ensemble de propriétés et qui peuvent être utilisés pour décrire l’élément concerné.
Le type d’élément le plus général est Thing (chose), qui possède quatre propriétés: name (nom), description, url, et image. Les types plus spécifiques partagent les propriétés avec les types plus généraux. Par exemple, le type Place (lieu) est un type plus spécifique que Thing, et LocalBusiness (localité d’une entreprise) est un type plus spécifique que Place. Les types plus spécifiques héritent des propriétés de leur parent. (En fait, un élément de type LocalBusiness est un type plus spécifique que Place, mais aussi plus spécifique que Organization (organisme), de sorte que LocalBusiness hérite des propriétés des deux types parents).
Voici quelques types d’éléments couramment utilisés :

Vous pouvez aussi visiter la liste complète de tous les types d’élément, listés sur une seule page.

2b. Types attendus, texte et URLs

Voici quelques remarques à garder à l’esprit lorsque vous balisez vos pages Web.

  • Plus vous balisez, mieux c’est… sauf pour le texte caché. En général, plus vous balisez un contenu, meilleur ce sera. Toutefois, en règle général, vous devrez baliser uniquement le contenu visible pour les internautes qui visitent votre page Web, et non des div cachées ou d’autres éléments de votre page qui seraient masqués.
  • Types attendus VS texte. Lorsque vous parcourez les types schema.org, vous avez peut-être remarqué que de nombreuses propriétés ont la mention « expected types » (« types attendus »). Cela signifie que la valeur de la propriété peut être lui-même un élément intégré (voir partie 1d: Éléments intégrés). Mais ce n’est pas une exigence—c’est aussi bien d’inclure juste un texte ou une URL. En outre, chaque fois que « expected types » est spécifié, intégrez si possible un élément qui est un type enfant du type attendu. Par exemple, si le type attendu est Place, n’hésitez pas à intégrer un LocalBusiness.
  • Utilisation de la propriété URL. Certaines pages Web parlent d’​​un élément spécifique. Par exemple, vous pouvez avoir une page web à propos d’une seule personne, que vous pourrez baliser en utilisant le type d’élément Person. D’autres pages comportent un ensemble d’éléments qui y sont décrits. Par exemple, sur le site officiel de votre entreprise, vous pourriez avoir une page listant vos employés, avec, pour chacun, un lien vers sa page de profil. Pour des pages comme celle-ci avec un ensemble d’éléments, il faudra baliser chaque élément de manière de manière indépendante (pour cet exemple, comme un ensemble d’éléments de type Person) et ajouter la propriété url aux liens conduisant aux différents profils pour chaque élément, comme ceci :
<div itemscope itemtype="http://schema.org/Person">
  <a href="alice.html" itemprop="url">Alice Jones</a>
</div>
<div itemscope itemtype="http://schema.org/Person">
  <a href="bob.html" itemprop="url">Bob Smith</a>
</div>

2c. Test de votre balisage

Tout comme un navigateur est important pour tester les changements de votre mise en page, de même qu’un compilateur est important pour tester le code que vous écrivez, vous devrez également tester votre balisage schema.org pour s’assurer qu’il a été écrit correctement. Google fournit un outil de test des rich snippets, que vous pouvez utiliser pour tester votre balisage et identifier d’éventuelles erreurs.

3. Avancé : Des informations compréhensibles pour les machines

Beaucoup de pages peuvent être décrites en utilisant uniquement les attributs itemscope, itemtype et itemprop (décrits dans la partie 1) avec les types et les propriétés de schema.org (décrits dans la partie 2).
Cependant, il arrive parfois qu’une propriété soit difficile à comprendre pour une machine si l’on ne prend pas garde à lever toute ambiguïté. Cette partie explique comment vous pouvez fournir à une machine des informations mieux compréhensibles grâce à un balisage spécifique.

  • Dates et durées : utilisation de la balise time avec datetime
  • Énumérations et références canoniques (canonical) : utilisation de la balise tag avec href
  • Information manquante / implicite : utilisation de la balise meta avec content

3a. Dates et durées

Les dates et les durées sont parfois difficiles à comprendre pour des machines. Considérons par exemple la date « 04/01/11 ». Cette date correspond-elle au 11 janvier 2011 ? Au 4 janvier 2004 ? Ou au 1er avril 2011 ? Pour rendre les dates plus parlantes, vous pouvez utiliser la balise time avec l’attribut datetime. La valeur de l’attribut datetime doit être une date mise au format AAAA-MM-JJ. Ci-dessous, le code HTML enlève toute ambiguïté quant à la date du 1er avril 2011.

<time datetime="2011-04-01">04/01/11</time>

Vous pouvez aussi préciser le moment d’une journée en utilisant le format hh:mm ou le format hh:mm:ss. Les moments sont précédés du préfixe T et peuvent être écrits en même temps qu’une date, comme ceci :

<time datetime="2011-05-08T19:30">May 8, 7:30pm</time>

Appliquons tout ceci dans un exemple concret. Voici un code HTML décrivant un prochain concert pour lequel les places sont disponibles à l’achat, avec le nom de l’événement, une description, et la date de l’événement.

<div itemscope itemtype="http://schema.org/Event">
  <div itemprop="name">Spinal Tap</div>
  <span itemprop="description">Un des groupes les plus énormes jamais réuni pour un spectacle inoubliable.</span>
  Date de l'événement : <time itemprop="startDate" datetime="2011-05-08T19:30">8 mai à 19h30</time>
</div>

3b. Énumérations et références canoniques (canonical)

Énumérations

Certaines propriétés ne peuvent avoir qu’un nombre limité de valeurs possibles. Les programmeurs appellent souvent cela des «énumérations». Par exemple, une boutique en ligne avec un article en vente pourrait utiliser le type d’élément Offer pour spécifier les détails de l’offre. La propriété availability (disponibilité) ne peut avoir généralement que quelques valeurs—In stock (en stock), Out of stock (rupture de stock), Pre-order (pré-commande), et ainsi de suite. Tout comme les types d’éléments sont écrits sous la forme d’URLs, les valeurs possibles pour une énumération schema.org peuvent aussi être sous la forme d’URLs.
Voici un article à vendre, balisé avec le type d’offre et les propriétés pertinentes :

<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">19,95€</span>
  <span itemprop="availability">Disponible dès aujourd'hui !</span>
</div>

Et voici le même article, mais balisé avec link et href afin d’indiquer de manière plus clair la disponibilité d’une des valeurs permises :

<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">19,95€</span>
  <link itemprop="availability" href="http://schema.org/InStock"/>Disponible dès aujourd'hui !
</div>

Schema.org fournit des énumérations pour un certain nombre de propriétés. Généralement, lorsqu’il y a un nombre limité de valeurs possibles pour une propriété, il y a l’énumération correspondante dans schema.org. Dans ce cas précis, les valeurs possibles pour availibility (disponibilité) sont précisées dans ItemAvailability.

Références canoniques (canonical)

En règle générale, les liens sont spécifiées en utilisant la balise <a>. Voici par exemple un exemple de liens HTML vers la page Wikipedia du livre Catcher in the Rye.

<div itemscope itemtype="http://schema.org/Book">
  <span itemprop="name">The Catcher in the Rye</span>—
  de <span itemprop="author">J.D. Salinger</a>
  Voici la <a itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye">page Wikipedia</a> du livre.
</div>

Comme vous pouvez le voir, itemprop="url" peut être utilisé pour spécifier un lien vers une page d’un autre site (dans notre cas, Wikipedia) qui parle du même thème. Liens vers des sites externes peuvent aider les moteurs de recherche à mieux comprendre ce que vous décrivez sur votre page Web.
Cependant, vous pourriez ne pas vouloir ajouter un lien visible sur votre page. Dans ce cas, vous pouvez utiliser l’élément link, comme suit :

<div itemscope itemtype="http://schema.org/Book">
  <span itemprop="name">The Catcher in the Rye</span>—
  <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
  de <span itemprop="author">J.D. Salinger</span>
</div>

3c. Information manquante / implicite

3d. Extension de schema.org

À propos de l'auteur

Alex GiannelliWebmaster à Marseille, Alex Giannelli travaille en tant qu'indépendant pour des TPE, PME et agences de communication depuis 2012. Spécialisé dans la création de site vitrine sous Wordpress et de boutique ecommerce sous Prestashop, ses compétences lui permettent aussi d'intervenir dans tout développement web. Formé chez Ranking Metrics, le référencement naturel et la gestion de campagnes Adwords font également partie de ses spécialités.Voir tous les articles par Alex Giannelli

  1. Adrien Legoff
    Adrien Legoff31/03/2016

    Bonjour,

    Article très intéressant, merci. Afin de faire bénéficier aux internautes d’un complément d’information, je vous propose de partager une autre source que nous venons de publier, qui explique comment mettre en place un balisage sémantique schema.org sur son site : http://www.lafabriquedunet.fr/seo/articles/mettre-en-place-installer-balisage-semantique-schema-org/

    Encore merci et à bientôt,

    Adrien.

Laisser une réponse