HTML 5 pour le référencement : c’est fantastique

21/12/2010

Le HTML5 n’est pas encore officiellement lancé, le dernier brouillon validé date du 19 octobre 2010, mais il va sûrement influencer le référencement, d’autant plus que Google communique à ce sujet (il a mis en ligne le site html5 rocks).

Je ne suis pas un spécialiste du HTML, loin d’être un codeur fou, mais je me renseigne tout de même sur certains blogs comme celui de l’excellent Philippe Le Mesle (je vous conseille la lecture de l’article HTML5 va t-il améliorer le référencement ?) ou en lisant quelques ouvrages.

Aujourd’hui c’est le livre de Jeremy Keith : HTML5 pour les web designers chez Eyrolles qui m’a permis d’avoir un aperçu clair et amusant d’HTML5.

Livre sur le HTML5

Photographie du livre HTML5 pour les web designers de Jeremy Keith aux éditions Eyrolles

HTML va permettre de structurer aisément son site grâce aux nouveaux éléments : header, nav, article, section, aside et footer qui sont plutôt transparents. Header pour l’entête que nous appelons plus souvent header entre nous, nav pour la barre de navigation (liens internes), article pour nos articles/billets/news, aside pour le contenu qui n’est pas directement lié à la page : publicité, voire les commentaires et le footer pour le pied de page. A noter que la balise header et footer ne sont pas limiter, on peut les utiliser pour chaque section.
Google savait déjà repérer la structure d’un site, maintenant même Voila pourra le faire.

Remarquez que même si Google pouvait le faire, utiliser HTML5 l’aidera et si vous aidez Google, il vous le rendra. Oui, tant de mansuétude n’est pas gratuit, économisez ses serveurs, vous économiserez un peu les vôtres et vous aurez le droit à une image, euh, à un point supplémentaire dans le grand algo.

Je vous épargne la liste des nouvelles balises, attributs, d’autres les ont présenté mieux que moi, je vais me limiter à ce qu’il me semble intéressant pour nous, pauvres employés en référencement.

Font, big, center sont obsolètes, vous savez maintenant qu’il y a peu de chance que Google les prennent en compte dans son classement. Mais ce qui m’intéresse le plus est l’utilisation de b : cette balise est utilisée pour que le texte soit “stylistiquement décalée de la prose normale sans exprimer une importance supplémentaire“. Mes amis, à vos strong!
De même pour la balise i qui ne sert plus qu’à rapporter des paroles, à vos em!

Mettre en exergue une partie du contenu est maintenant facile avec la balise mark, je ne sais pas comment réagiront les moteurs de recherche, mais cela vaut le coup d’essayer. Quand on sait comment Google utilise les microformats, il y a fort à parier que nos amis de Mountain View vont se pencher sur la question.

Enfin, pour ceux que le référencement des images captive, la balise figcaption servira de légende à vos images là où longdesc n’a servi à rien.

Si vous désirez vous familiariser avec HTML5 et que vous aimez lire (les livres), je vous conseille vraiment le livre de Keith que je vais citer juste pour le plaisir :
Imaginons qu’il existe un immonde salaud qui déteste le Web et tous ceux qu’on y croise. Il se fiche probablement de savoir qu’il est incroyablement grossier et stupide d’insérer un fichier audio qui démarre automatiquement. Grâce à l’attribut autoplay, de tels actes de malveillance sont possible […]. Si jamais vous utilisez l’attribut autoplay de cette façon, je devrais vous abattre.“.
Vous l’aurez compris, on apprend en s’amusant.

ps : pas de lien d’affiliation, achetez ce livre où bon vous semble et non je ne connais pas l’auteur de ce livre.

Article rédigé par

a écrit 146 articles sur le Blog SEOlitiquement incorrect.

