< Search/Acquisition, Web Analytics/Conversion & Web Social/Relation />

Google nous rappelle que si l'on veut changer les règles du jeu, on doit construire sa réussite sur le risque de l'expérimentation. (Antoine Riboud)

Indentation négative et jumelage des titres H2 / 10 janvier 2010

Lorsqu’un référenceur est mandaté pour des recommandations techniques (et si vous en cherchez des bons, Axe-Net les fait parler), sa grille de lecture dépendra de son expérience et de ses connaissances.

Pour ce qui me concerne, l’accessibilité numérique me colle à la peau depuis ma formation BrailleNet en 2006. A ce titre, j’ai des idées bien précises de la structuration d’une page web, et c’est le titre H2 qui me pousse à écrire aujourd’hui.

Dans mon récent quotidien, trois de mes clients ont réalisé leur site web avec des agences locales et spécialisées. Ces agences font du Web depuis des années, mais pourtant, la qualité du code et de sa structuration fluctue énormément (il m’arrive de trouver de temps à autre plusieurs H1 sur une page, avec la palme de sept titres H1 pour un site web dédié au recrutement).

Concernant le titre H1, il y a également plusieurs écoles : soit un titre H1 par page, soit plusieurs (un dans la têtière, le titre est donc cloné sur toutes les pages, et un pour le titre informationnel de la page).

Mais pour le titre H2, quelle est votre méthode ?

Pour rester sobre, je prendrais l’exemple de mon petit bébé, la boutique de tisane au rooibos ARBADEA. Pour la page d’accueil, que je traite toujours différemment que les pages intérieures au niveau du titre H1, j’ai opté classiquement pour le logo dans la têtière. Pour l’instant, rien de neuf.

Ensuite, et c’est là que les choses diffèrent selon les intégrateurs/référenceurs, j’ai pris le parti de sous-titrer en niveau 2 les segments de texte suivants : l’actualité en provenance du blog, le titre « Qu’est-ce que le rooibos ? », le titre « Nos points de vente », et enfin, le titre « La presse parle de nous » (cf. capture ci-dessous).

arbadea_accueil

Ce qui nous donne quatre titres de niveau 2, chacun étant aussi important dans le chapitrage de mon flux. Je chapitre donc ma page comme telle. Ensuite, pour éviter que les sous-titres « Tous nos rayons », « Découvrir l’infusion rooibos » et « A propos d’Arbadea » (dans le pied de page), ne dépendent du dernier H2 du flux (à savoir le titre « La presse parle de nous ») dans la mesure où je les structure en niveau 3 (ils n’ont pas la même importance), je place un cinquième titre H2 « caché » en CSS mais visible lorsque les styles sont désactivés.

Ce cinquième titre H2 s’intitule « Rubriques principales de la boutique Arbadea » et chapitre ainsi convenablement, à mon sens, les trois titres H3 du super footer.

Pour éviter la propriété « display » et sa valeur « none » (car l’ami Google n’aime pas qu’on lui cache des choses, j’en ai fais les frais sur un de mes sites personnels), j’opte pour un positionnement absolu avec une indentation négative de -10000 pixels, ce qui permet d’associer sereinement mon « référencement accessible ».

Cette méthode me permet de contourner une piste graphique validée, difficilement « structurable » en niveaux de titre.

J’ai d’ailleurs suivi la même méthode pour chapitrer la sidebar du blog epokhe avec un titre de niveau H2 intitulé « Menu secondaire et archives ».

Et les pages intérieures ?

Un autre principe me tenaille au sujet des pages intérieures. Si j’opte pour un titre H1 dans le contenu informationnel (titre de page, titre de billet pour un blog, etc. – la têtière devient alors une simple division DIV), alors l’implémentation d’un premier titre H2 m’oblige, au minimum, à le jumeler.

