Structurer une page en HTML5 avec les μdonnées et des μformats

Cet article est en fait plus destiné à mes clients et a pour objet d’expliquer l’intérêt du balisage HTML5 pour structurer le contenu et de l’insertion de microdonnées et de microformats pour lui donner du sens.

Je le publie ici plutôt que sur mon autre blog pour la création de sites Web en Normandie pour 2 raisons :

  1. si mes prospects en cours ne sont pas sensibles à mes explications sur les technologies et ils ont raison : le projet de création d’un site Web n’est pas affaire de technique, mais de communication, certains, veulent néanmoins en comprendre les avantages pour le référencement,
  2. ici c’est un blog où je partage des réflexions sur le code et le référencement. Des lecteurs concernés par la sémantique du code et celui du contenu seront peut-être intéressés...
• • •

HTML5, les microformats et les microdonnées

HTML (ou XHTML), compose les pages Web selon les principes des langages à balises. Ces différentes balises ordonnées dans une hiérarchie servent à décrire le rôle de chaque section ou l’importance de certaines portions de contenu (les balises d’en-têtes, les balises d’emphase, les listes, ... ).
« (...) servent à décrire le rôle de chaque section (...) » ?
Oui, mais pas de manière efficace.

Le problème avec HTML4

Si le robot de Google est capable de déduire pour la nécessité de son analyse les sections répétées d’un site Web malgré la profusion de <div>, c’est parce qu’il n’a pas d’autre possibilité : HTML4 ne permet pas en effet de lui faire comprendre la structure d’une page et, par là même, lui dire qu’elles sont les zones à privilégier pour son indexation.
Explications :
considérez ce balisage...

balisage html4

Classique et dépassé. Voici ce que voient les navigateurs :

balisage html4 : ce que les browsers voient

Et, comme les spiders (les robots des moteurs de recherche) sont d’autres navigateurs, il faut aussi les aider à comprendre de quoi nos pages sont composées.
C’est là tout l’intérêt d’

HTML5 pour structurer le contenu

Reprenons notre exemple, mais cette fois-ci par un balisage en HTML5...
Le même contenu balisé en HTML5 donne du sens aux différents blocs de la page :

balisage html5

Les différentes sections de la page sont clairement identifiables. C’est ce qu’on appelle « le balisage sémantique ».
Mais on n’en a pas fini de la sémantique avec HTML5, car voilà que surgissent du diable Vauvert, des formats pour donner du sens, cette fois-ci, aux données de la page.
C’est

Le formatage sémantique des données*

Le balisage d'un document HTML5 ne décrit donc pas le contenu de la page Web, mais détaille sa structure et désigne le rôle de chaque section. Pour les données il existe déjà déjà un formatage — utilisé quel que soit le langage (HTML, XHTML) : c’est le microformat**.

Et, grâce à HTML5, cette sémantisation du contenu va plus loin avec l’arrivée des microdonnées (ou « microdata »).
À quoi servent-ils ? Et quelle est la différence entre microformats et microdonnées ?

* Ils existent depuis un moment déjà et d’aucuns ont annoncé qu’ils constitueraient pour le référencement une révolution. Celle-ci tarde. Le grand jour n’est en effet pas arrivé, les webmestres et référenceurs n’ayant pas su/voulu les intégrer dans le code.

