Les référenceurs nous demandent parfois d’utiliser des données balisées en microformats… tout cela n’est pas forcément très clair, alors après avoir potassé pour vous quelques documentations issues de Microformats - Google - W3C, voici de quoi répondre à cette demande de façon un peu plus précise.
Un peu de théories avant tout
Avant de donner un exemple concret, il faut juste rappeler qu’il existe plusieurs façons de présenter ce qu’on nomme les Rich-Snippets – données signifiantes permettant de faciliter l’accès au contenu informationnel
- RDFa (W3C – structure XML complexe dans la structure HTML
- microformat (wiki ouvert ≠ standards)
- html5 microdata (W3C)
Les microdonnées html5 vont devenir la norme ; elles peuvent être vues comme une extension des microformats qui visent à combler leurs lacunes en évitant la complexité des formats comme RDFa.
Et un peu de pratique aussi
Voici un exemple parce que tous nos sites ne sont pas html5 : (issus d’un site immobilier, pour l’adresse d’une agence)
Format microformat (tout html/xhtml+)
<div class="vcard">
<img class="photo" alt="Agence immo Crémieu" src="agence-cremieu.jpg">
<span class="fn org">Agence immo Crémieu</span>
Adresse :
<div class="adr">
<span class="street-address">2 Rue Quelquechose</span>,
<span class="locality">Crémieu</span>, <span class="region">Rhône-Alpes</span>
<span class="postal-code">38460</span>, <span class="country">France</span>
</div>
<span class="geo">
<span class="latitude">
<span class="value-title" title="45,7259"></span>
</span>
<span class="longitude">
<span class="value-title" title="5,2506"></span>
</span>
</span>
Téléphone : <span class="tel">01 23 45 67 89</span>
<a href="http://www.reseau.com/agencecremieu/" class="url">http://www.reseau.com/agencecremieu/</a>
</div>Format microdata (à partir d’html5)
<div itemscope itemtype="http://data-vocabulary.org/Organization">
<img itemprop="photo" alt="Agence immo Crémieu" src="agence-cremieu.jpg">
<span itemprop="name">Agence immo Crémieu</span>
Adresse :
<span itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">2 Rue Quelquechose</span>,
<span itemprop="locality">Crémieu</span>, <span itemprop="region">Rhône-Alpes</span>.
<span itemprop="postal-code">38460</span>, <span itemprop="country">France</span>
</span>
<span itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo/">
<span itemprop="latitude" title="45,7259"></span>
<span itemprop="longitude" title="5,2506"></span>
</span>
Téléphone : <span itemprop="tel">01 23 45 67 89</span>.
<a href="http://www.reseau.com/agencecremieu/" itemprop="url">http://www.reseau.com/agencecremieu/</a>.
</div>Vous retrouverez des petits recap d’infos par types (Event, Organization, Person, Product, Review, etc.) à cette adresse : http://www.data-vocabulary.org et chez Google : http://www.google.com/support/webmasters/bin/topic.py?topic=21997
Du côté de chez Sw… Schema.org
De plus je vous invite à jeter un œil sur cette ressource, qui va prendre le pas sur les autres : http://schema.org/docs/schemas.html
Qu’est-ce que c’est ? Pourquoi ? C’est la même chose que Data-vocabulary.org !
Oui, mais :
schema.org is a collaboration by Google, Microsoft, and Yahoo! to improve the web by creating a structured data markup schema supported by major search engines.
En fait, cela ne change pas grand chose, on va juste s’appuyer sur ces schémas de représentation de donnée, car Data-vocabulary & Schema ont des schémas de données en communs.
Voilou… tout simplement !