J’abordais le sujet des microformats, il y a tout juste un mois, au travers d’un billet SEO :
« Certaines informations sur les produis (prix, marque, évaluations) peuvent aujourd’hui être formatées dans le corps de vos pages, en n’utilisant que des classes et attributs XHTML, afin d’être réutilisées comme métadonnées par Google. Il s’agit des microformats, un des pendants du Web sémantique. »
Voyons aujourd’hui de quoi il s’agit.
Définition des microformats [Wikipedia]
Un microformat (parfois abrégé sous μF ou uF) est une approche de formatage de données basé sur le web qui cherche à réutiliser le contenu existant comme les métadonnées, en n’utilisant que des classes et attributs XHTML et HTML. Cette approche est conçue pour permettre à l’information destinée aux utilisateurs finaux (comme le carnet d’adresses, les coordonnées géographiques, les événements et autres données en rapport) d’être traitée automatiquement par le logiciel ou robot d’un moteur de recherches.
Même si le contenu des pages web est déjà capable techniquement d’être « traité automatiquement », et cela depuis la conception du Web, il existe certaines limites. Ceci parce que les balises traditionnelles de marquage étaient utilisées pour afficher l’information sur le Web et non pas pour décrire ce que voulait dire l’information. Les microformats sont destinés à combler ce fossé en attachant de la sémantique, et par conséquent éviter d’autres méthodes plus compliquées de traitement automatisé, comme le traitement du langage naturel ou le screen scraping. L’utilisation, l’adoption et le traitement des microformats permet aux éléments de données d’être indexés, cherchés, sauvegardés ou référencés de manière à ce que l’information puisse être réutilisée ou combinée.
Les microformats actuels permettent l’encodage et l’extraction d’événements, d’informations de contact, de relations sociales et ainsi de suite.
Un peu d’histoire autour des microformats
L’idée du Web sémantique ne date pas d’hier mais plutôt de 15 ans. La notion de métadonnées a été abordée très tôt, dès 1994, par son inventeur Tim Berners-Lee. C’était lors de la conférence WWW 94 où fut annoncée la naissance du W3C.
Web sémantique et métadonnées ont ensuite été abordés moult fois, ici, là et ailleurs. Au sein de sujets SEO mais également et surtout au travers de l’intégration normée et valide (XHTML, CSS, W3C, CHIC etc.).
Les microformats ont ensuite émergé d’un mouvement pour rendre les éléments de données reconnaissables, aptes à pouvoir être traités automatiquement par le logiciel, tout en étant directement lisibles par les utilisateurs finaux. En parallèle à la croissance de la communauté des microformats et sous impulsion de CommerceNet, microformats.org a été fondé.
Notons toutefois que, ni CommerceNet ni Microformats.org ne sont un corps de standards.
Ainsi, les microformats ne sont pas nouveaux, une simple recherche suffit pour s’en rendre compte. Fred Cavazza abordait le sujet en 2005 sur son blog – Connaissez-vous les micro-formats ?. Autre exemple : en 2007, Chris Messina, John Allsopp, Tantek Çelik, Jeremy Keith et autres acolytes s’organisaient un diner microformats à San Francisco.
Google, microformats et référencement naturel
Tout simplement parce que Google utilise officiellement, depuis moins d’un an, les microformats pour améliorer ses pages de résultats de recherches, et ce, en qualifiant la description (snippet) des pages indexées. Je vous invite à lire l’article sur Google Webmsater central blog au sujet des descriptions enrichies.
Comprendre une description enrichie
Notons que, régulièrement, Google introduit de nouveaux formats de descriptions, dernier format en date : la description enrichie liée aux événements. Ou comment, pour le site d’une salle de spectacle, Google remonte, liste et trie par date, les futurs événements de la dite salle directement à partir d’une page de résultats.
Description enrichie pour les événements
Google a donc reconnu officiellement certains microformats proposés par microformats.org. Cela se traduit par une simple propriété, un simple nom de classe XHTML (class=) à apporter sur vos balises. Le robot Google pourra ensuite récupérer et utiliser pour ses pages de résultats, une information se trouvant au sein de votre site dans telle balise avec tel nom de classe.
Face aux améliorations proposées par Google, le sujet des microformats revient ainsi au coeur des débats. Nous verrons un peu plus bas, que, Google propose même aujourd’hui, un outil pour tester une page microformatée avec prévisualisation de la future description enrichie.
En outre, si vous avez lu le billet – Améliorer mon taux de clics sur la page de résultats Google ? J’optimise mes descriptions ! – vous savez que Google n’opte pas toujours pour la description (snippet) offrant le meilleur taux de clic sur vos pages indexées. Il vous faut donc impérativement optimiser vos balises META DESC (<meta name=’description’>) afin de maximiser les résultats.
Dorénavant, l’utilisation des microformats peut vous donner encore plus de contrôle sur la manière dont les descriptions de vos pages sont proposées dans la SERP (page de résultats de recherches Google). Si vous êtes en cours de développement d’un site Internet, je vous recommande fortement d’inclure dès à présent les microformats sur toutes vos pages. En outre, pour les utilisateurs Wordpress ou Magento, les changements sont relativement simples à apporter.
Voyons ensemble les microformats utiles au e-commerce : hProduct et hReview.
Les microformats liés aux avis : hReview
Lorsque des commentaires ou avis sont balisés à l’aide des microformats sur vos pages, Google peut les identifier et en rendre une partie visible dès ses propres pages de résultats. Les éléments de commentaires, tels que une note ou un prix moyen, peuvent aider les utilisateurs à identifier les pages avec un contenu de qualité et donc les inciter à visiter votre lien plutôt que celui du concurrent.
Vous pouvez baliser chaque commentaire individuellement (ex. l’avis de la rédaction sur un produit), ou agréger plusieurs informations issues de commentaires – ex. : la note moyenne, le nombre total de commentaires etc.
Il vous faudra utiliser le format commentaire individuel pour les pages contenant un seul avis (c’est le cas sur un article de blog). Pour des pages contenant plusieurs avis, optez pour le format d’agrégation. Si vos pages contiennent les deux, (ex.: l’avis du webmaster plus des avis clients), vous pouvez opter pour l’un ou pour l’autre.
L’avis ou le commentaire individuel
Description enrichie (microformats : hReview)
| hreview |
Nom de classe racine. |
| item (itemreviewed) |
Cette propriété item est requise. Elle doit avoir au minimum le nom (en utilisant la sous-propriété « fn » – le texte formaté correspondant au nom) de votre produit (un hReview ne décrit seulement qu’un item), devrait fournir au moins un URI (« url ») pour l’item, et peut fournir au moins une URL vers une photo ou une représentation (« photo ») de l’item. |
| rating |
La propriété optionnelle rating est un nombre entier [1.0 – 5.0]. Vous pouvez utiliser une autre échelle grâce aux alternatives optionnelles worst (par défaut:1.0) et/ou best (par défaut:5.0). |
| reviewer |
La propriété optionnelle reviewer spécifie la personne qui a écrit la critique. Si l’auteur de la critique est spécifié, une hCard représentant l’auteur de la critique doit être fournie. Pour les critiques anonymes, utilisez « anonymous » (sans guillemets) pour le nom propre de la critique. |
| dtreviewed |
La propriété optionnelle dtreviewed doit fournir un « date time » absolu ISO8601 du moment où la critique a été écrite ou autrement publiée. |
| description |
Cette propriété optionnelle contient le texte clair représentant l’opinion écrite du critique. Le champ peut inclure un balisage valide XHTML (par ex. des paragraphes). |
| summary |
Une courte description optionnelle de l’avis. |
Exemple d’utilisation :
<div class="hreview"><span class="item">
<span class="fn">T-shirt American Apparel</span>
</span>
L'avis de la rédaction par <span class="reviewer">Kevin HA</span> le
<span class="dtreviewed">
6 Janvier<span class="value-title" title="2010-01-06">
</span>.
<span class="summary">American Apparel, les basiques tendances made in USA</span>
<span class="description">Ce t-shirt American Apparel vert prend tout son sens
lorsqu'il est revêtu par le Capitaine Commerce</span>
Notre note :
<span class="rating">4.5</span>
</span></div>
Les avis ou commentaires multiples
Google est également capable de réutiliser des données issues de plusieurs commentaire et/ou notes. Exemple ci-dessous, d’un restaurant ayant reçu 15 avis avec une note de 8/10. La description riche s’affiche de cette manière :
Description enrichie (microformats : hReview-aggregate)
| hreview-aggregate |
Nom de classe racine. Tout le contenu agrégé concernant les avis d’utilisateurs, doit être embarqué dans un élément assigné à la propriété racine obligatoire. |
| item (itemreviewed) |
Cette propriété item est requise. Elle doit avoir au minimum le nom (en utilisant la sous-propriété « fn » – le texte formaté correspondant au nom) de votre produit (un hReview ne décrit seulement qu’un item), devrait fournir au moins un URI (« url ») pour l’item, et peut fournir au moins une URL vers une photo ou une représentation (« photo ») de l’item. |
| rating |
La propriété optionnelle rating est un nombre entier [1.0 – 5.0]. Vous pouvez utiliser une autre échelle grâce aux alternatives optionnelles worst (par défaut:1.0) et/ou best (par défaut:5.0). |
| count |
Propriété optionnelle stipulant le nombre total d’avis pour le produit. |
| votes |
Propriété optionnelle spécifiant le nombre de personnes ayant voté sans pour autant laisser de commentaire. Il est possible de spécifier la propriété count, votes ou les deux. |
| summary |
Une courte description optionnelle de l’avis. |
Exemple d’utilisation :
<div class="hreview-aggregate">
<span class="item">
<span class="fn">T-shirt American Apparel</span>
</span>
<span class="rating">
<span class="average">8</span> sur
<span class="best">10</span>
</span>
basée sur
<span class="votes">24</span> notations.
et <span class="count">5</span> commentaires d'utilisateurs.</div>Les microformats liés aux produits : hProduct
Actuellement, Google expérimente un balisage dédié aux produits, les informations récupérées ne sont pas encore utilisées dans la SERP, mais ce n’est qu’une question de temps.
Chaque produit peut être qualifié avec un certains nombre de propriétés : le nom, la catégorie, le prix et la marque. Pour que Google utilise vos informations, il est indispensable de labelliser vos produits à l’aide de ces propriétés.
Concernant les produits, Google reconnait les propriétés suivantes :
| hproduct |
Nom de classe racine. Tout le contenu de votre produit doit être embarqué dans un élément assigné à la propriété racine obligatoire. |
| fn |
Contient le nom du produit (texte). Utilisez une seule fois la propriété obligatoire fn. |
| brand |
La propriété optionelle brand est utilisée pour identifier la marque du produit. Dans certains cas, il peut s’agir d’un fabricant il faudra dans ce cas utiliser une hCard. |
| category |
Pour spécifier la catégorie du produit (telle qu’un t-shirt, un livre ou encore un jeu vidéo), utilisez la propriété optionnelle category. Il est possible de l’utiliser plusieurs fois dans hProduct. Bon à savoir : vous pouvez aussi transformer le contenu des catégories en tags en créant des liens pour chacune et en ajoutant la propriété rel= »tag » sur les <a>. |
| price |
La propriété optionnelle price spécifie le prix du produit. Le contenu prix à l’intérieur de l’élément assigné class= »price » peut apparaître dans le format de la devise/monnaie. C’est un nombre avec une virgule flottante écrite avec un point et le prix doit rester unique. |
| description |
Utilisez la propriété optionnelle description pour y ajouter le contenu décrivant le produit. |
| photo |
Vous pouvez assigner la propriété optionnelle photo, autant de fois que vous le voulez, pour toutes les images ou liens vers des images dans votre contenu produit. |
| url |
La propriété optionnelle url peut être assignée à un lien qui redirige vers une page web contenant des informations détaillées sur le produit. |
Notons qu’il existe d’autres propriétés (identifier ou encore listing) mais ces propriétés ne sont, a priori, pas (encore) reconnues par Google.
Exemple d’utilisation :
<div class="hproduct">
Marque : <span class="brand">American Apparel</span>
<span class="category">T-shirts</span>
<h1 class="fn">T-shirt vert du Capitaine</h1>
Disponible à partir de
<span class="price">29.95 €</span>.
<span class="description">Tee shirt manches courtes. Col rond.
Surpiqûres contrastées à la base et aux bas des manches. Jersey 100% coton.
</span>
<a class="url" href="http://maboutique.exemple.com">Plus de détails sur le t-shirt
vert du Capitaine</a></div>
Étapes de mise en place des microformats
1. Vérifiez et, si besoin est, mettez à jour la validation de votre site Web aux normes W3C (soyez sur de bénéficier d’un site valide).
2. En utilisant les propriétés reconnues par Google, ajoutez à vos pages les classes nécessaires détaillées ci-dessus. Aidez-vous également des différentes ressources Google et du Wiki dédié aux microformats.
3. Soumettez ensuite vos pages à l’outil de test Google – l’erreur “Insufficient data to generate the preview” s’affiche ? Vérifiez que votre site est bien valide (étape 1) et prenez soin d’utiliser un nombre suffisant de propriétés pour prévisualiser votre description riche.
4. Pour terminer, faites savoir à Google via ce formulaire, que vous êtes l’un des premiers sites e-commerce français à adopter l’utilisation des microformats.
Malgré une prise en compte non garantie de votre site par Google, il existe aucune raison de ne pas inclure dès à présent les microformats sur vos pages. Notons que, bénéficier de données web structurées est dans tous les cas bénéfique, voire nécessaire , à l’optimisation du référencement naturel.
Des sites comme : Mashable, LinkedIn, Urbanspoon et beaucoup d’autres ont, d’ores et déjà, adopté les microformats.
Et vous ? Avez-vous mis en place les microformats sur votre site ? Allez-vous procéder à leur implantation ? N’hésitez pas à partager vos avis via les commentaires.
Stéphane Hamel est l’un des principaux pionniers du Web Analytics en Amérique du Nord et il vient de publier le WAMM (Web Analytics Maturity Model 
