itemprop, itemscope et itemtype

L’auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour,

Depuis un certain temps, je lis le code source ainsi que la documentation de Zeste du Savoir dans le but de participer d’avantage à son développement.

Il y a un point que je ne comprends pas dans le code HTML. Il s’agit des élément : itemprop, itemscope et itemtype. J’ai fait quelques recherche à leur propos et je tombe sur les microformats. Malheureusement, je n’arrive pas à comprendre ce concept.

Quelqu’un pourrait-il m’éclairer ?

+0 -0

Cette réponse a aidé l’auteur du sujet

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.

Édité par rezemika

"Les accidents dans un système doivent se produire, mais il n’est pas obligatoire qu’ils produisent pour vous et moi." Laurence Gonzales - Deep Survival

+1 -0

Cette réponse a aidé l’auteur du sujet

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.

Cette réponse a aidé l’auteur du sujet

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.

Vous aimez le frontend ? Il y a un tas de petites tâches faciles si vous voulez contribuer à ZdS : https://github.com/zestedesavoir/zds-site/issues?q=is%3Aissue+is%3Aopen+label%3AC-Front

+0 -0

Cette réponse a aidé l’auteur du sujet

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

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.

Vous aimez le frontend ? Il y a un tas de petites tâches faciles si vous voulez contribuer à ZdS : https://github.com/zestedesavoir/zds-site/issues?q=is%3Aissue+is%3Aopen+label%3AC-Front

+0 -0

Cette réponse a aidé l’auteur du sujet

Ç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.

Vous aimez le frontend ? Il y a un tas de petites tâches faciles si vous voulez contribuer à ZdS : https://github.com/zestedesavoir/zds-site/issues?q=is%3Aissue+is%3Aopen+label%3AC-Front

+2 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte