[Discussions] – SEO et hiérarchie de titres <h1>, <h2>…
Fréquemment, lors de nos accompagnements de projet web à la prise en compte de l’accessibilité, une demande émanant de consultants SEO consiste à n’utiliser qu’une seule balise <h1> par page.
Mais dans certains cas, cette demande vient en contradiction avec nos recommandations d’accessibilité.
Car en accessibilité, si nécessaire, plusieurs balises <h1> doivent être employées dans une même page web.
Prenons justement le cas de cette page où les titres suivants sont structurés avec des balises <h1> :
- « [Discussions] – SEO et hiérarchie de titres
<h1>,<h2>… » qui est le titre de cet article. - « Catégories », « Derniers commentaires », « Les projets AcceDe » et « Contact » qui chapeautent les contenus complémentaires en colonne de droite.
Ici, pour l’accessibilité, il est nécessaire de les coder avec des balises <h1> (plutôt que des <h2>, par exemple) pour ne pas qu’ils soient considérés comme enfants directs du titre de l’article.
Nous avons donc cinq balises <h1> correctement utilisés pour l’accessibilité. Notamment pour les personnes naviguant avec un lecteur d’écran (synthèse vocale et/ou plage braille) qui peuvent ainsi correctement assimiler la hiérarchie de l’information.
À noter qu’il est possible de simuler des titres de section via l’usage de role="heading" et de l’attribut aria-level, par exemple intégrés dans des balises <p>.
Mais malheureusement, cette « rustine » n’est pas optimale pour l’accessibilité notamment car :
- Lorsque les CSS sont désactivées, les styles graphiques (graisse et taille du texte) prévus par défaut par les navigateurs pour les balises
<hn>ne sont pas disponibles. - Les personnes malvoyantes (par exemple) utilisant une CSS utilisateur personnalisée selon leur besoin d’affichage peuvent rencontrer des difficultés pour cibler ces éléments. Et par conséquent modifier leurs apparences.
Étant donné que nous ne sommes pas spécialistes en référencement naturel, nous souhaiterions avoir l’avis de plusieurs expert-e-s en la matière.
Concrètement, les questions que nous nous posons sont entre-autres :
- La présence de plusieurs balises
<h1>dans une page web nuit-elle à son référencement naturel ? - Si oui, est-ce que cet impact négatif est conséquent ?
- Plus généralement, aujourd’hui, quel est l’impact réel des balises
<hn>sur le référencement ?
Nous sommes donc fortement preneur de retours d’expérience de personnes ayant récemment étudiées en détails ses questions.
N’hésitez donc surtout pas à nous partager votre avis et vos tests dans les commentaires de ce billet ! :)
Vos commentaires
-
Merci pour ce post très intéressant
-
Ce qui m’exaspère, ce sont les soi-disant web designer ou graphiste qui utilisent des headers pour la mise en forme. Ou comment mettre à sac un usage de balise fait pour le SEO avec des pratiques venues d’une incompétence notoire ? Il y a un exercice à faire qui est très simple. Lire uniquement les headers de la page dans l’ordre où ils apparaissent et voir si la cohérence du contenu / header est conservée. Après l’usage de plusieurs H1 : rien n’interdit cela mais comme je l’ai dit auparavant -> il faut être cohérent et compréhensible par un robot qui n’a pas une once d’intelligence …
-
Personnellement je fais en sorte qu’il y ait toujours et un seul et unique H1 par page créée.
Et le reste du contenu doit ensuite être structuré avec des balises H2 et H3, voir H4.
Il y a un certain nombre de règles à respecter, raison pour laquelle j’ai pris le temps d’écrire un article sur ce sujet si ça vous intéresse:
-
Il est essentiel qu’une page web comporte un titre principal (H1) suivi de titres secondaires (H2, H3, etc.). Cela garantit une structure logique et facilite la compréhension pour les utilisateurs.
Cette approche est similaire à celle d’un livre, d’un rapport, d’une thèse ou d’un article, qui possèdent tous un titre principal distinct. L’utilisation de H2 pour des éléments récurrents sur toutes les pages peut être inappropriée car elle risque de brouiller la hiérarchie de l’information.
Cette pratique ne vise pas uniquement à optimiser le référencement pour les moteurs de recherche, mais à structurer et hiérarchiser l’information de manière cohérente pour une meilleure expérience utilisateur.
Bilal (https://apigrowth.fr)
-
La thématisation des articles avec entre le contexte donnée par les titres (H1, H2, etc) semble de plus en plus importante pour Google ! Leur hiérarchisation devrait donc l’être aussi permettant de faire gagner du temps aux robots de Google.
Hâte de voir les évolutions de l’algorithme à venir !
François-Xavier Crépin – https://francoisxaviercrepin.eu/
-
Je vous remercie pour cet article sur un sujet qui a tendance à diviser la communauté SEO.
Cependant, je suis convaincu qu’une bonne hiérarchie facilite une compréhension optimale d’une page (comme illustré par l’image d’un livre dans le commentaire précédent). — Bruno, https://brunobertolin.be/
-
Il semble illogique qu’une page web ne possède pas un titre principal (H1) suivi de titres secondaires (H2, H3, etc.). L’accessibilité ne semble pas être un problème ici. Une page devrait avoir un thème principal, donc un H1, et peut tout à fait contenir plusieurs thèmes secondaires (H2).
De la même manière qu’un livre, un rapport, une thèse ou un article possèdent un seul titre principal, il en va de même pour une page web. De plus, l’utilisation de H2 pour des éléments récurrents sur toutes les pages n’est pas appropriée.
Il ne s’agit pas seulement d’optimisation pour les moteurs de recherche, mais plutôt d’une question de structuration et de hiérarchisation de l’information. Paul – https://www.uplix.fr/
-
Super article, toujours autant d’actualité ! Il ne me manquait plus que les pop-corn pour les commentaires ^^
Tout cela est compliqué à dire…
Déjà, parce que lorsque Google dit blanc, parfois, il aime bien le noir.
Ensuite, j’imagine qu’il faut distinguer les Pages, des Articles. Je pense qu’ils ne sont pas considérés de la même façon en matière de SEO, y compris sur la structure Hn.
J’ai récemment eu le cas dernièrement ; 2x H1 sur une Page (par erreur) et le référencement ne décollait pas. En corrigeant cela, ça c’est nettement amélioré.
Idem côté Articles… il n’y avait pas de H1. Je l’ai ajouté et hop, ça va beaucoup mieux.
Ce sujet est toujours d’actualité en 2024. Il faudrait effectivement faire des tests type A/B de grande envergure mais avec aucune autre modification que celle de mettre 1 ou 2 H1, par exemple… et encore, comme tout va très vite, possible que le référencement fluctue sans que ce soit ces modifications qui aient agis dessus.
Je reste de la politique de ne laisser qu’un H1 par Page et par Article… le H1, à mon sens, venant compléter le Title, tout en permettant d’inclure une structure décomposée en Hn.
Matthieu
-
Je vous remercie pour cet article pertinent sur la hiérarchisation.
C’est un sujet qui reste résolument actuel ! :)
-
Merci pour ce billet, toujours d’actualité ;)
-
top article !
-
En matière de SEO, l’utilisation de balises multiples a longtemps été sujet de débat. Historiquement, la recommandation était de n’avoir qu’un seul par page, principalement pour des raisons de clarté et de hiérarchisation du contenu. Cependant, avec les mises à jour des algorithmes de recherche et les évolutions des normes HTML (notamment avec HTML5), l’utilisation de balises multiples n’est plus considérée comme une faute grave en SEO.
-
Je pense que l’utilisation de plusieurs balises sur une page peut être bénéfique pour l’accessibilité et la compréhension de la structure du contenu. Cela permet aux utilisateurs de naviguer plus facilement et de comprendre la hiérarchie de l’information. Cependant, il est important de garder à l’esprit l’impact potentiel sur le référencement naturel. Bien que les moteurs de recherche aient évolué, il est recommandé d’utiliser les balises de manière judicieuse et cohérente.
-
Super article sur la hiérarchisation des balises. merci !
-
Merci pour les informations concernant la hiérarchisation du balisage.
Selon moi il est plus pertinent de ne mettre qu’un h1 par page et ensuite de hiérarchiser avec d’autres balises Hn.
-
Il est vrai que je préfère garder un seul h1, même toutes ces années après la publication de cet article et de ses commentaires ! (qui, au passage, sont très instructifs).
-
Articles très instructif, merci
-
Toujours et encore l’éternel débat :-)
-
Discussion très intéressante sur la remise en question du H1 unique.
Je suis d’accord avec Hugo Domeur, c’est une discussion SEO que nous pourrions relancer en 2023 !
Merci pour cet article. -
Depuis la meilleure compréhension sémantique de Google et sa recherche de pertinence par rapport à la requête de l’utilisateur, je me demande quand même si le fait d’utiliser des titres pour du contenu annexe à l’article (sidebar, newsletter…) n’a pas de répercussions sur le positionnement. Google favorise de plus en plus les contenus ciblant un sujet clair d’une thématique précise, et de mon avis personnel je pense que le fait de baliser des éléments annexes au sujet de la page comme Hn peut réduire le poids des mots-clés et mots importants du champ sémantique présents dans les Hn liés au contenu du sujet de la page.
Après, ça reste un avis personnel étant partisan du fait que les Hn doivent être réservés au contenu de la page et non à ses sections annexes pour améliorer la compréhension qu’a Google sur notre contenu, mais la question mériterait d’être relancée en 2022, voire même 2023 bientôt.
-
Merci pour l’article ! Très complet et très compréhensible.
-
Super article très intéressant !
-
Avec le « titlegate », il faudrait tester plusieurs h1 dans la page et une balise title suroptimisée. Et ensuite on regarde ce que Google va utiliser : le premier H1 qu’il trouve ou le H1 le plus cohérent ?
Perso, je suis de l’école un H1 unique.
-
Franchement merci, c’est très intéressant !
-
Merci pour l’article !
-
Super article !
-
Très bon article !
-
Très intéressante cette discussion =)
6 ans plus tard, le débat est toujours d’actualité !
-
Very good !
-
Très bon billet sur la hiérarchisation en SEO !
Merci.
-
Merci pour ce petit article,
Effectivement je me pause aussi pas mal la question du H1 3 idées différentes dans une pages aussi importantes donc 3 H1 ou H1 puis H2 …
Je ne trouve jamais d’étude complète la dessus histoire de voir l’évolution de positionnement d’une page.
-
Personnellement je suis pas fan des « plusieurs H1 » sur une même page.
Concernant l’importance en terme de SEO : Oui c’est important mais cela ne remplacera jamais un bon netlinking et un site bourré de contenu… -
On peut très bien faire un usage modéré et réfléchi des balises de titraille côté sémantique (le balisage HTML5) et penser à l’internaute (la fameuse UX) en lui servant du texte mis en forme par des CSS.
Ainsi visuellement les sections de la page sont bien identifiées, et il peut naviguer sans hésitation. Et les crawlers des moteurs de recherche ont un code optimisé qui confère un sens à la page (SEO).
Pour ma part, j’utilise la recette 1 title, 1 h1, autant de h2 que de section (je parle de la balise donc pas de S contrairement à Alsacreations), quelques h3 et h4 en fonction des contenus. J’essaie de faire du sur-mesure, à l’aide de moteurs de templates (héritage, surcharge, tout ça….)
Du coup je n’ai jamais vu de problème :-)
Voilà pour une modeste contribution.
-
Un combat de tous les jours avec les développeurs, le html5, le SEO. Le début d’une nouvelle ère.
L’utilisation de plusieurs H1 sur une même page, c’est comme avoir plusieurs femmes :).-
Heu, je ne comprends pas bien là… Du coup c’est bien ou pas c’est pas bien ^^
-
-
Plop,
Si Google dit que ca ne le dérange pas, c’est parce que ca ne le dérange pas.
Comprendre par là : Ca lui permet de voir qui essaie de surcharger la page avec des mots clés.A la place de Google, si j’attribuais 100pts à la balise h1, alors j’en attribuerais 100 divisés par le nombre de balises h1..
Un doc avec : voiture est très fort sur ‘voiture’.
Un doc avec voituretrainvélomoto est pour moi, 4 fois moins ‘fort’ sur le mot voiture.Le h1 doit être unique sur la page, ca me parait évident. Le mettre sur ‘contact’, c’est un peu comme si tu penses que « table des matières », « contenu du livre », « copyright », et « remerciements » ont le même poids pour un bouquin. Comme dit plus haut, ca n’a pas de sens. Pour Google (puisque le sujet c’est le référencement), ca n’est pas génant : il va tout dévaluer, c’est évident.
Pour celui qui utilise une tablette pour mal voyant, ca lui permet de passer d’une section à une autre, très rapidement, mais poses toi la question : Pourquoi est-il sur la page ? Pour accéder à ‘contact’, ou pour accéder au contenu de l’article ? Et la finalité de cette page est-elle le lien ‘contact’ ? Ou le contenu ?Et par rapport au commentaire ci-dessus : Le fait que les navigateurs gèrent plusieurs h1 comme des h2, c’est bien la preuve qu’ils dévaluent la balise lorsqu’ils en trouvent plusieurs :)
Pour finir, la différence entre les h1 et les title, c’est que l’un sert lorsque la page est affichée, alors que l’autre ne sert que lorsque la page n’est pas affichée : dans les serps, ou lorsque tu fais un raccourci sur ton bureau. Ils sont complémentaires, sont très souvent identiques, mais pas nécessairement, par contre ils doivent être uniques.
html5 permet de multiples h1 ? Cool ! Reste à savoir si l’appareil en face est prévu pour, ce qui n’est pas forcément évident. ( bientôt on pourra remettre des table tr td partout ! :D )
++
-
C’est un point de vue qui se défend, mais pour le coup je ne suis pas vraiment d’accord. Si l’algorithme de google était programmé avec des raisonnement du type « je donne 100pts à chaque
H1», je pourrais en coder un tout aussi efficace moi-même :) ! Il est vraiment trèèès loin d’avoir un fonctionnement aussi simple.Je pense que dans ton exemple tu prends le problème à l’envers, ce n’est pas
C’est le
, le but des sections étant justement de définir la « valeur » des différents éléments.H1d’une section, donc c’est importantBODY,ARTICLEetSECTIONsont des sections de contenu (sectioning root pour le W3C). Ce sont elles dont lesHndécrit le contenu véritable de la page.Les sections
ASIDE,NAV,HEADERetFOOTER« sortent du flux » et indiquent un élément qui ne correspond pas au contenu de la page. Donc bien évidemment google ne les valorise pas autant. À moins que personne chez eux n’aient lu la doc W3C… (que je recommande vivement à ceux qui veulent mieux comprendre)Dans un bouquin, même si « Sommaire » et « Bibliographie » sont des titres, je comprends très bien qu’ils n’ont pas la même valeur sémantique que les titres des chapitres du roman, et qu’ils ne font pas partie de l’histoire. C’est exactement ce pourquoi ont été créées les balises de section.
-
-
Bon, d’autres SEO plus illustres que moi ont déjà rebondi là dessus, donc je fais juste un copier/coller de ce que j’ai répondu à un client qui s’interrogeait sur les affirmations de son webmaster, ça m’évitera de m’énerver à propos d’ignares qui veulent m’apprendre mon métier:
*Le webmaster:
« Le fait qu’il y ait plusieurs<h1>sur la page d’accueil ne pose pas de problème car en HTML5 on peut inclure un<h1>par<article>sur une seule page sans nuire au référencement. »* Moi:
C’est faux.Il est vrai, et ça a toujours été le cas même en html 4, que la norme w3c prévoit la possibilité de plusieurs
<h1>dans une page, et Matt Cutts a même indiqué que ça ne posait aucun problème technique à google de comprendre la structure de la page dans le cas deh1multiples.
Il a même dit que l’algo pouvait « parfois » comprendre correctement la page si chaque<h1>jouait bien le rôle de titre pour un paragraphe au sujet bien distinct des autres paragraphes annoncés par les autres<h1>.Mais ce sont des considérations >techniques< et normatives qui n’ont rien à voir avec le référencement, et toutes les expérimentations même récentes (les choses ayant pu changer) prouvent que si on multiplie les
h1, même en html 5, ça marche moins bien, et que ça flingue la compréhension que google peut avoir de la thématique générale d’une page.*Le webmaster:
« Le titre du site est contenu dans la balise<title>de la<head>et non dans une balise<h1>, cela ne pose aucun problème de référencement. »Moi:
<title>et balise<h1>sont deux éléments distincts qui jouent des rôles distincts et ont un poids distinct dans le référencement.
Effectivement, c’est abusif de parler de titre de la page pour leh1, puisque c’est juste le grand titre de l’arborescence des chapitres du contenu textuel de la page, si on veut trouver un descriptif correct.
Avec l’url, qui n’a pour le coup absolument rien a voir avec un quelconque titre, on sait par expérimentation qu’une certaine synchronisation des mots utilisés dans ces trois éléments joue un rôle de renforcement pour le positionnement.
Comment profiter de cette synchronisation si on met plusieurs<h1>?Ca ne pose effectivement aucun « problème » de référencement de ne pas les remplir ou de les remplir n’importe comment, comme on peut parfaitement courir avec des boulets aux pieds, si on est assez fort.
Mais on va moins vite… -
Back to the future !
Blague à part, un seul h1 : c’est la base et l’objectif de cette balise, à commencer par le SEO. Je colle à la thématique de la page en attribuant des termes prépondérants. De quoi nourrir convenablement les robots. Pas besoin d’aller voir plus loin que ça.
Après, que ça marche autrement, personne n’en doute. Même en commençant par un h7 on peut faire des miracles.
-
Ce n’est pas le validateur du W3C qui met un warning lorsqu’une page propose plusieurs H1, au motif que ça complique la lecture du document pour les navigateurs textuels ?
Je n’ai plus d’exemple sous la main, mais ça me rappelle quelque chose.
-
Pas sur du HTML5 ce qui a du coup lancer ce débat improbable…
-
Tout est remis en question avec le HTML 5 Voici un article qui explique bien le pourquoi du comment http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era–webdesign-16824
Du coup, il n’y a plus aucun problème pour avoir 25xH1 par page !
Sauf que le père Google n’est pas aussi souple et prêt à remettre en question des fondamentaux de pondération.
Peut être qu’un jour la donne va changer, mais jusqu’à preuve du contraire et si on souhaite optimiser son SEO, la règle est un seul H1 par page.
-
-
-
Ni le W3C ni personne n’interdit de faire n’importe quoi avec les Hx et H1 en particulier.
Encore plus si on conçoit le HTML 5.Sauf que…
La bonne pratique (conseillée par le W3C) est de structurer seulement le contenu unique de la page avec des Hx (donc niet les menus, etc. ou mettre des liens).
Concernant H1, nous n’avons pas beaucoup d’éléments « on page » ayant du poids pour le SEO.
H1est relativement bien pondéré.
C’est dommage de l’utiliser à tort et à travers.
Un seul H1 par page est l’utilisation logique, normale et intelligente.
Encore une fois, vous pouvez continuer de faire n’importe quoi avec H1 ou les autres, mais ce n’est pas optimal pour le SEO.-
Voilà un commentaire sensé…
Tout le monde peut faire ce qu’il veut avec un site internet… mais effectivement pourquoi donner plus de poids à une information qui n’en mérite pas ?Un H1 par page suffit amplement !
-
-
Waaa c’est trop : le nombre d’inepties dans cet article et les commentaires est indécent !
Comment pouvez-vous mélanger autant de sujets ? En quelle année utiliser plusieurs h1 sur une page serait bon pour l’accessibilité ?
-
En 2012 j’ai rendu un site internet Accessiweb niveau bronze-argent, pour ce label, interdiction d’avoir plusieurs balises h1 par page.
-
Il faut noter que, pour les navigateurs (Firefox, Chrome, IE11), un
<h1>dans une balisearticle,aside,nav,sectionest interprété comme un<h2>en terme de style par défaut.
Je ne sais pas ce qu’il en est pour Google mais si les navigateurs ont réussi à s’entendre sur ce point ; il y a des chances pour que ça ne joue pas négativement d’utiliser plusieurs<h1>dans la mesure où les<h1>secondaires sont dans ces balisesarticle,aside,navousection.Exemple pour firefox :
h2, *:-moz-any(article, aside, nav, section) h1 { display: block; font-size: 1.5em; font-weight: bold; margin-block-end: 0.83em; margin-block-start: 0.83em; }-
Bonjour Julie,
Merci pour ton commentaire.
Effectivement, la plupart des navigateurs affecte un style différent au
<h1>en fonction de leur intégration et imbrication dans les balises sectionnantes HTML5. On peut donc aussi imaginer que Google leur affecte un poids différent.À noter toutefois qu’en accessibilité, bien que « la spécification HTML5 autorise l’utilisation exclusive de titre de niveau 1 (
<h1>), le manque de support des technologies d’assistance oblige à utiliser une hiérarchie de titres pertinente ». (Cf. la note technique du RGAA au sujet du role ARIAheadinget l’utilisation des titres<h1>).Johan
-
Bonjour Julie,
Le seul « hic » c’est qu’en aucun cas un moteur de recherche n’est un navigateur…. donc l’interprétation de votre firefox, n’est pas du tout la même que celle du robot Google…
-
-
A ta remarque 1.
Non, sur la page d’accueil d’un blog qui présente plusieurs articles, les titres des articles ne sont pas des h1 mais des h2.
Cette page d’accueil doit avoir son propre titre h1.Tu vois aussi que sur mon blog, les titres dans la sidebar n’ont pas de hn.
Les hn doivent à mon avis être réservé au contenu sémantique propre d’une page et surtout pas être utilisés de manière commune sur toutes les pages (le nom d’une classe n’a aucun impact sur les hn :-)Pour faire simple, en terme de structure de l’information, je conseille un seul h1 par page, tout comme il n’y a qu’un seul title.
Le title se voit dans la serp et le h1 sur la page.Après, ce n’est que de l’optimisation SEO. La plupart des sites sont mal codés sur ce plan, je pense que Google s’en dépatouille très bien. Et n’oublions pas que les hn ne sont qu’un critère parmi des centaines.
-
Cette page d’accueil doit avoir son propre titre
h1.
Il s’agit là d’une règle de référencement alors, parce que ça n’est pas nécessairement le cas accessibilitairement parlant.
Tu vois aussi que sur mon blog, les titres dans la sidebar n’ont pas de
hn.
Leshndoivent à mon avis être réservé au contenu sémantique propre d’une page et surtout pas être utilisés de manière commune sur toutes les pages.J’ai bien vu, et c’est justement là où le problème se pose, au regard de l’accessibilité, nous en avons besoin.
(le nom d’une classe n’a aucun impact sur les
hn:-)Mais en regardant le nom choisit pour une classe, on décèle bien souvent des incohérences :-)
Pour faire simple, en terme de structure de l’information, je conseille un seul
h1par page, tout comme il n’y a qu’un seultitle.
Letitlese voit dans la serp et leh1sur la page.C’est bien l’origine du débat sur ce billet, du point de vue de l’accessibilité, un seul
h1par page pose problème dans de nombreuses situations.Après, ce n’est que de l’optimisation SEO. La plupart des sites sont mal codés sur ce plan, je pense que Google s’en dépatouille très bien. Et n’oublions pas que les
hnne sont qu’un critère parmi des centaines.Nous sommes d’accords, et l’objectif est de trouver un compromis entre les règles d’accessibilité et l’optimisation SEO.
D’après les différents retours et liens que nous avons reçus en commentaires (ceux de Yann et Gaël notamment), l’impact SEO de l’utilisation d’un seul
h1semble relativement faible au regard de toutes les autres bonnes pratiques.
-
-
Il reste illogique qu’une page n’ait pas un titre principal (
H1) puis ensuite des titres secondaires (h2,h3, etc.).Je ne vois pas de problème d’accessibilité, une page doit avoir un sujet principal (donc un
H1) et peut bien évidement avoir plusieurs sujets secondaires (h2).Un livre n’a qu’un titre principal, un rapport de même, une thèse de même, un article de même, etc.
Et je ne parle même pas de ceux qui mettent des
h2sur des éléments communs à toutes les pages.Ce n’est pas qu’une question de référencement, c’est une question de hiérarchie de l’information.
Mon avis détaillé ici : La hiérarchie des balises H1, H2, Hn… et le référencement.
-
Bonjour Sylvain,
Merci pour ce retour.
Il reste illogique qu’une page n’ait pas un titre principal (H1) puis ensuite des titres secondaires (h2, h3, etc.).
Nous sommes d’accord, il est tout à fait illogique qu’une page n’ait pas de titre de niveau 1.
Toutefois, sur le fait qu’elle puisse en avoir plusieurs :- L’exemple cité dans ce billet de blog. Qu’en penses-tu ?
- Une page d’accueil d’un blog remonte plusieurs articles, ces articles sont bien des titres de niveau 1 ? On pourrait me dire alors que le premier titre est le nom du blog, mais dans ce cas pourquoi le nom du blog ne serait pas le premier titre sur les autres pages ?
- La page de ton blog. Dans la colonne de droite, « Catégories » est structuré avec
<div class="widget-title">. D’après la classe, c’est donc bien titre ? Ici, seul un<h1>pourrait donc permettre de l’identifier comme tel.
Je ne vois pas de problème d’accessibilité, une page doit avoir un sujet principal (donc un
H1) et peut bien évidement avoir plusieurs sujets secondaires (h2).Aussi, je n’aurai pas traduit
<h1>partitre principal
mais plutôt par titre de niveau 1. La différence entre nos points de vue se joue ici, je vais préciser.Un livre n’a qu’un titre principal, un rapport de même, une thèse de même, un article de même, etc.
Dans ce type d’ouvrages, les
<h1>ne sont justement pas utilisés pour les titres principaux mais pour les titres de chapitres (les titres de niveau 1) : Headings (ePub 3). Il y a donc plusieurs<h1>dans les livres, les rapports et les thèses.Un livre n’a donc qu’un seul titre principal (en ePub 3 l’élément
<dc:title>dans les métadonnées (en anglais)), et plusieurs titres de niveaux 1 (en ePub 3<h1>).Une page web est également composée d’un titre principal, mais ne s’agirait-il pas plutôt de
<title>?
Et de titres de contenus,<h1>pour les différents blocs autonomes,<h2>pour les sous-titres, etc.Et je ne parle même pas de ceux qui mettent des
h2sur des éléments communs à toutes les pages.Nous sommes donc d’accords, il faut plutôt mettre des
<h1>:p.Ce n’est pas qu’une question de référencement, c’est une question de hiérarchie de l’information.
Là, où je te rejoins, mais tu n’en parles pas directement c’est que le
<h1>du titre d’un billet de blog, sur la page de ce billet, n’a pas la même importance sur les titres d’encarts. C’est pour cela qu’en HTML5, on peut aisément différencier le premier niveau de titre du contenu principal et le premier niveau de titre d’un encart :<main><h1></h1></main> <aside><h1></h1></aside>
Sébastien.
-
Bonjour,
Je rejoins complètement Sébastien dans sa définition de
<h1>en tant que titre de niveau 1 plutôt que titre principal.Pour rajouter à ce qui s’est dit j’utiliserai l’analogie du traitement de texte, Microsoft Word plus précisément.
Un traitement de texte existe par défaut pour éditer des documents avec une certaine hiérarchie. J’ai l’impression que peu d’utilisateurs le savent mais il existe le panneau « styles » dans Ms Word. Ce panneau permet d’attribuer à du texte une valeur stylistique. Cela permet alors de n’avoir qu’un seul endroit à éditer pour modifier tous les éléments ayant cette valeur stylistique. On pourrait dire que c’est une ébauche de CSS. On pourrait très bien appliquer une valeur sémantique à ce tableau de style étant donné qu’il contient des entrées prédéfinies de « texte », « titre », « sous-titre », « titres de niveau 1 » et plus. C’est cette différenciation entre « titre de niveau 1 » et « titre » qui m’intéresse ici. Elle existe, elle est prédéfinie dans les styles par défaut contrairement à des titres de niveau 3 et plus. Le style « titre » est là pour renseigner le titre du document et le style « titre de niveau 1 » renseigne un titre de section.
Pour revenir à notre document HTML, le titre du document (de la page HTML) est la balise
<title>. S’en suit alors une suite (ou non) de titre de niveaux différents par section de document.
Ce point est renforcé par la spécification W3C de la balise<title>: « Thetitleelement represents the document’s title or name. » (L’élémenttitlereprésente le titre ou nom du document.) et
« There must be no more than onetitleelement per document. » (Il ne peut avoir plus d’un élémenttitlepar document.)
Du côté du titre de niveau 1, il est défini en même temps que les autreshn(https://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements) : « These elements represent headings for their sections ». (Ces éléments représentent le titre de leurs sections.) On a bien une distinction entre titre de document et titre de section.Dans un document HTML, les balises
<main>,<section>,<article>,<aside>ont été rajoutés pour permettre une couche supplémentaire de hiérarchie entre le cœur du document, les sections relatives à ce document, et les annotations, références et autre. On peut ainsi ranger dans des<aside>les compléments d’informations du cœur du document.Pourquoi alors tout le monde utilise un
<h1>pour un titre de page ? Peut être est-ce dû au fait que la balise<title>se trouve dans le<head>et n’est donc pas rendue dans la page, nous forçant alors à nous rabattre vers la balise de titre la plus forte disponible : le<h1>.Voilà mon point de vue personnel quand on me parle de hiérarchie et sémantique de document HTML. #noublionspasletitle.
-
Bonjour,
Je suis du même avis que Sylvain et notamment sur l’importance de NE PAS utiliser de headings sur des éléments qui se répêtent sur toutes les pages (et qui n’ont aucune utilité pour comprendre le sujet principal d’une page).
Les h1 que vous avez déployés sur les éléments/titres présents dans votre sidebar se retrouvent sur toutes vos pages…..Quel(s) intérêt(s) de baliser « Catégories, Derniers Commentaires…. » si ces élements ne constituent pas le contenu principal de la page ?
Enfin, je confirme qu’il n’y a rien d’étrange à utiliser plusieurs balises h1 du moment qu’elles hiérarchisent l’information et donc le contenu principal d’une page.
-
Merci pour votre commentaire.
Quel(s) intérêt(s) de baliser « Catégories, Derniers Commentaires…. » si ces élements ne constituent pas le contenu principal de la page ?
Comme indiqué dans le corps de cet article et reprécisé par Sébastien dans les commentaires, utiliser des titres de section de niveau
<h1>pour les titres des encarts « Catégories », « Derniers Commentaires », etc. de ce site est nécessaire pour l’accessibilité.En particulier pour les personnes non voyantes naviguant avec un lecteur d’écran (synthèse vocale et/ou plage braille) tel que JAWS, NVDA ou encore VoiceOver qui peuvent ainsi atteindre très rapidement ces zones de la page (via des raccourcis).
Concrètement, sur toutes les pages du site, grâce à ces
<h1>, une personne non voyante peut se rendre dans une de ces zones en très peu de manipulations. Ce qui n’est pas possible si ces titres sont codés avec des<div class="titre">, par exemple.En résumé, pour une personne « valide » qui consulte la version du site avec le support des CSS, l’absence de
<h1>sur ces titres n’a effectivement aucune incidence.
En revanche, ces absences pénalisent notamment les personnes qui utilisent des lecteurs d’écran ou celles qui personnalisent l’affichage du site (qui naviguent sans CSS, par exemple).Enfin, je confirme qu’il n’y a rien d’étrange à utiliser plusieurs balises h1 du moment qu’elles hiérarchisent l’information et donc le contenu principal d’une page.
La liste des catégories, la liste des derniers commentaires, les projets AcceDe et les moyens de contact de ce site sont bien des informations, qu’elles soient dans le contenu principal ou non. Il n’y a donc rien d’étrange à les introduire par des balises
<h1>. ;)
-
-
-
Daniel Roch (de SeoMix) a fait une série de tests sur ce sujet, mis à jour il y a moins d’un an :
Balise H1 et référencement naturel : le testA priori, aucun souci pour le SEO lorsque plusieurs
h1:)-
Bonjour Gaël,
C’est exactement ce genre d’études récentes que nous recherchons. Merci !
Effectivement, je note aussi que les résultats de certains tests indiquent qu’avoir plusieurs
<h1>ne semble pas nuire au référencement naturel.Bonne nouvelle pour l’accessibilité !
En attendant d’éventuels autres ressources et résultats de tests. :)Johan
-
-
Je commence la série de commentaires en indiquant ce lien d’une vidéo de Matt Cutts, ingénieur chez Google (2009) indiquant qu’il n’y a rien d’anormal (sous entendu pour l’indexation par Google et le SEO je pense) à utiliser plusieurs
H1s’ils ont vraiment une utilité de structuration (ce à quoi correspondent nativement les balisesH1) :
More than one H1 on a page: good or bad?.-
Bonjour Yann,
Merci à toi pour ce premier commentaire et cette ressource !
Johan
-