** Il en existe un autre, RDFa. Compliqué à mettre en œuvre et disposant d’un vocabulaire trop libre, RDFa n’offre aucun intérêt pour le référencement.

  • les microformats : c’est le plus ancien et le plus simple des 3 formats. Les microformats dans le code HTML fournissent des données de mise en forme et sémantiques supplémentaires qui peuvent être utilisées par ces applications. Ces applications peuvent être des logiciels de bureau comme les clients-courriels ou des logiciels d'agenda, mais, pas seulement. Les applications Web que sont les robots (crawlers) des moteurs de recherche en charge d’indexer les sources de données les relèvent pour enrichir les résultats...
    Quelques marqueurs :
    • hcard & vcard pour représenter les personnes, sociétés, organisations et lieux
    • hatom pour la syndication de contenu
    • hresume pour les CV
    • hreview pour les votes
    • rel="directory" pour les pages de liens (annuaires)
    • rel="enclosure" pour les fichiers à télécharger
    • rel="home" pour le lien vers la home page
    • etc, etc.
    Il y en a bien d’autres encore. Illustration par l’exemple :
    Ce balisage je l’utilise ici même pour le système des votes pour les sites HTML5 figurant dans la vitrine. C’est en PHP que la fonction que j’emploie a été développée (pour l’Add-On « Sgt Semantic Pepper's star rating ») et sur lequel j’applique le balisage complexe d’HTML5 de <meter> ainsi que les microformats requis : marquage microformats Ce code va permettre, après son extraction, d’afficher dans les SERP (et dans certaines conditions) ce snippet : google snippet microformats
  • les microdonnées : c’est une initiative des promoteurs d’HTML5 (WHATWG) qui a fait naître et normaliser ce format en contre-proposition à RDFa. Dans le même esprit que les microformats, dont ils sont une extension spécifique à HTML5, ils apportent une information sémantique sur les données des pages Web. Un exemple : marquage microdonnées Ce qui donne pour ma page « Contactez-moi pour vos projets Web » , une fois extraits : google snippet microdonnées [voir la page : extraction des microdonnées et affichage du snippet]

Ce qu’il faut retenir :

  1. les microformats et les microdonnées servent à structurer les données d’une page Web.
  2. les différences entre ces 2 formats se situent dans la syntaxe, dans leur destination, et dans le vocabulaire.
  3. pour la compréhension des contenus par les moteurs de recherche, HTML5 et ces formats constituent un avantage sans pareil pour l’optimisation du référencement naturel.

Voici comment est composée une page balisée en HTML5 et marquée de microformats et de microdonnées :

html5 balisage sémantique

[Cette copie d’écran provient de la page Garennes-sur-Eure du blog de Normandie-Web]

C’est qui qui conclut ?

ÀMHA, pour le référencement naturel, HTML5, les microformats, ainsi que les métadonnées sont du pain béni : une hostie d’HTML5 pour bien structurer son contenu ; une autre pour baliser les informations sémantiques et la messe aux spiders est dite. Pour moi, c’est une réelle avancée pour la compréhension des contenus par les moteurs de recherche. Mais quand même... quand même...
Ça doit faire 3 ou 4 ans qu’on entend parler des microformats et ce n’est encore que très récemment qu’on les voit arriver dans les SERP par l’affichage des Rich Snippets...
Alors ?

Si les webmestres, développeurs, intégrateurs et référenceurs tardent à adopter HTML5 et le marquage sémantique du contenu sous le prétexte fallacieux de ne pas vouloir devenir des « esclaves du code », le référencement « à la Papa » a encore de beaux jours devant lui.

Quelques pages d’intérêts

Si vous avez publié un article sur le sujet, indiquez-le dans un commentaire. Il sera ajouté à la liste.




Commentaires :

Renardudezert||#1
Renardudezert
Salut Philippe,

Je tombe sur cet article suite à ton tweet, et sans exagérer, qu'est ce que c'est complet et fort bien argumenté. Sans parler du plaisir de lecture qui est vraiment spécifique à ton blog !!

Je n'ouvre pas de nouveau le débat : "le référenceur doit il connaitre le code" (non Julien, ne lis pas ce commentaire), mais comme toi, je pense que le fait d'utiliser HTML5 sur de nouvelles création (il faudrait pouvoir mesurer l'impact sur une refonte d'un site déjà bien positionné, mais c'est un risque certain à prendre) ne peut être que bénéfique.

Au passage, merci d’éclaircir microdonnées et microformats puisque l'ami GG est assez "Google" sur ces définitions. Disons qu'il donne la marche a suivre pour les mettre en place et estime cette démarche comme tout à fait suffisante.
Cyril||#2
Cyril
Bonjour
Tu commences ton article avec une belle phrase : "l’intérêt du balisage HTML5 pour structurer le contenu et de l’insertion de microdonnées et de microformats pour lui donner du sens" ; mais ensuite on croit lire que le web sémantique c'est fait pour le ref. Mais vu que ca à l'air d'être ton métier soit. Rien de grave.

Mais de là à dire que RDFa on s'en fout, ça ne sert pas pour le ref...
Juste 3 points :
1- Sans parler référencement, RDFa est surement le plus puissant des langages sémantiques puisqu'il utilise toutes les ontologies de RDF. Tu sémantises TOUT. (microformat et microdata ont des champs fermés, quoique la spec de microdata soit en draft, donc bémol)
2- Microformat est quand même un peu dépassé, s'appuyant sur la balise class, ca ressemble un peu à un hack non ? (pas de troll, hein juste un ressenti)
3- Au sujet de RDFa / référencement, Google supporte RDFa : http://www.google.com/support/webmasters/bin/answer.py?answer=146898

Après, je veux bien croire que tes clients, envers qui tu destines cet article, aient plus de difficultés à utiliser RDFa, qui est plus verbeux que les autres.
Philippe||#3
Philippe
Merci mon Renard pour ton com(pli)mentaire.

@ Cyril
RDFa est très très puissant je te l’accorde, mais trop lourd, trop hermétique pour certains et question SEO, Google qui l’a pourtant promu, semble vouloir l’abandonner au profit des microdata qui pourraient être normalisés par l’arrivée d’HTML5.
De toutes façons ce ne sont que des balbutiements… il faut attendre encore que le bébé sache parler… 3 ? 4 ans ?
Nadège||#4
Nadège
Article très intéressant et bien documenté.
Merci beaucoup pour les explications sur HTML5.
Le Juge SEO||#5
Le Juge SEO
@RDD
un SEO doit connaitre le code, je dis juste qu'il n'a pas bsoin d'etre un codeur. (On va pas recommencer! En ce moment c'est Laurent qui est enervé pas moi!)

@Philippe
Superbe article, je suis en train de booster ma boite pour qu'on lance une version d'essai HTML5 sur le CMS histoire de voir, mais si les microdata et les microformats ont ce genre de résultats dans les snippets... je sens que je vais pousser un peu plus fort!
Ce soir, c'est pommade pour tout le monde||#6
Ce soir, c'est pommade pour tout le monde
Bonsoir,
encore une fois Philippe, tu nous sers un excellent billet : je t'ai déjà classé grand MFA (Maître Francophone AchtéMl5), tu es MA référence HTML5 et es d'une grande pédagogie : chapeau bas monsieur.

En revanche en analysant ton blog Normandie Web, au point 1 j'ai trouvé... ça :

header > hgroup h3 {
text-indent:-9999px;
}

/*c'est mal*/

Est-ce un microformat de ton cru ?
Google saura-t-il l'interpréter ?
Tu peux au moins te vanter d'être le premier à avoir inventé le BHH : "Black Hat HTML5" ^^
Philippe||#7
Philippe
@ Julien, l’ami Julien... (pour les lecteurs, Julien est la contraction de « Jus de Liens », c’est un spécialiste du BL).
Je prends 5% en royautés quand vous aurez booster le référencement de vos clients car tout cela, c’est forcément grâce à moi finalement : personnes n’avait entendu parler d’HTML5 avant que j’ouvre ce blog.
Même pas le W3C ni le WHATWG ! C’est dingue non ?

Sylvain ? C’est toi le commentateur masqué ?
Comment ça ? Faire du BH HTML5 serait mal ?
Pas du tout Monsieur...
Je cite Mr Google :
« Sauf dans certains cas particuliers, le contenu masqué n'est pas affiché dans les pages Google. Toutefois, il peut parfois être intéressant de fournir des informations plus détaillées aux moteurs de recherche, même si vous ne souhaitez pas que ces informations puissent être visibles sur votre page. »

Et tac !
Sylvain (agence web AxeNet)||#8
Sylvain (agence web AxeNet)
Non, mon cher Philippe, je n'étais pas le commentateur masqué du jour.
Moi, je suis juste celui qui propose que la prochaine convention du W3C se tienne à Garennes sur Eure :-)
Nicolas Chevallier||#9
Nicolas Chevallier
Les micro formats seront adopter par les grands acteurs lorsqu'ils seront intégrés dans les résultats de recherche Google France (ils le sont déjà aux US). Personnellement ca fait plusieurs mois (années!) que chaque fiche garage intègre des données hcard et hreview... Pour quel résultat ? Pour l'instant aucun.
Christophe||#10
Christophe
Bonsoir Philippe,
c'est moi l'auteur du comm masqué qui en fait n'en était pas un, explication : suite à une erreur de saisie de captcha pour soumettre mon comm, j'ai pris un refoul.

