La hiérarchie des titres sur une page web ne se réduit pas à un simple aspect de présentation : on ne choisit pas un titre <h2> ou <h4> parce que cela nous paraît plus esthétique ou plus ou moins grand.
La hiérarchie des titres occupe une place centrale en matière d’accessibilité, de lisibilité… et de référencement naturel. Cependant, ce principe élémentaire est fréquemment ignoré.
Dans cet article, nous allons examiner comment organiser vos pages en utilisant les balises HTML <h1> à <h6> et pourquoi cela favorise en même temps l’expérience utilisateur et le référencement naturel.
Pourquoi est-il important d’organiser ses contenus avec des titres ?
- Structurer logiquement la page : les titres aident les lecteurs (et les moteurs de recherche) à saisir l’agencement et les idées principales de votre contenu.
- Favoriser la lecture rapide : en parcourant une page, un internaute repère plus aisément ce qui l’attire avec de bons titres.
- Optimiser l’accessibilité : les lecteurs d’écran se servent de la hiérarchie des titres pour parcourir la page.
- Ajouter une table des matières en début d’article ou de page.
- Optimiser le SEO : Google utilise les titres pour comprendre le sujet de la page et indexer les contenus de façon appropriée.
Imaginez-vous lire un livre sans titre, sans chapitres, ni sous-titres. Vous seriez perdu au bout de quelques lignes. Un site bien structuré, une page correctement architecturée, c’est comme une table des matières visuelle : on sait ce qu’on va lire, où on en est, et où l’on va.
Les balises de <h1> à <h6> : Comment cela fonctionne-t-il ?
<h1>est le titre principal de la page. Il doit être unique et doit correspondre au titre de l’article ou de la page : c’est ce dernier qui présente le thème principal. C’est également l’emplacement parfait pour positionner votre mot-clé principal.<h2>définit les principales sections du contenu.<h3>sert à détailler les sections d’un<h2>, et ce jusqu’à<h6>.- Les titres ne sont pas une question de style visuel, mais de structure sémantique.
Les bonnes pratiques dans la hiérarchisation de votre contenu
- Un seul
<h1>par page, utilisé pour le titre principal (h1 = « titre du document »). - Ne pas sauter de niveau. On ne passe pas de
<h2>à<h4>directement. - Utiliser les titres pour segmenter le contenu : chaque titre introduit un nouveau thème ou sous-thème.
- Être clair, concis et descriptif dans vos titres : cela aidera aussi les moteurs de recherche.
Soyez vigilant avec les éléments insérés automatiquement : certains thèmes, widgets ou extensions peuvent insérer des balises de titre (<h2>, <h3>, etc.) dans des zones comme les barres latérales, les pieds de page, les zones de commentaire, etc. Il est crucial de surveiller ces éléments pour éviter de polluer la structure principale de votre page avec des titres qui ne sont pas liés au contenu éditorial.
Parfois, comme ci-dessus, l’erreur peut être subtile et ne pas avoir beaucoup d’impact. Il s’agit toujours de l’article Nom de domaine vs hébergement : quelles différences ? : trouverez-vous l’erreur qui se cache derrière cette capture d’écran ?
Est-il possible d’avoir plusieurs balises <h1> dans une même page ?
Techniquement, oui : HTML5 autorise l’usage de plusieurs balises <h1> à condition qu’elles soient correctement organisées au sein de sections distinctes (<article>, <aside>, <nav>, etc.). Par exemple :
<article>
<h1>Titre de l’article</h1>
</article>
<aside>
<h1>Autres ressources</h1>
</aside>Cependant, en termes de SEO et de lisibilité, les recommandations actuelles sont plus nuancées.
Ce que Google en dit :
Selon la documentation officielle de Google, il est conseillé d’employer une unique balise <h1> par page, afin de matérialiser le titre principal du contenu :
“Use a unique level‑1 heading (
h1) for each page in a set of documents and only use a level‑1 heading once on a page.” (Traduction : Pour chaque page d’un ensemble de documents, employez un seul en-tête de niveau 1 (h1) et ne le réutilisez pas sur une même page.)
Source (en anglais) : Google Developer Style Guide
Mais par ailleurs, John Mueller (Senior Search Analyst chez Google) a précisé dans une vidéo que Google sait très bien gérer plusieurs balises <h1> si besoin :
“Our systems don’t have a problem when it comes to multiple h1 headings on a page.” (Traduction : nos systèmes n’ont pas de problème lorsqu’il y a plusieurs titres h1 sur une page.)
Source (en anglais) : Chaîne Youtube Google Search Central
Même si Google peut interpréter plusieurs <h1>, il reste préférable dans la majorité des cas de n’utiliser qu’un seul <h1> par page, correspondant au sujet principal.
En cas de doute, suivez simplement la logique naturelle de votre contenu : chaque titre doit introduire une idée ou une section pertinente, comme vous le feriez dans un sommaire ou un plan structuré.
Hiérarchie des titres et SEO : ce qu’il faut retenir
- Une structure logique permet à Google de comprendre votre contenu.
- Des titres bien choisis peuvent intégrer vos mots-clés naturellement.
- Une page bien organisée retient davantage les visiteurs, améliorant ainsi l’expérience utilisateur et, par extension, votre positionnement SEO.
Quelle méthode pour vérifier la hiérarchie de vos titres ?
Si vous avez des doutes sur la structure de votre contenu, vous pouvez utiliser une extension de navigateur pour visualiser la hiérarchie de vos balises de titres. Une extension pour navigateur est une petite application qui offre des fonctionnalités additionnelles à votre navigateur internet (tels que Chrome, Firefox, Safari ou Edge). Ici, nous allons utiliser l’extension Web Developer par chrispederick.
- Lien pour installer Web Developer pour Chrome
- Lien pour installer Web Developer pour Firefox
À noter : l’extension Web Developer n’est pas disponible pour Safari. Pour Edge, vous pouvez installer la version Chrome depuis le Chrome Web Store.
Pour visualiser la structure de sa page avec l’extension Web Developer :
- Cliquez sur l’icône de l’extension Web Developer
- Allez dans l’onglet Information.
- Cliquez sur le lien View Document Outline
Un nouvel onglet s’ouvre et vous affiche une vue structurée des balises de titres. C’est idéal pour repérer les erreurs de hiérarchie dans la page.
Ce qu’il faut retenir
La hiérarchie des titres n’est pas qu’un détail technique : c’est la colonne vertébrale de votre page web. En suivant quelques règles élémentaires, vous améliorez la lisibilité de vos contenus, leur accessibilité… et leur performance SEO. Si vous débutez, commencez par revoir vos balises <h1>, <h2>, <h3> : c’est déjà un excellent début !
Photo de l’image mise en avant : merci à Werner Moser
