Les microdatas permettent une sémantique au plus juste et apportent plus de sens au éléments qui composent une page HTML.
L’intérêt principal de ces microdatas est qu’elles sont reconnues par les principaux moteurs de recherches tels que Google, Bing, Yahoo !, ou en encore Yandex.
Grâce à un vocabulaire spécifique, nous pouvons définir différents items tels que des produits, des personnes, des événements, du contenu créatif, une entreprise…Les microdatas permettent une sémantique au plus juste et apportent plus de sens au éléments qui composent une page HTML.
L’intérêt principal de ces microdatas est qu’elles sont reconnues par les principaux moteurs de recherches tels que Google, Bing, Yahoo !, ou en encore Yandex.
Grâce à un vocabulaire spécifique, nous pouvons définir différents items tels que des produits, des personnes, des événements, du contenu créatif, une entreprise…
Tous les items comportent des sous-items voir des « sous-sous item », ce qui en fait une liste complète.
Vous pouvez retrouver l’exhaustivité des items diponibles ICI.
Commençons
Les attributs apportés par les microdatas sont
- itemscope : permet de définir l’item qui sera inspecté
- itemtype : permet de définir le type d’item
- itemprop: permet de définir la valeur d’une propriété de l’item
- itemref : permet de faire référence à un autre item
- itemid : permet de définir un identifiant unique à l’item
Mettre les microdatas en application
Je vais implémenter les microdatas dans deux exemples.
Le premier concernera l’item Organization qui permet de définir une entreprise et le deuxième portera sur l’item Product qui permet de définir un produit.
Item Organization
<div itemscope="itemscope" itemtype="http://schema.org/Organization"> <img itemprop="logo" alt="Mon texte alternatif" src="logo.jpg" /> <p itemprop="name">Mon entreprise</p> <img itemprop="image" alt="Mon texte alternatif" src="image-de-lentreprise.jpg" /> <p itemprop="description">Mon entreprise fait cela mais avant tout ceci.</p> <a itemprop="url" href="monlien.html">Lien vers le site de la société</a> <div itemprop="address" itemscope="itemscope" itemtype="http://schema.org/PostalAddress"> Contactez-nous : <span itemprop="streetAddress">42 rue des microdatas</span> <span itemprop="postalCode">75000</span> <span itemprop="addressLocality">Paris, France</span> </div> <div itemscope="itemscope" itemtype="http://schema.org/LocalBusiness"> Horaires d'ouvertures :<meta itemprop="openingHours" content="Mo-Fr 09:00-19:00" />Du lundi au vendredi, de 9h à 19h </div> </div>
Ce qui nous donne :
Item Product
<section itemscope="itemscope" itemtype="http://schema.org/Product"> <header> <h1 itemprop="name">Le nom de mon produit</h1> </header> <article> <img itemprop="image" alt="Mon texte alternatif" src="image-produit.jpg" /> <p itemprop="description">Ma description du produit</p> <a itemprop="url" href="monlien.html">Lien vers mon produit</a> <div itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer"> <span itemprop="price">15 €</span> <span itemprop="availability">En stock</span> </div> <div itemprop="aggregateRating" itemscope="itemscope" itemtype="http://schema.org/AggregateRating"> Note satisfaction : <span itemprop="ratingValue">4</span>/5 Voir les <span itemprop="reviewCount">42</span> avis </div> </article> </section>
Ce qui nous donne :
Dans l’exemple de Product, j’ai ajouté un item de type AggregateRating qui permet d’afficher la note du produit dans le résultat de recherche 😉
Dans ces deux exemple, on remarquera que les microdatas suivent naturellement la construction de l’HTML, c’est en cela que réside sa rapidité d’implémentation.
On remarquera également quelques similitudes entre ces deux exemples, avec la présence de « name », « description », « image ».
Ce sont des éléments communs à tous les items, vous pouvez les retrouver ICI
Remarques
Attention à ce que vous définissez. Il est nécessaire qu’une propriété corresponde bien au type attendu.
Il aurait été incorrect par exemple de juste mettre « 15 » au lieu de « 15 € » au niveau de la propriété « price », car c’est un prix valide qui est attendu. De même que le prix n’est pas un item qui fait référence à Product, mais à Offer (à l’instar de la disponibilité).
De même pour Organization, les horaires d’ouverture appartiennent à LocalBusiness.
En conclusion
Les résultats obtenus comparés aux quelques efforts à fournir sont énormes. Ces microdatas sont vraiment simple à implémenter. D’autant plus que l’outil de validation de webmaster tools vous corrigera dans le cas où une petite erreur de sémantique se serait glisser dans votre code.
Documentation : http://schema.org/docs/gs.html
Liste complète des items : http://schema.org/docs/full.html
Validation : http://www.google.com/webmasters/tools/richsnippets
Tous les items comportent des sous-items voir des « sous-sous item », ce qui en fait une liste complète.
Vous pouvez retrouver l’exhaustivité des items diponibles ICI.
Commençons
Les attributs apportés par les microdatas sont
- itemscope : permet de définir l’item qui sera inspecté
- itemtype : permet de définir le type d’item
- itemprop: permet de définir la valeur d’une propriété de l’item
- itemref : permet de faire référence à un autre item
- itemid : permet de définir un identifiant unique à l’item
Mettre les microdatas en application
Item Organization
![]()
Mon entreprise
![]()
Mon entreprise fait cela mais avant tout ceci.
Lien vers le site de la sociétéContactez-nous : 42 rue des microdatas 75000 Paris, FranceHoraires d'ouvertures : Du lundi au vendredi, de 9h à 19h
Ce qui nous donne :
Item Product
Le nom de mon produit
![]()
Ma description du produit
Lien vers mon produit15 € En stockNote satisfaction : 4/5 Voir les 42 avis
Ce qui nous donne :
Dans l’exemple de Product, j’ai ajouté un item de type AggregateRating qui permet d’afficher la note du produit dans le résultat de recherche 😉
Dans ces deux exemple, on remarquera que les microdatas suivent naturellement la construction de l’HTML, c’est en cela que réside sa rapidité d’implémentation.
On remarquera également quelques similitudes entre ces deux exemples, avec la présence de « name », « description », « image ».
Ce sont des éléments communs à tous les items, vous pouvez les retrouver ICI
Remarques
Attention à ce que vous définissez. Il est nécessaire qu’une propriété corresponde bien au type attendu.
Il aurait été incorrect par exemple de juste mettre « 15 » au lieu de « 15 € » au niveau de la propriété « price », car c’est un prix valide qui est attendu. De même que le prix n’est pas un item qui fait référence à Product, mais à Offer (à l’instar de la disponibilité).
De même pour Organization, les horaires d’ouverture appartiennent à LocalBusiness.
En conclusion
Les résultats obtenus comparés aux quelques efforts à fournir sont énormes. Ces microdatas sont vraiment simple à implémenter. D’autant plus que l’outil de validation de webmaster tools vous corrigera dans le cas où une petite erreur de sémantique se serait glisser dans votre code.
Documentation : http://schema.org/docs/gs.html
Liste complète des items : http://schema.org/docs/full.html
Validation : http://www.google.com/webmasters/tools/richsnippets