itemprop, itemscope et itemtype

Salut !

Je ne suis pas expert dans le domaine (loin de là), mais voilà en gros ce que j’en sais.

Il s’agit de métadonnées dont les spécifications sont énoncées sur schema.org et qui permettent à divers outil de mieux comprendre la sémantique d’une page web.

Par exemple, si tu as ceci :

1
2
3
4

Antenne locale de ZdS

Adresse : 42 rue des Clémentines joyeuses, 99900 Les Vergers.
Horaires d'ouverture : Du lundi au vendredi de 8h à 17h.

Pour un être humain qui sait lire le français, le sens et l’organisation de tout ça est très clair, mais pour un pc c’est déjà plus ambigu. Mais vu que le HTML peut se parser facilement de nos jours, les microdatas ajoutent des infos sur la sémantique ou le but de ces phrases. Ça peut par exemple donner quelque chose comme ça.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<div itemscope itemtype="http://schema.org/LocalBusiness">  # Un "magasin local"
    <h1><span itemprop="name">Antenne locale de ZdS</span></h1>  # Le nom
    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">  # Adresse postale
      Adresse :<br/>
      <span itemprop="streetAddress">42 rue des Clémentines joyeuses</span>,  # Rue
      <span itemprop="postalCode">99900</span>  # Code postal
      <span itemprop="addressLocality">Les Vergers</span>  # Ville
    </div>
    Horaires d'ouverture :<br/>
    # Pas tout à fait sur du format, les specs sont un peu floues là-dessus.
    <span itemprop="openingHours" content="Mo-Fr 08:00-17:00">Du lundi au vendredi de 8h à 17h.</span>
</div>

Quand aux fonctions exactes des itemprop, itemscope et itemtype, je suis trop débutant sur ce sujet pour pouvoir te l’expliquer de manière compréhensible et fiable, désolé.

Edit : My bad, j’ai oublié les heures d’ouverture dans l’exemple.

Salut,

Pour compléter le message de rezemika avec ce dont je me souviens : les microdonnées servent à définir des entités. Tu obtiens à la fin une hiérarchie de données sémantiques, une entité pouvant en contenir d’autres. Par exemple, un message aura un auteur et une date de création, cet auteur aura un nom, etc.

ìtemscope est un attribut à placer sur une balise HTML. Cette balise définira le scope d’une entité. C’est à dire que ce qui sera défini dans les balises filles sera contenu dans cette entité.

itemtype permet de préciser un type à l’entité créée. itemtype ne s’utilise pas sans itemscope, on ne peut définir un type que sur les scopes.

itemprop permet d’indiquer qu’une balise définit une propriété de l’entité. L’attribut contient le nom de la propriété, et l’attribut contenant la valeur dépend de la valise.

Pour compléter les VDDs, le web sémantique est un sujet qu’on avait discuté ici : https://zestedesavoir.com/forums/sujet/9436/le-web-semantique/ , tu te souviens peut-être du topic.

Je déplace d’ailleurs ce topic dans le forum web.

Officiel oui, par le biais d’un tas de RFC du W3C, par exemple :

• https://www.w3.org/TR/microdata/
• https://www.w3.org/standards/techs/linkeddata
• https://www.w3.org/standards/techs/rdfa

Sinon les grands acteurs du web ont créé ça : http://schema.org

Très utile et très utilisé, oui aussi. Sans ça, pas de Google Assistant ou de Siri, pas de résultats riches sur Google ou Yandex ou Bing ou autre. Pas d’IBM Watson, pas de victoire à Jeopardy.

Ça demande pas mal d’effort, je t’avertis. C’est compliqué et peu de guides existent à ma connaissance.

Je te recommande d’utiliser https://search.google.com/structured-data/testing-tool pour vérifier si ce que tu fais est correct.