Le guide ultime des microformats : références et exemples

Si le concept POSH (Plain Old Semantic HTML) ne vous est pas familier, la première chose à savoir c'est que produire du code sémantique, qui reflète la valeur du contenu textuel (en plus de la mise en forme), est une composante critique du processus de conception Web.

Alors que le HTML dispose d'une kyrielle d'éléments par lesquels le contenu prend du sens, une foultitude de microformats (conventions) ont été créés pour mieux représenter les données qui composent votre page. Commentez Donner une note à l'article (5)

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Les microformats, c'est quoi ?

Bien qu'ils ne fassent pas partie des spécifications HTML du W3C, ils offrent un assortiment utile de conventions de nommage (en utilisant les attributs class, id, rel et rev) qui identifient les points d'intérêt sur une page. Ils permettent de mettre en avant du contenu, tel que les événements de calendrier, un lien vers l'acceptation de vos licences (dont la GPL) et même des choses plus légères telles que les recettes de cuisine.

Si les microformats ne font pas encore partie du standard W3C, les navigateurs Web n'ont pas attendu pour en assurer le support.

Les microformats valent vraiment la peine d'y porter un intérêt et de les implémenter dans les sites que vous réalisez.

Image non disponible
Le site officiel des microformats dispose d'un wiki et d'un forum et metdifférents outils à votre disposition.


Vous utilisez peut-être déjà les microformats si vous utilisez un CMS tel que WordPress, car ce dernier supporte nativement des formats de données simples, comme l'attribut rel.

Si vous êtes nouveau dans l'univers des microformats, vous vous demandez certainement pourquoi vous devriez vous embêter à les utiliser.

Il y a certes des avantages et des inconvénients, mais tout ce qui aidera votre site à être mieux compris par les robots (spiders, crawlers) qui indexent vos pages vaut bien cet effort supplémentaire, non ?

Image non disponible
De tous les microformats, rel=« nofollow » est probablement le plus connu.


Parce que les microformats s'appuient sur la syntaxe et les attributs conventionnels du HTML, vous pouvez les utiliser aussi en XHTML. Même les pages XML (comme les flux RSS ou ATOM) peuvent profiter des microformats. Cela accroit ainsi leur utilisation potentielle. Ils se combinent également très bien avec le RDFa et les autres métadonnées.

I-A. Les avantages des microformats

  1. Ils améliorent la valeur sémantique de votre contenu.
  2. D'autres applications Web peuvent les utiliser pour découvrir les contenus de votre site. Ils peuvent également servir d'interface avec vos données.
  3. Les réseaux sociaux les implémentent dans les profils utilisateurs pour que des services tiers puissent interagir avec eux.
  4. Des extensions de navigateurs existent pour donner aux utilisateurs l'accès aux données contenues dans les microformats. Par exemple, Michromeformats est une extension Google Chrome qui découvre pour vous les microformats embarqués dans une page web.
  5. Les robots (comme Googlebot) les utilisent pour l'indexation des sites.

I-B. Les inconvénients des microformats

  1. Ils nécessitent davantage de code HTML.
  2. Ils sont encore une chose que vous devez apprendre et maintenir.
  3. Ils existent pour relativement peu de types de données.
  4. Ils attirent l'attention sur vos contenus (qui peuvent être data minés).
  5. Les navigateurs ne les supportent pas uniformément.
Image non disponible
L'extension Operator pour Firefox détecte les microformats et les rend lisibles.
Image non disponible
Le microformat hCard permet aux extensions Firefox telles que Tails Export de découvrir et de s'interfacer avec la carte de visite virtuellede quelqu'un.

II. Tableau de référence des microformats

Chaque microformat a un but unique de présenter un certain type d'informations et tous sont potentiellement utiles en fonction de vos besoins.

Bien que vous pourriez trouver des informations exhaustives sur le site des microformats, voici un récapitulatif rapide de ce qu'on y trouve :

Nom

But

ADR

Marquer une adresse postale.

Geo

Marquer une position géographique.

hAtom

Ajouter du contenu syndicable.

hAudio

Décrire un podcast ou un fichier audio.

hCalendar

Marquer un événement ou lister du contenu par date (concerts, spectacles…).

hCard

Exploiter les contacts d'affaires ou personnels (carte de visite).

hListing

Lister des biens et des services.

hMedia

Lister des médias.

hNews

Utilise hAtom pour les nouvelles journalistiques.

hProduct

Embarquer des informations supplémentaires sur un produit.

hRecipe

Marquer des recettes de cuisine.

hResume

Présenter les expériences d'un CV.

hReview

Avis et notes de produits et services.

rel