La balise H2 sous-titre sémantiquement un niveau parent, le H1. Or, si un article, un billet, un contenu informationnel, détaille un titre H2, cela signifie qu’il chapitre une partie. Or, à mon sens, et j’ose penser que Franck Letrouvé me rejoigne sur ce sujet, si je propose une partie (une première partie qui plus est), c’est qu’intellectuellement, une autre partie la suit, la complète …

C’est un peu le schéma de la thèse et de l’antithèse. D’où ma nécessité de TOUJOURS jumeler deux balises de titres H2 dans un corps informationnel si j’envisage un chapitrage de contenu. Seuls les segments de texte de ces balises diffèrent en fonction des paragraphes et contextes qu’ils chapitrent (évidemment).

Si quelqu’un a d’autres pistes de travail (qui dépendent d’ailleurs souvent du contexte, à l’instar du renseignement des attributs ALT des images), je serais curieux d’en savoir davantage.

N’hésitez pas à partager votre réflexion et merci d’avance !

14 commentaires

  1. Très bon découpage de ta page d’accueil, qui est a la fois structurée, optimisée et sémantique.

    Mon seul commentaire, est qu’une vérification manuelle de la part de Google devrait classer display:none et position:absolute (-10000px) de la même manière : c’est à dire en texte caché. Si l’une déclenche une pénalité, l’autre devrait aussi le faire.

    La raison pour laquelle tu le caches est valide, donc tout devrait être OK, sauf si tu tombes sur employé qui veut faire du zèle et qui trouve que tu as un peu trop optimisé cette balise cachée.

    Un titre un peu plus « neutre » serait peut-être moins risqué … mais je suis super parano donc ignore ce que je dis ;)

    Commentaire par Léo, Blog Propulsr — 11 janvier 2010 @ 14:37

  2. Mais la différence entre la technique « display none » et celle de l’indentation négative, c’est que la première ne sera pas lue par certaines aides techniques, contrairement à la seconde. Si cela est du spam, je change de métier :-) . Merci pour ta contribution.

    Commentaire par aldbriand — 11 janvier 2010 @ 17:04

  3. Je me permets un commentaire ou plutôt une question : quel est le but de « masqué » un H2 ? Utiliser cette méthode sur un h1 parce que celui ci est remplacé par un logo dans un header, je comprends, mais un h2. D’autant plus que sur le site pris en exemple tout est structuré et optimisé.

    D’autre part, concernant le H1 (et l’autre article du blog que j’ai lu) j’ai un raisonnement similaire au tien sur le principe : un h1 par page. Simplement, son positionnement dépend selon moi du type de site : un site complet devrait (selon moi) avoir son H1 dans le header, par contre pour un blog, celui ci devrait apparaitre dans le titre du billet.

    Commentaire par Willy — 12 janvier 2010 @ 0:14

  4. Bonjour Willy,
    La raison de placer un H2 « masqué », c’est que graphiquement, la piste graphique a été validé sans, et qu’il n’est donc pas implémentable « visuellement » (d’ailleurs, c’est souvent que les « super footers » ne soient pas titrés, du coup, j’opère ainsi). Aussi, pour éviter que les 3 titres H3 du footer se retrouvent dans le flux HTML après le dernier H2 relatif à la presse, je chapitre le pied de page par cette technique.
    J’espère avoir répondu à ta question.

    Commentaire par aldbriand — 12 janvier 2010 @ 9:27

  5. Bonjour Arnaud,
    déjà je vais te retourner tes compliments pour ton site que je découvre et qui me semble bourré de choses intéressantes concernant la SEO.
    Ensuite, oui tu réponds à ma question. Si comme je le disais, j’ai le même fonctionnement global en terme de SEO que le tien, je dois bien avouer que le flux HTML m’était passé au dessus de la tête pour je ne sais qu’elle raison tellement cela semble logique en fait qu’il faille séparer les H3 des H2 précédents puisque ceux-ci n’ont rien à voir.
    Merci de m’avoir éclairer sur le sujet.

    Commentaire par Willy — 12 janvier 2010 @ 9:48

  6. Attention, j’ai déjà été sommé par Quality Rate rater Google de supprimer le texte caché du H1… même si celui-ci était strictement identique à celui de l’image utilisée en fond.

    Commentaire par MagicYoyo — 12 janvier 2010 @ 9:58

  7. @Willy > Merci.
    @MagicYoyo > OK. J’en tiendrais compte, mais sans doute que certains Quality Raters devraient suivre des formations en accessibilité pour comprendre la raison qui pousse les intégrateurs à opérer ainsi, non ? Et, puis, ton texte caché, il était pas un peu « bourrin » :-) , je taquine ???!!!

    Commentaire par aldbriand — 12 janvier 2010 @ 10:04

  8. @aldbriand : oui, oui ce n’est pas du spam, sauf si trop optimisé. Un h2 disant simplement « rubrique du site » est moins risqué que celui utilisé qui contient plusieurs mots-clés (cf. ton commentaire à Magic Yoyo :) ).

    Re le display:none et indent négatif lu par les logiciels de synthèses vocale etc… , oui d’accord.

    Par contre attention au duplicate content si ce site est a toi et si tu testes pas le filtre Google ou le rel canonical (supremacypower.com/2010/01/indentation-negative-et-jumelage-des-titres-h2/)

    Commentaire par Léo, Blog Propulsr — 12 janvier 2010 @ 15:33

  9. @Léo > Le site supremacypower.com n’est pas à moi, et le WHOIS ne donne pas le nom du webmaster. Grrrr !!! Je vais laisser un message dans ses commentaires je pense.

    Commentaire par aldbriand — 12 janvier 2010 @ 16:19

  10. Après les abus sur le H1 (qui apparemment a bcp perdu), les abus sur le H2, logique quoi ! :)
    Bon, ne pas prendre ce commentaire au premier degré !!! car de fait bon exemple d’intégration

    Commentaire par Blog Paradi-seo — 12 janvier 2010 @ 21:22

  11. @Blog Paradi-seo > Heureusement que tu déconnais car je n’aurais pas compris sinon. Merci du commentaire et bonne année à tous ceux qui ont commenté aujourd’hui.

    Commentaire par aldbriand — 12 janvier 2010 @ 21:41

  12. @aldbriand tu as du nouveau re l’autre blog ?
    Bonne année a toi aussi.

    Commentaire par Léo, Blog Propulsr — 13 janvier 2010 @ 21:38

  13. Excellente démonstration Arnaud.
    Étant devenu encore plus parano que propulsr après certaines pénalités infligés par des quality raters (à la louche, 15 sites client d’un coup !) je n’ose plus rien cacher, je tente donc de structurer en intégrant graphiquement, mais je trouve ton exemple flagrant d’efficacité.

    Au passage, merci pour le lien ;-)

    Commentaire par AxeNet — 15 janvier 2010 @ 18:34

  14. C’est mon 1er commentaire sur ce blog que je viens de découvrir et je sens que je vais pas me faire un copain sur ce coup.

    Quitte à planquer un h2 pour des raisons graphiques je l’aurai raccourci en un lapidaire « La boutique Arbadea ». Si c’est pour les robots autant leur mâcher la besogne.

    1 h1 ?
    2 ?
    3, 4… 7 ?
    Pourquoi pas ?
    Mais en HTML5 alors.
    Parce qu’en HTML5 on dispose de cette faculté de pouvoir en disposer plusieurs au sein de la même page pourvu que ce soit dans des sections séparées qui sont reconnues comme des balises sémantiques structurantes.
    Je modère mon propos en précisant qu’à mon sens cette faculté est intéressante avant tout pour des sites d’informations de type journaux ou magazines en ligne dotés de très nombreuses rubriques.

    Commentaire par Philippe — 18 janvier 2010 @ 15:38

Flux RSS des commentaires de cet article.

Désolé, les commentaires sont fermés pour le moment.

Twitter epokhe - Arnaud Briand Haut de page