• Home
  • Nous contacter

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab
Frontend

Les microdatas HTML5

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 :

organization

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 :

product

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 texte alternatif

Mon entreprise

        Mon texte alternatif         

            Mon entreprise fait cela mais avant tout ceci.         

        Lien vers le site de la société         
Contactez-nous : 42 rue des microdatas 75000 Paris, France
Horaires d'ouvertures : Du lundi au vendredi, de 9h à 19h

Ce qui nous donne :

organization

Item Product

    
        

Le nom de mon produit

    
    
        Mon texte alternatif         

            Ma description du produit         

        Lien vers mon produit         
            15 € En stock         
Note satisfaction : 4/5 Voir les 42 avis
    

Ce qui nous donne :

product

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

26/03/2014 51 MIN READ BY: Matthieu POULLIN 0 COMMENT
SHARE
LIRE LA SUITE

Matthieu POULLIN

Compte rendu du Velocity Europe 2013 - Jour 2

Compte rendu du Velocity Europe 2013 - Jour 3

VOUS POURRIEZ AIMER

Frontend Le WebGL, Dans quel but ?

Frontend Ascensor.js, votre site en slides navigables au clavier

Frontend Utiliser tous les verbes HTTP avec CORS

Display Frontend L'actualité AdFab Les grains de la veille #2 : React Native, PWA, Display…

Frontend Flat design

Frontend Code me, I’m Famo.us, 2/3

A propos d’Adfab

Nous sommes un studio de production digitales et d’innovation digitales au service des agences et des annonceurs
Nous recherchons le scintillement dans les regards et le plaisir de réalisations sur-performantes
Nous sommes techno-agnostiques
Nous sommes Adfab

Le blog d'Adfab
Copyright © 2018 Adfab Connect