Niveau : Confirmé

Microformats

Tutoriel par (Traduction Open-source, développeur Web, France - Alsace)
Créé le , mis à jour le (14429 lectures)
Tags : xhtml, sémantique, microformats, rel

Sommaire


Les microformats simples

Éléments de base des microformats, ils répondent généralement à un seul problème à la fois dans l'attribut rel. Comme dit précédemment, on les trouve uniquement dans les balises <a> et <link>. Nous nous intéresserons ici plutôt aux microformats permettant de préciser le sens des liens hypertextes (<a>).

rel-license

Comme son nom l'indique, ce microformat permet d'indiquer la licence relative au travail réalisé. Voici une mise en oeuvre possible :

<a href="http://creativecommons.org/licenses/by-nc/2.0/fr/" rel="license">Mis à disposition sous licence CC 2.0</a>

Quel intérêt d'ajouter cette indication de licence ? Cela semble être futil, mais cela pourrait être d'une utilité certaine ! En effet, bon nombre de moteurs de recherche permettent de modifier les critères de recherche. Un de ces critères est le type de licence sous laquelle les ressources sont mises à disposition. Ils utilisent le microformat rel-license pour identifier les ressources répondant à ce critère…

rel-nofollow

Un microformat destiné, à la base, à lutter contre le spam. En ajoutant à l'attribut rel la valeur nofollow à un lien, vous demandez aux robots envoyés par les moteurs de recherche de ne pas suivre ce lien. Cela permet effectivement de limiter le spam (si tout le monde utilisait ce microformat, cela serait d'autant plus efficace), mais également de gérer plus finement l'accès aux différentes pages de votre blog/site. Un exemple pour éviter que les robots n'accèdent à une page permettant aux utilisateurs de s'identifier et donc ne devant pas forcément être référencée :

<a href="login.php" rel="nofollow">M'identifier</a>
rel-tag

Les tags ou marqueurs ou mots-clés sont utilisés pour mettre en relation différentes ressources ayant un rapport entre elles. Alsacréations ne déroge pas à cette pratique. Par exemple, ce tutoriel est affublé du marqueur sémantique, il est codé ici de la manière suivante :

<a href="http://www.alsacreations.com/search/tag/sémantique">sémantique</a>

Pour le « microformater », il suffit de lui ajouter l'attribut rel dont la valeur sera tag :

<a href="http://www.alsacreations.com/search/tag/sémantique" rel="tag">sémantique</a>

Le marqueur pris en compte grâce à ce code est sémantique, l'espace de nom (namespace) sera défini par http://www.alsacreations.com/search/tag/. Espace de nom, quésaquo ? Voici ce qu'en dit Wikipédia :

Le terme espace de noms (namespace) désigne en informatique un lieu abstrait conçu pour accueillir des ensembles de termes appartenant à un même répertoire,[…]

rel-bookmark

Ce microformat définit un lien vers un point d'entrée clé d'un document complémentaire. Il correspond donc à un permalien, référence d'un élément d'information. Ce que cela peut donner en action :

Tutoriel sur <a href="http://www.alsacreations.com/tuto/lire/538-Construire-un-site-sans-tableaux.html" rel="bookmark">la construction d'un site sans tableaux</a>
XFN

Ceci est le premier microformat développé, c'est également le plus populaire. Son champ d'application : la définition du type de relation entre bloggeurs ou gestionnaires de sites. Comme c'est le plus ancien et le plus populaire, il est également plus abouti.

  1. Dans un premier temps, il faudra ajouter l'attribut rel à vos liens pointant vers la ressource de votre relation dont vous souhaitez indiquer la nature. La valeur de cet attribut précisera donc la nature de vos relations. Exemple :

    <a href="http://www.alsacreations.fr/" rel="friend colleague">La bande d'Alsacréations</a>

    Les valeurs possibles pour l'attribut rel sont les suivantes :

    Référence XFN
    Nature des relations valeurs XFN (explications au survol de la souris)
    Amical (au plus, une valeur) friend | acquaintance | contact
    Physique met
    Professionnel co-worker | colleague
    Géographique(au plus, une valeur) co-resident | neighbor
    Famille (au plus, une valeur) child | parent | sibling | spouse | kin
    Romantique muse | crush | date | sweetheart
    Identité me
  2. Deuxième opération, ajouter le profil XFN dans la balise <head> :

    <head profile="http://gmpg.org/xfn/11">
  3. Dernière chose à faire (mais restant bien entendu facultatif) : apposer sur votre page le bouton indiquant que vous utilisez XFN logo XFN. Le code pour l'insérer comme il se doit :

    <a href="http://gmpg.org/xfn">
     <img src="xfn-btn.gif" alt="Optimisé pour XFN" />
    </a>

    xfn-btn.gif est le chemin vers le bouton.

Tous ces microformats sont définis par des profils (XMDP) que vous pourrez retrouver sur la page des URI de profil du wiki officiel des microformats. Vous pourrez ajouter ces URI dans la balise <head> de la manière suivante (ici pour définir rel-license) :

<head profile="http://microformats.org/profile/rel-license">

Il est à noter, pour tous les microformats possédant une URI de définition, que si vous avez déjà défini un autre profil, vous pourrez ajouter des profils supplémentaires en les séparant par un espace. Le premier profil sera traité en priorité. Ci-dessous un profil déclarant le "vocabulaire" Dublin Core et XFN :

<head profile="http://dublincore.org/documents/2008/08/04/dc-html/ http://gmpg.org/xfn/11">