Hiérarchie des titres HTML : structurez vos pages web pour le SEO et l’expérience utilisateur

La hié­rar­chie des titres sur une page web ne se réduit pas à un simple aspect de pré­sen­ta­tion : on ne choi­sit pas un titre <h2> ou <h4> parce que cela nous paraît plus esthé­tique ou plus ou moins grand. 

La hié­rar­chie des titres occupe une place cen­trale en matière d’ac­ces­si­bi­li­té, de lisi­bi­li­té… et de réfé­ren­ce­ment natu­rel. Cepen­dant, ce prin­cipe élé­men­taire est fré­quem­ment ignoré. 

Dans cet article, nous allons exa­mi­ner com­ment orga­ni­ser vos pages en uti­li­sant les balises HTML <h1> à <h6> et pour­quoi cela favo­rise en même temps l’ex­pé­rience uti­li­sa­teur et le réfé­ren­ce­ment naturel.

Pourquoi est-il important d’organiser ses contenus avec des titres ?

• Struc­tu­rer logi­que­ment la page : les titres aident les lec­teurs (et les moteurs de recherche) à sai­sir l’a­gen­ce­ment et les idées prin­ci­pales de votre contenu.
• Favo­ri­ser la lec­ture rapide : en par­cou­rant une page, un inter­naute repère plus aisé­ment ce qui l’at­tire avec de bons titres.
• Opti­mi­ser l’ac­ces­si­bi­li­té : les lec­teurs d’é­cran se servent de la hié­rar­chie des titres pour par­cou­rir la page.
• Ajou­ter une table des matières en début d’ar­ticle ou de page.
• Opti­mi­ser le SEO : Google uti­lise les titres pour com­prendre le sujet de la page et indexer les conte­nus de façon appropriée.

Ima­gi­nez-vous lire un livre sans titre, sans cha­pitres, ni sous-titres. Vous seriez per­du au bout de quelques lignes. Un site bien struc­tu­ré, une page cor­rec­te­ment archi­tec­tu­ré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 prin­ci­pal de la page. Il doit être unique et doit cor­res­pondre au titre de l’article ou de la page : c’est ce der­nier qui pré­sente le thème prin­ci­pal. C’est éga­le­ment l’emplacement par­fait pour posi­tion­ner votre mot-clé principal.
• <h2> défi­nit les prin­ci­pales sec­tions du contenu.
• <h3> sert à détailler les sec­tions d’un <h2>, et ce jusqu’à <h6>.
• Les titres ne sont pas une ques­tion de style visuel, mais de struc­ture séman­tique.

Les bonnes pratiques dans la hiérarchisation de votre contenu

• Un seul <h1> par page, uti­li­sé pour le titre prin­ci­pal (h1 = « titre du document »).
• Ne pas sau­ter de niveau. On ne passe pas de <h2> à <h4> directement.
• Uti­li­ser les titres pour seg­men­ter le conte­nu : chaque titre intro­duit un nou­veau thème ou sous-thème.
• Être clair, concis et des­crip­tif dans vos titres : cela aide­ra aus­si les moteurs de recherche.

Soyez vigi­lant avec les élé­ments insé­rés auto­ma­ti­que­ment : cer­tains thèmes, wid­gets ou exten­sions 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 com­men­taire, etc. Il est cru­cial de sur­veiller ces élé­ments pour évi­ter de pol­luer la struc­ture prin­ci­pale de votre page avec des titres qui ne sont pas liés au conte­nu éditorial.

Par­fois, comme ci-des­sus, l’er­reur peut être sub­tile et ne pas avoir beau­coup d’im­pact. Il s’a­git tou­jours de l’ar­ticle Nom de domaine vs héber­ge­ment : quelles dif­fé­rences ? : trou­ve­rez-vous l’er­reur qui se cache der­rière cette cap­ture d’écran ?

Est-il possible d’avoir plusieurs balises <h1> dans une même page ?

Tech­ni­que­ment, oui : HTML5 auto­rise l’u­sage de plu­sieurs balises <h1> à condi­tion qu’elles soient cor­rec­te­ment orga­ni­sées au sein de sec­tions dis­tinctes (<article>, <aside>, <nav>, etc.). Par exemple :

<article>
  <h1>Titre de l’article</h1>
</article>

<aside>
  <h1>Autres ressources</h1>
</aside>

