Les microformats

Ou plutôt les Micro données, car si le principe de base est commun, la mise en oeuvre diffère.

Ces bougres de marketeux

Je suis parfois dépité quand certains marketeux me rétorquent que les microformats c’est fait pour indexer plus de contenu auprès du moteur de Google.
C’est un sacré raccourci. C’est tellement réducteur.
Tout est bon pour la profitabilité.

Usage galvaudé

C’est comme de choisir une balise H1 parce que visuellement « le texte est grand plus que les autres ». Le constructeurs de navigateurs n’auraient jamais du attribuer des tailles différentes au <h*> car ca brouille les pistes : la taille à l’écran est totalement anecdotique. ce qui compte c’est que H1 est une balise qui une signification précise : titre de niveau 1 d’une page.

Voici une belle transition pour enfin parler de …

Web sémantique

Personnellement je pense à la philosophie derrière les microformat
plutôt qu’à la seule profitabilité SEO.
Arrêtons 5 secondes tout rapporter à l’argent et revenons à ce que les microformats
ont de plus essentiel : ils appartiennent au mouvement du web sémantique.

Ca sert à décrire des données dans des pages web.
AlsaCreation s’est fendu d’un très bon article à ce propos

Par exemple : je consulte une recette de cuisine sur un site…de cuisine.
Il ya une flopée d’indicateurs visuels à propos de cette recette :

  • 1 icône répétable pour la note attribuée
  • 1 icône répétable pour le temps de préparation
  • 1 icône pour la difficulté
  • 1 icône pour le coût de reviens des ingrédient
  • 1 icône qui indique la catégorie (entrée, plat, entremet, dessert, apero)

Toutes ces informations sont très utiles en soi, jusque-la on est d’accord.

Maintenant parlons….

Exploitation des données

Imaginons qu’un ami me demande de lui envoyer la recette par SMS.
La tout de suite ça se corse :
je ne me vois pas lui envoyer le lien de la page web par SMS car :

  1. la plupart du temps les recettes s »affichent mal sur mobile
  2. mon ami a pas forcément internet
  3. mon ami veut uniquement les infos utiles de la recette en 3 ou 4 lignes,
  4. sans la pollution environnante : les pubs, la photo, les commentaire, les liens sociaux

Ce qui est formidable c’est que j’ai une petite application tout simple sur mon smartphone
auquel j’indique l’URL, la catégorie de contenu et en retour il me renvoie les informations utiles en quelques lignes.
Et le tour est joué, ‘jenvoie à mon ami exactement ce qu’il souhaite, en quelques secondes.

Mais cette application, comment fait-elle donc ?

C’est la qu’interviennent en fanfare les Microformats.
Ils ont pour but de donner du sens au contenu web.

Par exemple si dans la page web de recette j’ai du HTML tel que :
<div ud= »notation » class= »5-str »></div>
En dehors du seul rendu visuel cette information n’est pas du tout exploitable.
Il s’agit d’un bloc de contenu (div) point barre.

1) Ce bloc a un identifiant « notation » qui sert seulement de repère au webmaster du site
et pour styler ce type de blog.
Certes pour ma part je rêverais qu’il existe une balise <notation> mais ca existe pas.
Je parlerai dans un autre articles de Web Components qui répondent à ce sujet
Mais il aurait très bien pu le nommer tartampion à sa guise ca marchait tout autant.
Mais ce n’est pas normé, donc ce n’est pas une information exploitable.

2) Ce bloc est stylé par une classe CSS nommée « 5-str » qui a été écrite par le webmaster du site et qui permet d’afficher 5 étoiles à l’intérieur. En creusant un peu on présume que ca signifie  » 5 stars » donc une notation allant de 0 à 5 étoiles.

Bref tout cela repose sur des suppositions, des écrites non normalisées, à l’initiative seule du webmaster et de ses repères lexicaux, rien de bien tangible, donc rien d’exploitation de manière claire et propre.

En quoi c’est pas exploitable ?

En l’état seul l’oeil humain est capable de comprendre de quoi il s’agit puis qu’il voit le résultat à l’écran :
5 étoiles sont affichées dans un bloc juste à côté de l’image de la recette.
Pour un humain c’est évident, son cerveau fait le rapprochement entre l’image de l’étoile
et sa signification.
Une machine elle a besoin que les informations soient typées.
Il a besoin de reconnaitre les éléments utiles. Pour cela chaque éléments dit utile dans la page web doit être déclaré comme étant utile.

Le bloc de recette entier doit être décrit en microformats afin de s’auto décrire auprès du moteur qui le consulte :

  • ce bloc c’est la notation, sur une intervale de 0 à 5 points
  • ce bloc c’est le temps de préparation qui se mesure en minutes
  • ce blog c’est la difficulté de réalisation
  • ce bloc c’est le coût de reviens des ingrédients
  • ce bloc précise la catégorie de la recette

Et ca se décrit avec quelle norme ?

Un site référence une véritable taxonomie du monde du vivant: www.schema.org.
Dans notre cas en l’occurence :

<div class= »recette » itemscope itemtype= »http://schema.org/Recipe »&gt;
<div class= »nom-recette » itemprop= »name »>Poulet basquaise</div>

   <div class= »notation 5-str » itemprop= »aggregateRating » data-schema-label= »note globale »>5</div>
   <div class= »photo » itemprop= »image » data-schema-label= »photo du plat »><img src= »http://recettes.com/mg/photo-plat.png &raquo; /></div> 
   <div class= »crawler temps-prepa » itemprop= »prepTime » data-schema-label= »Temps de préparation »>P0DT0H30M0S</div>
<div class= »human temps-prepa »>30mn</div>
<div class= »contenu » itemprop= »recipeInstructions » data-schema-label= »instructions »>
1. découpez le poulet
2. coupez les poivrons en fones lamelles

</div>

</div>

Pour la petite info :

  1. la balise de type prepTime ne sera pas visible à l’écran : elle n’existe que pour le parser
    Vous l’aurez certainement déviné à cause de sa valeur ISO 8601 inintelligible.
  2. On ajoutera une balise purement visuelle sans itemprop destinée à l’internaute avec une valeur de temps de préparation lisible.
  3. Les propriétés MicroFormats sont des marqueurs écrits en anglais. Il n’existe pas de dictionnaire de traduction automatique vers une langue donnée.
    On pourra toutefois ruser sur les traductions en exploitant les attributs « data- » qui sont des attributs non standard HTML, on est libre d’y stocker la valeur qu’on veut.
    Ca commence toujours par data-<le nom que je veux>=<valeur que je veux>
    Bien sur il faut que le crawler soit configuré pour tenir compte des balises non-normées data-schema-label (nommé ici selon ma préférence)

Ainsi l’application de mon smartphone est capable de repérer l’objet de type Recipe
dans tout le code HTML de la page. Il ne lui reste plus qu’à envoyer ces informations par SMS à mon amie dans un simple formalisme texte, avec éventuellement des retours à la ligne, pour faciliter la lecture.

Et bref ca donne un SMS de la sorte (sans les data-schema-label)

A : jérome Dupont (0600000000)
Voici la recette du poulet basquaise :
– notation : 5
– prepTime: 30 mn
– instructions :
1. découpez le poulet
2. coupez les poivrons en fines lamelles

Tu m’en diras des nouvelles 🙂
Joris

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s