Les balises de titre HTML, de <h1> à <h6>, définissent les titres et sous-titres de votre contenu. Elles créent un plan hiérarchique du document qui indique aux navigateurs, aux moteurs de recherche et aux technologies d'assistance comment votre page est structurée. Pensez-y comme aux titres de chapitres et de sections d'un livre : le H1 est le titre du livre, les H2 sont les titres de chapitres, les H3 sont les sections à l'intérieur des chapitres, et ainsi de suite.
Comprendre la hiérarchie des titres
Chaque niveau de titre représente une profondeur différente dans la structure de la page :
<h1>: le titre principal de la page. Il décrit le sujet de l'ensemble de la page. La meilleure pratique est d'utiliser exactement un H1 par page. Sur un article de blog, c'est généralement le titre de l'article. Sur une page d'accueil, ce peut être la proposition de valeur principale.<h2>: titres de section principaux. Ils divisent votre contenu en ses sections primaires. Dans un long article, chaque H2 introduit un nouveau sujet ou un point majeur.<h3>: sous-sections au sein d'une section H2. Si votre section H2 traite des « en-têtes de sécurité » et que vous voulez la diviser, chaque partie obtient un H3.<h4>à<h6>: niveaux d'imbrication plus profonds. La plupart des contenus n'ont rarement besoin d'aller au-delà de H4. L'utilisation de H5 ou H6 indique généralement que le contenu pourrait bénéficier d'une restructuration en pages ou sections distinctes.
Pourquoi la hiérarchie des titres compte pour le SEO
Les moteurs de recherche utilisent les titres pour comprendre le sujet et la structure de votre contenu. Google a confirmé que les titres aident ses robots à saisir le sujet de chaque section d'une page. Bien que les titres seuls ne soient pas un facteur de classement énorme, ils contribuent au SEO on-page global de plusieurs manières :
- Signaux thématiques : les mots-clés dans les titres ont plus de poids que les mots-clés dans le corps du texte. Un H2 indiquant « Comment sécuriser votre connexion WordPress » signale à Google que cette section porte spécifiquement sur la sécurité de la connexion.
- Extraits optimisés : Google extrait souvent du contenu à partir de sections aux titres clairs pour les résultats en extraits optimisés. Une page bien structurée avec des titres descriptifs a plus de chances d'apparaître dans ces positions privilégiées.
- Compréhension de la structure de la page : une hiérarchie de titres logique aide Google à comprendre la relation entre les sections. Si votre H2 est « Optimisation de la performance » et vos H3 sont « Compression d'images » et « Mise en cache », Google comprend que ce sont des sous-sujets de la performance.
- Classement par passage : Google peut classer des passages individuels d'une page. Des titres clairs aident Google à identifier où un passage se termine et où un autre commence.
Accessibilité et navigation par lecteur d'écran
Pour les utilisateurs qui dépendent de lecteurs d'écran (comme JAWS, NVDA ou VoiceOver), les titres sont l'un des principaux outils de navigation. Les utilisateurs de lecteurs d'écran appuient fréquemment sur une touche de raccourci (typiquement « H ») pour sauter de titre en titre, parcourant la structure de la page de la même manière qu'un utilisateur voyant la scrute visuellement. Si vos titres manquent, sont dans le désordre ou sont utilisés pour le style visuel plutôt que la structure, les utilisateurs de lecteurs d'écran perdent cette capacité à naviguer efficacement. Les Web Content Accessibility Guidelines (WCAG) traitent spécifiquement de la structure des titres. Le critère de succès 1.3.1 exige que les informations et les relations véhiculées par la présentation soient déterminables par programme. En pratique, cela signifie que vos niveaux de titre doivent refléter la hiérarchie réelle du contenu, pas juste être beaux à voir.
Erreurs courantes de titres dans WordPress
Les sites WordPress sont particulièrement enclins aux problèmes de titres car la structure des titres est partagée entre le thème et l'éditeur de contenu :
- Plusieurs balises H1 : c'est le problème le plus courant. Certains thèmes affichent le titre du site comme H1 dans l'en-tête et entourent aussi le titre de la page/article d'un H1. Cela donne à la page deux titres principaux concurrents. Bien que Google ait dit que plusieurs H1 sont « acceptables » sans pénalité, un seul H1 énonçant clairement le sujet de la page reste l'approche la plus propre.
- Sauter des niveaux de titre : passer directement d'un H2 à un H4, en sautant complètement le H3. Cela brise le plan logique. Les lecteurs d'écran annoncent les niveaux de titre, donc un utilisateur entendant « Titre de niveau 2 » suivi de « Titre de niveau 4 » se demandera ce qui est arrivé au niveau 3.
- Utiliser les titres pour le style : choisir un H3 au lieu d'un H2 parce que la taille de police H3 est plus belle dans le thème. C'est un mauvais usage des titres. La bonne approche est d'utiliser le bon niveau de titre pour la structure puis d'ajuster le CSS pour obtenir l'apparence visuelle voulue.
- Pas de H1 du tout : certains thèmes ou mises en page de constructeur omettent accidentellement le H1, ou le H1 est défini sur le titre du site dans l'en-tête tandis que le contenu réel de la page commence à H2. Chaque page doit avoir exactement un H1 décrivant son sujet principal.
- Titres dans les widgets et les barres latérales : les widgets WordPress affichent souvent des titres H2 ou H3 pour les titres de widget. Ces titres ne font pas partie de la hiérarchie principale du contenu et peuvent confondre le plan du document. Certains thèmes gèrent cela avec des attributs
aria-, mais beaucoup ne le font pas. - Balises de titre vides : parfois, les thèmes ou constructeurs laissent des balises de titre vides dans le balisage (un
<h2>sans texte). Elles sont invisibles pour les utilisateurs voyants mais déroutent les lecteurs d'écran.
Comment WordPress gère les titres
Dans une configuration WordPress typique, la structure des titres fonctionne comme suit : le thème génère le H1, généralement à partir du titre de l'article ou de la page. Le contenu que vous écrivez dans l'éditeur doit commencer par des titres H2 pour les sections principales et utiliser H3 et en dessous pour les sous-sections. Vous ne devriez presque jamais saisir un H1 dans l'éditeur de contenu, car le thème en affiche déjà un. Si vous utilisez un constructeur de pages ou une page de destination personnalisée où le thème n'affiche pas de H1, alors vous devez en ajouter un vous-même. Avant de publier une page, il est utile de vérifier si le thème affiche un H1 automatiquement, pour éviter les doublons.
Les titres dans l'éditeur de blocs Gutenberg
Gutenberg facilite l'insertion et la gestion des titres. Le bloc Titre vous permet de choisir le niveau (H2 à H6, et H1 si nécessaire) depuis un menu déroulant. Gutenberg inclut aussi une fonction « Plan du document » dans la barre latérale de l'éditeur qui vous montre la structure complète des titres de votre article en un coup d'œil. Si vous sautez un niveau de titre, la vue du plan le signalera avec un avertissement. C'est un outil intégré utile que beaucoup d'utilisateurs WordPress ignorent. Prenez l'habitude de vérifier le plan du document avant de cliquer sur Publier.
Outils pour vérifier et visualiser la structure des titres
Au-delà du plan intégré de Gutenberg, il existe plusieurs façons d'auditer votre structure de titres :
- Extensions de navigateur : l'extension « HeadingsMap » (disponible pour Chrome et Firefox) affiche la hiérarchie des titres de n'importe quelle page sous forme d'arbre repliable. L'outil d'accessibilité « WAVE » met également en évidence les problèmes de titres.
- Extensions SEO : Yoast SEO et Rank Math vérifient tous deux la structure des titres dans le cadre de leur analyse de contenu. Ils vous avertiront en cas de H1 manquant ou d'usage sous-optimal des titres.
- Validateurs en ligne : le W3C Markup Validation Service vérifie votre HTML pour détecter les problèmes structurels, y compris les problèmes d'ordre des titres.
- InspectWP : InspectWP analyse votre page et liste chaque titre dans l'ordre, ce qui facilite le repérage de la hiérarchie complète en un coup d'œil.
Bonnes pratiques pour les titres WordPress
- Un H1 par page : laissez le thème gérer le H1 à partir du titre de l'article/page. N'en ajoutez pas un autre dans le contenu.
- Commencez le contenu à H2 : votre premier titre dans l'éditeur doit être H2, pas H1.
- Ne sautez pas de niveaux : allez H2, puis H3, puis H4. Ne sautez jamais de H2 à H4.
- Utilisez les titres pour la structure, pas le style : si vous voulez du texte plus petit ou plus grand, utilisez des classes CSS au lieu de changer le niveau de titre.
- Gardez des titres descriptifs : « Sécurité » est moins utile que « Bonnes pratiques de sécurité WordPress » pour les lecteurs comme pour les moteurs de recherche.
- Vérifiez le plan du document : utilisez le plan intégré de Gutenberg ou une extension de navigateur avant de publier.
Ce que vérifie InspectWP
InspectWP analyse la structure des titres de votre page WordPress et liste chaque titre dans l'ordre, de H1 à H6. Il détecte les balises H1 manquantes, les balises H1 multiples, les niveaux de titre sautés et les titres vides. Cela vous donne une image claire du plan du document de votre page et vous aide à corriger les problèmes structurels qui affectent à la fois le SEO et l'accessibilité.