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 :
- 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,
- 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...
Classique et dépassé. Voici ce que voient les navigateurs :
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 :
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.
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 :
Ce code va permettre, après son extraction, d’afficher dans les SERP (et dans certaines conditions) ce snippet :
- 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 :
Ce qui donne pour ma page « Contactez-moi pour vos projets Web » , une fois extraits :
[voir la page : extraction des microdonnées et affichage du snippet]
Ce qu’il faut retenir :
- les microformats et les microdonnées servent à structurer les données d’une page Web.
- les différences entre ces 2 formats se situent dans la syntaxe, dans leur destination, et dans le vocabulaire.
- 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 :
[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
- Applications des outils sémantiques au référencement et aux moteurs de recherche sur WebmasterHub
- À propos des microformats, chez Google
- Toujours chez Goole, mais, en anglais : About microdata
Si vous avez publié un article sur le sujet, indiquez-le dans un commentaire. Il sera ajouté à la liste.
Commentaires :
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.
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.
@ 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 ?
Merci beaucoup pour les explications sur HTML5.
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!
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" ^^
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 !
Moi, je suis juste celui qui propose que la prochaine convention du W3C se tienne à Garennes sur Eure :-)
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
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.
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.
Va falloir s'y mettre un de ces jours parce que ça à l'air bien alléchant...
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 ;)
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.
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.
et contenu bien pensé.
Ça manque juste d’un peu d’HTML5 (taquinerie). ;-)
Alors merci beaucoup pour toutes ces explications
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 ?
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.
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é.
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.
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.
http://jeuxenligne.net/jeux-de-stars/zac-efron