L'attribut rel est un microformat pour les éléments HTML, quelques exemples populaires : rel=« license », rel=« nofollow », rel=« tag », rel=« directory », rel=« enclosure », rel=« home », rel=« payment ».

Robot Exclusion Profile

Donner des instructions aux robots.

VoteLinks

Fournir des options pour aimer ou ne plus aimer un lien.

XFN

Décrire une relation avec un site Web.

XFolk

Lister des liens favoris.

XMDP

Ajouter des ressources sur le profil d'une page.

XOXO

Mettre en avant un document ou une liste d'objets.

II-A. Les valeurs de l'attribut rel

Pour compléter le tableau ci-dessus, voici une description des valeurs de l'attribut rel (raccourci de relationship) :

  • license : identifie les accords de licences (tel que Creative Commons ou GPL) sur une page ;
  • nofollow : indique aux moteurs de recherche de ne pas ajouter de poids ou de valeur à la ressource liée ;
  • tag : applique des mots-clés aux liens pour construire un nuage de tags ou de catégories ;
  • directory : indique une liste dans un répertoire (comme un dossier) sur le site courant ;
  • enclosure : pour les liens qui pointent vers des fichiers téléchargeables ;
  • home : fournit un lien permanent vers la page d'accueil d'un site ;
  • payment : indique si un lien pointe vers une page de paiement ou d'achat.

III. Utiliser les microformats : exemples

Recommander d'utiliser les microformats, c'est bien, mais fournir des exemples, c'est mieux ! Nous allons voir ensemble quelques exemples pour chaque microformat qui peut être implémenté sur votre site.

Pour commencer, le concept-clé à comprendre : un microformat s'identifie par un bout de donnée contenu dans l'attribut de class ou id d'une balise HTML.

La balise peut jouer un rôle dans le type de donnée à afficher (comme les liens), mais si aucune alternative sémantique n'existe, vous pouvez utiliser un div ou un span autour du contenu en question. Même si l'utilisation d'un span ne semble pas très élégante, il ajoute une signification spéciale dans ce cas.

III-A. Adr

 
Sélectionnez
<ul class="adr">

  <li class="street-address">123 North Street</li>
  <li class="locality">Manchester</li>
  <li class="postal-code">MX43 991</li>

  <li class="country-name">UK</li>
</ul>

Racine : adr.

Valeurs d'attributs :

  • post-office-box ;
  • extended-address ;
  • street-address ;
  • locality ;
  • region ;
  • postal-code ;
  • country-name.

III-B. Geo

 
Sélectionnez
<p class="geo">
  <abbr class="latitude" title="37.408183">N 37° 24.491</abbr> -
  <abbr class="longitude" title="-122.13855">W 122° 08.313</abbr>

</p>

Racine : geo.

Valeurs d'attributs obligatoires :

  • latitude ;
  • longitude.

III-C. hAtom

 
Sélectionnez
<div class="hAtom">
  <div class="hentry">
    <h3 class="entry-title">I Love Microformats</h3>
    <abbr class="published" title="2010-08-28T13:14:37-07:00">Aug 28, 2010</abbr>

    <p class="category"><a href="/category/rdf" rel="tag">RDF</a></p>
    <p><a href="#" title="Post a comment">What do you think of this post?</a></p>

    <div class="entry-content">
      <p>Place your content right here for maximum impact!</p>
    </div>
    <dl>
      <dt>Tags:</dt>

      <dd><a href="/tag/standards/" rel="tag">standards</a></dd>
      <dd><a href=" /tag/microformats/" rel="tag">microformats</a></dd>

    </dl>
  </div>
</div>

Racine : hAtom, hFeed.

Valeur d'attribut :

  • hentry ;
  • entry-title ;
  • entry-content ;
  • entry-summary ;
  • bookmark ;
  • published ;
  • updated ;
  • author.

III-D. hAudio

 
Sélectionnez
<p class="haudio">
  <em class="fn">Bohemian Rhapsody</em>
  by <span class="contributor vcard">
  <em class="fn org">Queen</em></span>

  found on <em class="album">A Night at the Opera</em>
</p>

Racine : hAudio.

Valeurs d'attributs obligatoires :

  • fn ;
  • album.

Valeurs d'attributs optionnels :

  • contributor ;
  • duration ;
  • item ;
  • position ;
  • category ;
  • published ;
  • photo ;
  • description ;
  • sample ;
  • enclosure ;
  • payment ;
  • price (currency, amount).

III-E. hCalendar