J'ai juste omis de remettre mon pseudo à la seconde soumission.

Ce serait donc bien de stocker les infos saisies en cas d'erreur pour éviter de se retaper la saisie(HTML5 peut le faire, non ?).

Sinon, point de pic dans mon précédent com, juste une amicale boutade, je te considére comme mon Gourou HTML5 fr-FR.

Bon wk
Philippe||#11
Philippe
Je me suis fourvoyé et c’est l’ami Sylvain qui en profité...

dans tous les cas merci pour tes commentaires Christophe.

Sur la fonction commentaires je dois l’avouer : elle n’est pas complètement au point... je dois faire un gros boulot côté requêtes dans la base de données pour intégrer de nouvelles fonctionnalités mais je n’ai pas beaucoup de temps, et, pour être honnête, un peu la flemme.
truffo||#12
truffo
Belle démonstration.

Pour les micro-données et micro-format, c'est difficile de le mettre en place quand on n'a pas d'outil de vérification et que ne sait pas qui s'en sert.
Cyril||#13
Cyril
@truffo : En tout cas pour RDFa, tu as pas mal de parsers / outils à ta disposition : http://rdfa.info/wiki/Consume
Blog Référencement et Seo||#14
Blog Référencement et Seo
Encore une fois, un très bon article, merci à toi!
Va falloir s'y mettre un de ces jours parce que ça à l'air bien alléchant...
pierrot||#15
pierrot
juste mes 2cts : c'est bien, c'est pratique mais...
IE7 & IE8 ne comprennent pas tout ça ( pour preuve, ta page contact est "horrible" avec internet explorer )

