Balises de titre (H1-H6) et hiérarchie

Que sont les balises de titre ?

Les balises de titre, de H1 à H6, sont des balises HTML qui définissent la hiérarchie du contenu et la structure des sections d’une page. H1 représente le titre de plus haut niveau, H2 les sections principales, H3 les sous-sections, et ainsi de suite. Même si ces balises apparaissent visuellement en gros caractères ou en gras dans le navigateur, leur objectif premier n’est pas visuel, mais structurel : à l’instar de la table des matières d’un livre, elles constituent le squelette logique de la page.

Cette hiérarchie n’est pas seulement une organisation lisible à l’œil nu, mais aussi une structure arborescente que les navigateurs et les technologies d’assistance (telles que les lecteurs d’écran) « comprennent » de manière programmatique. Un utilisateur de lecteur d’écran navigue généralement d’une balise d’en-tête à l’autre sur la page ; par conséquent, si la hiérarchie est perturbée, la navigation s’en trouve également perturbée.

Les niveaux de titres permettent également de rendre le contenu d’une page longue « scannable » : l’utilisateur trouve la section qu’il recherche en parcourant les titres du regard, plutôt qu’en lisant la page ligne par ligne. Cela peut avoir un impact positif tant sur l’expérience utilisateur que sur le temps passé sur la page.

Pourquoi est-ce important ?

Une hiérarchie de titres correcte facilite non seulement la compréhension par les moteurs de recherche de la cohérence thématique de la page et de ses sous-thèmes, mais permet également aux utilisateurs de lecteurs d’écran de naviguer sur la page. Google déduit, à partir de la structure des titres, quelle section d’une longue page traite de quel sous-thème ; cela peut notamment aider à sélectionner le bon passage dans les résultats enrichis, tels que les « extraits en vedette » (featured snippet).

Une hiérarchie irrégulière ou incomplète entraîne une structure de contenu floue et des problèmes d’accessibilité. Par exemple, passer directement d’une balise H2 à une balise H4 peut semer la confusion chez l’utilisateur d’un lecteur d’écran, qui se demandera : « Y a-t-il un niveau intermédiaire manquant ici, ou la section est-elle terminée ? ».

Dans un cas extrême, dans les applications monopages (single page application) ou les systèmes de modèles à composants multiples, différents composants peuvent afficher leurs propres balises H1 de manière indépendante, ce qui peut entraîner, sans qu’on s’en rende compte, la présence de plusieurs balises H1 sur une même page. Dans ce type d’architectures techniques, il est important de gérer les niveaux de titres de manière centralisée.

Comment y remédier ?

• Il ne doit y avoir qu’un seul H1 sur la page ; il s’agit généralement du titre principal de la page et il doit résumer clairement le sujet de celle-ci.
• Utilisez les titres dans l’ordre suivant : H1 → H2 → H3, sans sauter de niveau.
• Utilisez les titres pour définir la structure du contenu, et non pour des raisons visuelles ; si vous souhaitez un texte en gros caractères ou en gras, utilisez le CSS, ne choisissez pas un niveau de titre inapproprié.
• Chaque H2/H3 doit correspondre à un véritable titre de section, et non à un texte décoratif ou à un slogan.
• Utilisez les mots-clés de manière naturelle dans les titres ; ne remplissez pas chaque titre de force avec des mots-clés.
• Sur les pages longues, rédigez les titres de manière cohérente et prévisible afin de créer une table des matières ; cela aide à la fois l’utilisateur et les moteurs de recherche.
• Si vous utilisez un thème ou une bibliothèque de composants, documentez dans un guide de style centralisé le niveau de titre utilisé par les différents composants (en-tête, hero, carte, pied de page).
• Lorsque vous modifiez la mise en page (layout), vérifiez régulièrement, à l’aide des outils de développement du navigateur (arbre DOM), si la hiérarchie des titres n’est pas altérée.
• Sur les blogs ou les sites d’actualités, mettez en place un workflow de gestion de contenu qui sépare le titre de l’article (H1) du titre éditorial et du titre SEO ; ne liez pas ces deux éléments entre eux.
• Sur les sites à plusieurs auteurs, les éditeurs peuvent avoir des habitudes différentes ; c’est pourquoi la mise par écrit des règles de hiérarchie des titres dans un guide de style permet d’améliorer la cohérence.

Exemple

<h1>Guide SEO</h1>
<h2>SEO technique</h2>
<h3>Vitesse du site</h3>
<h2>SEO de contenu</h2>
<h3>Recherche de mots-clés</h3>

Mauvais exemple : <h1>Bienvenue</h1> puis directement <h4>Nos produits</h4> — les niveaux H2 et H3 ont été sautés, la hiérarchie est rompue.

Erreurs courantes

• Utiliser plusieurs balises H1 sur une même page (par exemple, à la fois dans la zone du logo et dans le contenu).
• Ne pas utiliser du tout de balise H1.
• Utiliser les balises de titre uniquement pour obtenir une police plus grande ou en gras, sans tenir compte de la hiérarchie.
• Sauter des niveaux en passant directement de H2 à H4.
• Lorsque le rapport de Seoraporu.co signale « plusieurs balises H1 » ou « absence de balise H1 », il faut corriger cela au niveau du modèle/thème, car il s'agit généralement d'un problème récurrent sur toutes les pages.