Vous pouvez utiliser le générateur hCalendar plutôt que d'écrire le code à la main.

 
Sélectionnez
<p class="vEvent">
  <a class="url" href="http://www.yoursitehere.com/">MySite</a>

  <span class="summary">New website launch</span>:
  <abbr class="dtstart" title="20091202">December  2</abbr>-
  <abbr class="dtend" title="20091204">4</abbr>, at
  <span class="location">Google College, London, UK</span>

</p>

Racine : vCalendar, vEvent.

Valeurs d'attributs obligatoires :

  • dtstart ;
  • summary.

Valeurs d'attributs obligatoires :

  • location ;
  • url ;
  • dtend ;
  • duration ;
  • rdate ;
  • rrule ;
  • category ;
  • description ;
  • uid ;
  • geo (latitude, longitude) ;
  • attendee (partstat, role) ;
  • contact ;
  • organizer ;
  • attach ;
  • status.

III-F. hCard

Vous pouvez aussi utiliser le générateur hCard plutôt que d'écrire le code à la main.

 
Sélectionnez
<ul id="hCard-John-Doe" class="vcard">
  <li class="fn">John Doe</li>
  <li class="org">Special Stores</li>

  <li><a class="email" href="mailto:John@doe.org">John@doe.org</a></li>
  <li class="adr">
    <ul>

      <li class="street-address">44 Semantic Drive</li>,
      <li class="locality">Markup City</li>,
      <li class="region">World Wide Web</li>,
      <li class="postal-code">BP33 9HQ</li>

      <li class="country-name">Internet</li>
    </ul>
  </li>
  <li class="tel">01234 56789</li>

 </ul>

Racine : hCard.

Valeurs d'attributs obligatoires :

  • fn ;
  • n (family-name, given-name, additional-name, honorific-prefix, honorific-suffix).

Valeurs d'attributs optionnels :

  • adr (post-office-box, extended-address, street-address, locality, region, postal-code, country-name, type, value) ;
  • agent ;
  • bday ;
  • category ;
  • class ;
  • email (type, value) ;
  • geo (latitude, longitude) ;
  • key ;
  • label ;
  • logo ;
  • mailer ;
  • nickname ;
  • note ;
  • org (organization-name, organization-unit) ;
  • photo ;
  • rev ;
  • role ;
  • sort-string ;
  • sound ;
  • tel (type, value) ;
  • title ;
  • tz ;
  • uid ;
  • url.

III-G. hListing

 
Sélectionnez
<div class="hlisting">
  <p>
    <span class="item fn">Office space</span>
    <span class="offer rent">to rent</span>(<abbr class="dtlisted" title="20100202">2/2/10</abbr>)
  </p>

  <p class="description">50-square-foot space available in local tech office at:
    <div class="location adr">
      <span class="street-address">123 Microland Road.</span>
      <span class="locality">Cyberspace</span>, <span class="region">XD</span>

      <span class="postal-code">12345</span>
      <span class="country">Mars</span>
    </div>
    Available during <abbr class="dtexpired" title="20100401">April 2010</abbr>

    for <span class="price">$1500/qtr</span>
  </p>
  <div class="lister vcard">
    Contact:
    <span class="fn">John Doe</span>

 at <span class="tel"><span class="value">(01) 12345-678900</span>(<abbr class="type" title="cell">C</abbr>)</span>

  </div>
</div>

Racine : hlisting.

Valeurs d'attributs obligatoires :

  • description ;
  • lister (fn, email, url, tel) ;
  • action (sell, rent, trade, meet, announce, offer, wanted, event, service).

Valeurs d'attributs optionnels :

  • version ;
  • dtlisted ;
  • dtexpired ;
  • price ;
  • item (fn, url, photo, geo, adr) ;
  • summary ;
  • tag ;
  • permalink.

III-H. hMedia

 
Sélectionnez
<div class="hmedia">
  <h3 class="fn">Introduction to the Open Media Web</h3>
  <object class="player" type="application/x-shockwave-flash" data="http://www.exampleurl.com/video.swf">

    <param name="movie" value="http://www.exampleurl.com/video.swf"/>
    <param name="allowScriptAccess" value="always"/>
    <param name="allowFullScreen" value="true"/>

  </object>
  <ul>
    <li><a rel="enclosure" type="video/mp4" title="Download the movie" href="http://www.exampleurl.com/video.mp4">Video.mp4</a></li>
  </ul>
</div>

Racine : hMedia.

Valeur d'attribut :

  • fn ;
  • contributor ;
  • photo ;
  • player ;
  • enclosure.

III-I. hNews

 
Sélectionnez
<div class="hnews hentry item">
  <h4 class="entry-title">Microformats are awesome</h4>
  <p class="author vcard">

  By <span class="fn" >John Doe</span>,
  <span class="source-org vcard dateline"><span class="org fn">Associated Press</span></span> -
  <span class="updated" title="2010-04-19">19 April 2010</p>

  <p>News story</p>