Donc : oui , l'avenir c'est html5, et les microformats, mais ce n'est pas encore pour demain ;)
Philippe||#16
Philippe
Pierrot, tu as très bien fait d’avoir voulu rester anonyme parce que tu dis de grosses bêtises :
IE7 & IE8 comprennent très bien « tout ça » Tout ça étant HTML5, les microdonnées et les microformats...
Il ne faut pas confondre CSS3 & HTML5 voyons !

Ma page contact s’appuie sur des propriétés CSS3 qu’IE ne comprend pas encore (il faudra attendre IE9). Je n’ai rien fait pour la rendre « compatible » avec IE (manquerait plus que ça !)... mais ça aurait pu être possible.
providenz||#17
providenz
Pour les moins codeurs d'entre nous, le hcardcreator et hcalendar sont des aides précieuses.
L'extension operator de firefox détecte les mf présents sur chaque page et permet de récupérer tes coordonnées au format vcard ou des évènements pour mes ajouter à mon calendrier.

Post très clair en tout cas.
Philippe||#18
Philippe
Eh eh joli site, providenz,
et contenu bien pensé.
Ça manque juste d’un peu d’HTML5 (taquinerie). ;-)
Houston web design||#19
Houston web design
"jus de lien" LOL ...Un de ces 4 je vais arriver a Garennes sur Eure dans mon Dodge Ram 3500 et je vais vous montrer a tous! ;)
Valérie||#20
Valérie
Ca c'est du pédagogique. La preuve c'est que j'ai tout compris. Pour comprendre HTML5 c'est le meilleur blog que j'ai pu trouver.

Alors merci beaucoup pour toutes ces explications
Martial||#21
Martial
Bien vu ! Avec l'annonce de l'adoption par les 3 moteurs de recherche (Google, Bing et Yahoo) de se regrouper pour définir le nouveau standard schema.org, RDFa est effectivement abandonné. Vous aviez bien raison.

