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, France
	    

	   

	   	Horaires 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 produit
        

            15 €
		   En stock
        
	

		Note 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