</div>

Racine : hNews.

Valeur d'attribut obligatoire :

  • hentry ;
  • item ;
  • entry-title ;
  • author ;
  • source-org ;
  • vcard ;
  • updated.

Valeurs d'attributs optionnels :

  • dateline ;
  • geo (latitude, longitude) ;
  • item-license ;
  • principles.

III-J. hProduct

 
Sélectionnez
<ul class="hproduct">
  <li class="brand">MySite!</li>
  <li class="category">Software</li>

  <li class="fn">Microsoft Office 2007</li>
  <li class="description">The world's most popular office suite.</li>
  <li class="url">http://office.microsoft.com</li>

</ul>

Racine : hProduct.

Valeur d'attribut obligatoire :

  • fn.

Valeurs d'attributs optionnels :

  • brand;
  • category;
  • price;
  • description;
  • photo;
  • url;
  • review;
  • listing;
  • identifier (type (model, mpn, upc, isbn, issn, ean, jan, sn, vin, sku), value).

III-K. hRecipe

 
Sélectionnez
<div class="hrecipe">
<h3 class="fn">Quick noodles</h3>
  <p class="summary">Noodles are quick and easy, like this example!</p>
  <p class="ingredient hcard"><span class="value">2.5</span><span class="type">kilogram</span>bag of instant noodles.</p>

  <ul class="instructions">
    <li>Put water on to boil,</li>
    <li>Add the powder for the sauce,</li>
    <li>Add the noodles, and stir till ready.</li>

  </ul>
  <p>Enough for <span class="yield">1 adult</span>.</p>
  <p>Preparation time is approximately <span class="duration">5 <abbr title="minutes">mins</abbr></span>.</p>

  <p class="nutrition hcard">Noodles have more than <span class="value">500</span> <span class="type">joules</span> of energy.</p>

</div>

Racine : hRecipe.

Valeurs d'attribut obligatoires :

  • fn ;
  • ingredient (value, type).

Valeurs d'attributs optionnels :

  • yield ;
  • instructions ;
  • duration ;
  • photo ;
  • summary ;
  • author ;
  • published ;
  • nutrition (value, type), tag.

III-L. hResume

Vous pouvez aussi utiliser un générateur hResume plutôt que d'écrire le code à la main.

 
Sélectionnez
<div id="hResume">
  <p class="summary">I have been producing microformatted data for years</p>
  <ul class="vcard">

    <li class="fn">Jane Doe</li>
    <li class="adr">
      <span class="street-address">44 Broadband Street</span>
      <span class="locality">Microland</span>, <span class="region">Internet</span>

      <span class="postal-code">QW11 ER4</span></li>
    <li>Email: <a class="email" href="mailto:jane@doe.org">jane@doe.org</a></li>

    <li>Homepage: <a class="url" href="http://www.yoursitehere.com/">www.yoursitehere.com</a></li>
    <li>Phone: <span class="tel">+44 12345 67890</span></li>

  </ul>
  <ol class="vcalendar">
    <li class="education vevent"><a class="url summary" href="http://example/">Example</a>
    (<abbr class="dtstart" title="2007-02-11">2007</abbr> - <abbr class="dtend" title="2009-03-22">2009</abbr>)</li>

  </ol>
  <ol class="vcalendar">
    <li class="experience vevent"><span class="summary">CEO</span>, <span class="location">Microland</span>,
    <abbr class="dtstart" title="2006-09-01">May 2006</abbr> - <abbr title="2009-05-22">present</abbr></li>

  </ol>
  <ul class="vcard">
    <li><a href="/jdoe/index.php" class="include" title="Jane Doe"></a></li>

    <li class="org">MicroLand</li>
    <li class="title">CEO</li>
  </ul>
  <p>I have skills in
    <a class="skill" rel="tag" href="http://en.wikipedia.org/wiki/HTML">HTML</a> and
    <a class="skill" rel="tag" href="http://en.wikipedia.org/wiki/CSS">CSS</a>.
  </p>

</div>

Racine : hResume.

Valeur d'attribut obligatoire :

  • contact (hCard, adr).

Valeurs d'attributs optionnels :

  • summary ;
  • education (hCard, vEvent) ;
  • experience (hCard, vEvent) ;
  • affiliation (hCard) ;
  • skills ;
  • publications.

III-M. hReview