Sauf que c'est le bordel : je ne comprends pas de quoi les moteurs se mêlent. Le code c'est l'affaire du W3C ou des moteurs de recherches ?
Philippe||#22
Philippe
Du W3C bien évidement. Que les moteurs de recherche s’entendent sur une syntaxe commune pour structurer les données afin qu’elles soient traitées plus efficacement est une très bonne chose, non ?
vince||#23
vince
Oui c'est a priori une bonne chose, Philippe, mais vu que c'est Google qui lead, ce n'est pas si bon que ça non plus...
Philippe||#24
Philippe
Bah ! Quelle importance ? Google était à la barre avec les rich snippets, il a réussi à convaincre les 2 autres moteurs de recherche de créer un standard commun c’est tout de même une sacrée avancée pour le Web non ?
Un referenceur||#25
Un referenceur
@Philippe très bon article. Je ne connaissais pas ton blog il est désormais dans mes favoris.
Jice||#26
Jice
Alors plusieurs points :
1/ Les Rich snippets ... tu les vois sur les pages françaises pour le moment? Il faut vraiment que ton site soit gros, et possède beaucoup de pages "sémantisés" pour que google se donne la peine de l'indexer me semble-t-il. Tu as des sites qui apparaissent déjà avec rich snippets?

2/ Le web sémantique est attendu par tous, mais ne viendra que lorsque les chercheurs arriveront à se mettre d'accord.

3/ Tu as oublié de parler du XML qui est en quelque sorte l’ancêtre de tout ça.

4/ Un bon CMS comme drupal qui intègre plus facilement du RDFa ça aidera beaucoup pour faire passer le sémantique dans le grand public.
Philippe||#27
Philippe
EDIT Jice, ce n’est pas en regardant dans le rétroviseur qu’on peut voir l’avenir.

Je corrige mon propos un peu sec. :
Les précédents formats du Web sémantique n’ont véritablement pas été adoptés d’où l’initiative des 3 géants du Web pour imposer un vocabulaire qui deviendrait un standard.
Ce n’est pas leur boulot que la standardisation du code, certes, mais il faut dire qu’avec les différents formats (microformats, microdonnées, RDFa) ça devenait un sacré bordel, non ?
Je vois que l’initiative (schema.org) de 3 sociétés commerciales ne plaît pas aux acteurs historiques du web sémantique (voir cette discussion) et je comprends qu’elle peut agacer les sociétés savantes qui se sont tant impliquées dans l’évangélisation du web sémantique.
S’il faut en passer par là pour que les webmestres s’y collent alors, enfin, on aura un Web qui tiendra debout.


@un référenceur : merci, mais il est arrêté.
Thomas||#28
Thomas
Ouais. C'est pas demain la veille qu'on verra les microformats et les microdonnées arriver dans les pages Web. C'est trop compliqué pour le webmestre moyen.
Philippe||#29
Philippe
Pas faux. Et ce n’est pas le moindre problème. C’est tout le Web qui fout le camp :

Le W3C qui ne communique pas ou mal.... les moteurs de recherche qui s’entendent pour imposer leur format (schema.org)... les webmestres en herbe qui codent avec leurs pieds... les référenceurs qui polluent le Web de pages inutiles et de contenus pourris... les millions d’internautes qui taggent n’importe comment (voir les tags des vidéos de DailyMotion par exemple)... bref, c’est le foutoir.

Alors le Web sémantique une utopie ? Oui.
Damien||#30
Damien
@ Jice :
Les richs snippets ne sont pas affichés pour tous les sites qui ont adopté ces balises.
Même s'ils se répandent c'est encore manuellement que Google va faire que les richs snippets d'un site vont s'afficher dans les résultats de son index.
Zac Efron||#31
Zac Efron
C'est l'un des plus complet tutoriels que j'ai vu ; C'est super sympas de votre part de donner des connaissances a ceux qui essaye de s’intéresser a l'informatique !
http://jeuxenligne.net/jeux-de-stars/zac-efron

Les commentaires pour ce billet sont fermés