<article>
  <h1>Titre de l’article</h1>
</article>

<aside>
  <h1>Autres ressources</h1>
</aside>

Cepen­dant, en termes de SEO et de lisi­bi­li­té, les recom­man­da­tions actuelles sont plus nuancées.

Ce que Google en dit :

Selon la docu­men­ta­tion offi­cielle de Google, il est conseillé d’employer une unique balise <h1> par page, afin de maté­ria­li­ser le titre prin­ci­pal du contenu :

“Use a unique level‑1 hea­ding (h1) for each page in a set of docu­ments and only use a level‑1 hea­ding once on a page.” (Tra­duc­tion : Pour chaque page d’un ensemble de docu­ments, employez un seul en-tête de niveau 1 (h1) et ne le réuti­li­sez pas sur une même page.)
Source (en anglais) : Google Deve­lo­per Style Guide

Mais par ailleurs, John Muel­ler (Senior Search Ana­lyst chez Google) a pré­ci­sé dans une vidéo que Google sait très bien gérer plu­sieurs balises <h1> si besoin :

“Our sys­tems don’t have a pro­blem when it comes to mul­tiple h1 hea­dings on a page.” (Tra­duc­tion : nos sys­tèmes n’ont pas de pro­blème lors­qu’il y a plu­sieurs titres h1 sur une page.)
Source (en anglais) : Chaîne You­tube Google Search Central

Même si Google peut inter­pré­ter plu­sieurs <h1>, il reste pré­fé­rable dans la majo­ri­té des cas de n’utiliser qu’un seul <h1> par page, cor­res­pon­dant au sujet principal.

En cas de doute, sui­vez sim­ple­ment la logique natu­relle de votre conte­nu : chaque titre doit intro­duire une idée ou une sec­tion per­ti­nente, comme vous le feriez dans un som­maire ou un plan structuré. 

Hiérarchie des titres et SEO : ce qu’il faut retenir

• Une struc­ture logique per­met à Google de com­prendre votre conte­nu.
• Des titres bien choi­sis peuvent inté­grer vos mots-clés natu­rel­le­ment.
• Une page bien orga­ni­sée retient davan­tage les visi­teurs, amé­lio­rant ain­si l’ex­pé­rience uti­li­sa­teur et, par exten­sion, votre posi­tion­ne­ment SEO.

Quelle méthode pour vérifier la hiérarchie de vos titres ?

Si vous avez des doutes sur la struc­ture de votre conte­nu, vous pou­vez uti­li­ser une exten­sion de navi­ga­teur pour visua­li­ser la hié­rar­chie de vos balises de titres. Une exten­sion pour navi­ga­teur est une petite appli­ca­tion qui offre des fonc­tion­na­li­tés addi­tion­nelles à votre navi­ga­teur inter­net (tels que Chrome, Fire­fox, Safa­ri ou Edge). Ici, nous allons uti­li­ser l’exten­sion Web Deve­lo­per par chris­pe­de­rick.

• Lien pour ins­tal­ler Web Deve­lo­per pour Chrome
• Lien pour ins­tal­ler Web Deve­lo­per pour Firefox

À noter : l’ex­ten­sion Web Deve­lo­per n’est pas dis­po­nible pour Safa­ri. Pour Edge, vous pou­vez ins­tal­ler la ver­sion Chrome depuis le Chrome Web Store.

Pour visualiser la structure de sa page avec l’extension Web Developer :

1. Cli­quez sur l’i­cône de l’ex­ten­sion Web Developer
2. Allez dans l’on­glet Infor­ma­tion.
3. Cli­quez sur le lien View Docu­ment Outline

Un nou­vel onglet s’ouvre et vous affiche une vue struc­tu­rée des balises de titres. C’est idéal pour repé­rer les erreurs de hié­rar­chie dans la page.

Ce qu’il faut retenir

La hié­rar­chie des titres n’est pas qu’un détail tech­nique : c’est la colonne ver­té­brale de votre page web. En sui­vant quelques règles élé­men­taires, vous amé­lio­rez la lisi­bi­li­té de vos conte­nus, leur acces­si­bi­li­té… et leur per­for­mance SEO. Si vous débu­tez, com­men­cez par revoir vos balises <h1>, <h2>, <h3> : c’est déjà un excellent début !

Pho­to de l’image mise en avant : mer­ci à Wer­ner Moser