Vous pouvez aussi utiliser le générateur hReview plutôt que d'écrire le code à la main.

 
Sélectionnez
<div class="hreview">
  <p><span class="rating">5</span> out of 5 stars</p>
  <h4 class="summary">Noodle Hut</h4>

  <span class="reviewer vcard">Reviewer:
    <span class="fn">John Doe</span> - <abbr class="dtreviewed" title="20070418T2300-0700">April 18, 2007</abbr>

  </span>
  <p class="description item vcard">
    <span class="fn org">Noodles Hut</span> is one of the best little places out there!
  </p>
  <ul>

    <li>Visit date: April 2007</li>
    <li>Food eaten: Instant noodles</li>
  </ul>
</div>

Racine : hReview.

Valeur d'attribut obligatoire :

  • item (type (product, business, event, person, place, website, url), hCard / hCalendar).

Valeurs d'attributs optionnels :

  • reviewer (hCard) ;
  • version ;
  • summary ;
  • dtreviewed ;
  • rating ;
  • description ;
  • tags ;
  • permalink ;
  • license.

III-N. Rel

 
Sélectionnez
<a rel="license" href="http://creativecommons.org/licenses/by/2.0/">Some rights reserved.</a>
<a rel="nofollow" href="http://www.w3.org/">World Wide Web consortium</a>

Valeurs d'attributs :

  • license ;
  • nofollow ;
  • tag ;
  • directory ;
  • enclosure ;
  • home ;
  • payment.

III-O. Robot Exclusion Profile

 
Sélectionnez
<head profile="http://example.org/xmdp/robots-profile#">
</head>
...
<p><img src="exclusive.png" class="robots-noarchive" alt="Exclusive image" /></p>

Valeurs d'attributs :

  • robots-nofollow ;
  • robots-follow ;
  • robots-noindex ;
  • robots-index ;
  • robots-noanchortext ;
  • robots-anchortext ;
  • robots-noarchive ;
  • robots-archive.

III-P. VoteLinks

 
Sélectionnez
<a rev="vote-for" href="http://www.yoursitehere.com/vote.php?id=yes" title="Vote yes!">Vote Yes!</a>
<a rev="vote-abstain" href="http://www.yoursitehere.com/vote.php?id=maybe" title="Vote maybe!">Vote Maybe!</a>

<a rev="vote-against" href="http://www.yoursitehere.com/vote.php?id=no" title="Vote no!">Vote No!</a>

Valeurs d'attributs :

  • vote-for ;
  • vote-abstain ;
  • vote-against.

III-Q. XFN

Vous pouvez aussi utiliser le générateur XFN plutôt que d'écrire le code à la main.

 
Sélectionnez
<a href="http://www.yoursitehere.com" rel="me">My Site!</a>

Valeurs d'attributs :

  • Friendship (contact, acquaintance, friend) ;
  • Physical (met) ;
  • Professional (co-worker, colleague) ;
  • Geographical (co-resident, neighbor) ;
  • Family (child, parent, sibling, spouse, kin) ;
  • Romantic (muse, crush, date, sweetheart) ;
  • Identity (me).

III-R. xFolk

 
Sélectionnez
<ul>
  <li>
    <ul class="xfolkentry">
      <li><a class="taggedlink" href="http://www.google.com" title="Google">Google</a></li>

      <li class="description">The home page of the world's biggest search engine</li>
      <li class="meta">Tags:
        <a rel="tag" href="http://del.icio.us/tag/google">google</a>

        <a rel="tag" href="http://del.icio.us/tag/search">search</a>
      </li>
    </ul>
  </li>

</ul>

Racine : xFolkEntry.

Valeurs d'attributs obligatoires :

  • description ;
  • taggedlink ;
  • title.

Valeur d'attribut optionnel :

  • meta (tag).

III-S. XMDP

Racine : profile.

III-T. XOXO

 
Sélectionnez
<ol class="xoxo">

  <li>Subject 1
    <ol>
      <li>item a</li>
      <li>item b</li>
    </ol>

  </li>
  <li>Subject 2
    <ol>
      <li>item a</li>
      <li>item b</li>

    </ol>
  </li>
</ol>

Racine : XOXO

IV. Conclusion

Beaucoup de microformats existent déjà et la communauté cherche toujours des manières d'utiliser des balises existantes pour valoriser davantage l'information contenue dans vos pages Web.

Ils ne présentent pas seulement un intérêt pour les moteurs de recherche et les réseaux sociaux, mais également pour les utilisateurs qui naviguent sur votre site.

V. Remerciements

Merci à Julien Plu pour la mise en page, ainsi qu'à Thibaut Cuvelier, Claude Leloup et djibril pour leur relecture !

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2011-2016 Sébastien Poudat. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.