Les titres donnent à votre contenu une structure claire et logique. Ce ne sont pas seulement des éléments visuels destinés à grossir le texte. Les lecteurs d'écran les utilisent pour permettre aux utilisateurs de naviguer entre les sections, et les moteurs de recherche s'en servent pour comprendre la hiérarchie thématique de votre contenu. Une structure de titres défaillante perturbe à la fois les humains et les machines, donc bien la concevoir profite à l'accessibilité, au SEO et à la lisibilité globale.
À quoi ressemble une hiérarchie de titres correcte
Pensez à vos titres comme à un plan ou une table des matières. Chaque niveau représente une profondeur d'imbrication, et vous ne devez jamais sauter de niveau en descendant. Voici à quoi ressemble une structure correcte :
H1 : Titre de la page (un seul par page)
H2 : Première section principale
H3 : Sous-section de la première section principale
H3 : Une autre sous-section
H4 : Détail dans la sous-section
H2 : Deuxième section principale
H3 : Sous-section de la deuxième section principale
H2 : Troisième section principaleRemarquez comment chaque niveau de titre est contenu dans le niveau supérieur. Vous ne sauteriez pas d'un H2 directement à un H4, tout comme vous ne créeriez pas une sous-sous-section sans sous-section préalable. Remonter est en revanche permis : après un H4, vous pouvez revenir à un H2 pour une nouvelle section principale.
Erreurs courantes de titres dans WordPress
La plupart des problèmes de hiérarchie de titres dans WordPress proviennent de quelques schémas récurrents :
- Le thème utilise les mauvaises balises pour le titre de la page : certains thèmes affichent le titre de l'article ou de la page comme un H2 au lieu d'un H1, ou utilisent le nom du site comme H1 sur chaque page. Cela signifie que le titre réel de votre contenu est rétrogradé, et de nombreuses pages peuvent ne pas avoir de H1 approprié du tout.
- Plusieurs balises H1 sur une seule page : cela se produit généralement lorsque le thème affiche le titre du site en H1 dans l'en-tête, et que le titre de la page est aussi un H1. Chaque page devrait avoir exactement un H1. Sur les pages internes, le nom du site devrait être un
<p>,<span>ou<div>stylisé, et non un H1. - Sauts de niveaux de titres : passer de H2 à H4 ou de H1 à H3 se produit lorsque les auteurs choisissent les niveaux de titres en fonction de leur apparence visuelle plutôt que de leur signification logique. Si le H3 a la bonne taille, ils choisissent H3, même si aucun H2 n'existe au-dessus.
- Utilisation des titres pour le style visuel : les auteurs utilisent parfois un H2 ou H3 simplement parce qu'ils veulent un texte gras et grand pour un appel à l'action ou un titre de widget. Ce ne sont pas de vrais titres de contenu et ils devraient être stylisés avec des classes CSS.
- Titres des constructeurs de pages et widgets : les constructeurs comme Elementor et les zones de widgets insèrent souvent des titres à des niveaux inattendus. Un widget de barre latérale peut utiliser un H3 alors que la zone de contenu n'a pas de H2, créant un saut de niveau dans la hiérarchie globale de la page.
Comment vérifier votre hiérarchie de titres
Avant de corriger quoi que ce soit, vous devez voir à quoi ressemble votre structure actuelle. Voici plusieurs façons de le faire :
- InspectWP : lancez une analyse et regardez la section contenu. InspectWP affiche la hiérarchie de titres complète de votre page, ce qui facilite le repérage des H1 manquants, des H1 dupliqués, des niveaux sautés et autres problèmes.
- Extension de navigateur HeadingsMap : disponible pour Chrome et Firefox, cette extension affiche une vue arborescente de tous les titres de la page courante. Elle signale les erreurs structurelles comme les niveaux sautés avec des icônes d'avertissement.
- Outil d'accessibilité WAVE : l'extension WAVE (wave.webaim.org) évalue votre page pour les problèmes d'accessibilité, y compris les problèmes de structure de titres. Elle superpose des icônes directement sur la page là où des problèmes sont détectés.
- Inspection manuelle : faites un clic droit sur la page, sélectionnez « Afficher le code source » (Ctrl+U), et recherchez
<h1,<h2,<h3, et ainsi de suite. Cela vous montre les balises de titres brutes dans le HTML.
Corriger les titres dans l'éditeur de blocs Gutenberg
Si vous utilisez l'éditeur de blocs WordPress (Gutenberg), corriger les niveaux de titres est simple :
- Cliquez sur n'importe quel bloc Titre dans votre contenu.
- Dans la barre d'outils du bloc en haut, vous verrez le niveau de titre actuel (par exemple « H3 »). Cliquez dessus pour ouvrir un menu déroulant.
- Sélectionnez le bon niveau de titre dans le menu. Rappelez-vous que les sections de votre contenu doivent commencer par H2 (puisque H1 est réservé au titre de la page), et les sous-sections doivent utiliser H3.
- L'éditeur de blocs inclut désormais une fonctionnalité « Plan du document ». Cliquez sur l'icône info (cercle avec « i ») dans la barre d'outils supérieure pour voir la structure de titres de l'article entier. Elle vous avertit des niveaux sautés.
Si vous utilisez l'éditeur classique, basculez sur l'onglet « Texte » pour voir le HTML brut et modifier manuellement les balises de titres.
Corriger les titres dans les modèles de thème
Si vos problèmes de titres viennent du thème plutôt que du contenu, vous devez modifier les fichiers de modèles du thème. Utilisez toujours un thème enfant pour que vos modifications survivent aux mises à jour du thème.
Les corrections courantes incluent le changement de la balise du titre du site sur les pages internes :
// Dans header.php de votre thème enfant
<?php if (is_front_page()) : ?>
<h1 class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
<?php else : ?>
<p class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></p>
<?php endif; ?>Et s'assurer que le titre de l'article utilise H1 sur les modèles de page/article unique :
// Dans single.php ou content-single.php
<h1 class="entry-title"><?php the_title(); ?></h1>Sur les pages d'archive (catégorie, étiquette, archives par date), le titre d'archive devrait généralement être le H1, et les titres d'articles individuels dans la boucle devraient être des H2.
Styliser les titres sans casser la hiérarchie
Si vous voulez qu'un texte ressemble visuellement à un titre mais qu'il ne s'agisse pas d'un titre structurel (par exemple, une bannière promotionnelle ou un titre de widget), utilisez une classe CSS au lieu d'une balise de titre :
.heading-style {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 0.75rem;
}Appliquez cette classe à un élément <p> ou <div>. Inversement, si vous voulez qu'un vrai titre paraisse plus petit ou différent du style par défaut, stylisez-le avec du CSS plutôt que de choisir un niveau de titre inférieur pour l'apparence.
Impact sur l'accessibilité de la hiérarchie des titres (WCAG 1.3.1)
Le critère de succès 1.3.1 des Web Content Accessibility Guidelines (WCAG) exige que l'information, la structure et les relations véhiculées par la présentation soient déterminables par programme. Les titres sont une voie principale de navigation des pages web pour les utilisateurs de lecteurs d'écran. Selon l'enquête WebAIM auprès des utilisateurs de lecteurs d'écran, plus de 67 % d'entre eux utilisent les titres comme méthode principale pour trouver du contenu sur une page. Lorsque vous sautez des niveaux de titres ou utilisez des titres pour du style visuel, les utilisateurs de lecteurs d'écran ne peuvent pas naviguer de manière fiable dans votre contenu. Corriger votre hiérarchie de titres est l'une des améliorations d'accessibilité les plus simples et les plus impactantes que vous puissiez apporter.
Impact SEO d'une structure de titres correcte
Google a confirmé qu'il utilise les titres pour comprendre le contenu et la structure d'une page. Bien que les titres seuls ne fassent pas votre classement, ils fournissent des signaux contextuels importants. Un H2 indiquant « Guide d'installation » dit à Google que la section suivante couvre l'installation. Des titres correctement imbriqués aident également Google à générer des extraits enrichis et des liens annexes. Sauter des niveaux ou utiliser les titres de manière incohérente envoie des signaux contradictoires sur la structure de votre contenu et peut empêcher les moteurs de recherche d'interpréter correctement les sujets de votre page.
Vérifiez votre hiérarchie de titres avec InspectWP
Après avoir effectué des corrections, lancez une nouvelle analyse InspectWP. La section contenu affiche chaque titre de votre page dans l'ordre, ainsi que son niveau. Vous devriez voir un seul H1, suivi de H2 pour les sections principales, de H3 pour les sous-sections et aucun niveau sauté. Si vous repérez encore des problèmes, retournez à l'éditeur ou au modèle de thème et ajustez en conséquence.