16 réactions sur “HTML 5 pour le référencement : c’est fantastique”

  1. Header et footer concerne la page mais aussi toutes les sections.

    Et sur Aside ce n’est pas bon : son contenu doit être en rapport avec le contenu principale (celui de la balise article) sinon il faut utiliser section.

  2. Le Juge SEO says:

    Et voila un livre de plus qui devrait prendre de la place dans mes chaussons au dessus de la cheminée…

  3. Gourou du Pink SEO says:

    Philippe, pour aside : “could be considered separate from that content”, mais tu as raison je vais nuancer. Pour header et footer, je vais préciser, autant être parfaitement clair.

    Le Juge, tu as une cheminée à Houston?!

  4. "could be considered separate from that content"

    Voui… mais en relation avec l’article :
    "The <aside> element is for marking up pieces of content that are related to the main content, but don’t fit directly into the main flow."

    Voir cet article tout chaud : Aside sur dev.opera.

  5. Maximilien says:

    Moi qui comptait m’y mettre aussi ! Etre à la pointe est vraiment indispensable, surtout en termes de référencement ! Je vais surement m’acheter ce livre si je le trouves chez Gibert Jeunes, je possède justement quelques bons. ^^

  6. Gourou du Pink SEO says:

    Un grand merci Philippe, dernière MAJ grâce à toi.

    Maximilien, tu me fais penser que j’ai quelques livres à troquer contre des bons… Mais j’ai la flemme de faire la queue.

  7. Yakamo says:

    En Fait aside c’est assez proche de l’encart journalistique …

    Concernant strong b et compagnie c’est déjà le cas depuis HTML 4.1 et si l’italique ou le gras sont juste des éléments visuels il convient d’utiliser le span stylisé via une classe …

  8. Gourou du Pink SEO says:

    Sauf qu’on peut encore lire le contraire pour l’utilisation du gras et de l’italique pour le référencement, au moins la ça sera clair.

  9. John says:

    Il a l’air sympa ce livre, je prend note du titre.
    Le HTML 5 apporte pas mal de nouveauté, il va falloir que je m’y mette.

  10. Starpass.fr says:

    Intéressant, impatient de voir les limites de HTML5 …

  11. I-GED says:

    Mais du coup comment va se mettre en place ces modifs, (car pour le strong en em c’est plus vieux que le html5 ça doit être du xhtml si je ne me trompe) Car IE va encore faire des sienne et donc on va devoir choisir entre ref et ergonomie au déploiement de html5 ?

  12. Gourou du Pink SEO says:

    Oui, mais comme précisé plus haut, on peut encore lire ici ou la que b et strong sont équivalents.

    On verra la réaction des navigateurs, mais à priori ils devraient l’interpréter sans souci.

  13. tonimgs@gmail.com says:

    C’est intéressant cet article merci du partage.

  14. Loiseau2nuit says:

    En même temps, longdesc n’a à ma connaissance, jamais eu pour vocation d’aider au référencement. A l’origine cette balise est un prérequis d’accessibilité (cf les normes WCAG), servant à donner une description complète de l’image pour les navigateur en mode texte et/ou audio.

    Le seul point servant éventuellement le ref étant l’addition de contenu texte qu’elle ne manque pas de provoquer.

  15. Gourou du Pink SEO says:

    Rien ne sert au référencement à la base, nous le détournons pour arriver à nos fins.

  16. Loiseau2nuit says:

    Oui c’est sûr, c’est collatéral mais ca rentre quand même dans le cadre de l’optimisation rédactionnelle.

    D’ailleurs tant qu’on en parle (et pour recentrer un peu sur le sujet) c’est un peu ce qui m’inquiète avec HTML 5, c’est cette volonté de over structurer la page.

    Sans tomber dans le fataliste "SEO is soon dead !" j’ai quand même l’impression que c’est donner à Gg autant de bonnes raisons d’ "oublier" des infos/des liens dans l’équation, qu’il y a de blocs secondaires déclarés et interprétés comme tels pour structurer son contenu (header, aside, nav, footer, etc…)

    Même si c’était déjà plus ou moins le cas en XHTML tel qu’on le pratique aujourd’hui, c’était pas encore entériné et on pouvait encore jouer avec le noms de nos div pour donner un minimum de change.

    Mais là, les optims on-page risquent de se voir drastiquement restreintes aux seules zones de contenu (content), ce que je ne peux m’empêcher de trouver un peu restrictif (en dehors du fait que du coup, on risquerait de s’emmerder un peu quand même :P)

    Enfin cela dit, on est tranquille, la spec’ ne serait pas finalisée avant 2014 d’après les bruits qui courent dans les couloirs du W3C donc bon 😀

Laisser une réponse

Article précédent:

Article suivant: