Vérifier la structure des titres H1 à H6 d’une page

Comment utiliser l’outil

Collez l’adresse d’une page et cliquez sur « Analyser ». L’outil lit le code HTML de la page, relève chaque titre de H1 à H6 dans l’ordre du document et l’affiche en escalier : plus le niveau est profond, plus la ligne est décalée. Au-dessus de l’arbre, le nombre de titres de chaque niveau. Sous l’arbre, un tableau de six contrôles : le H1, les niveaux sautés, les titres vides, les titres répétés, les titres longs et les titres masqués.

Chaque contrôle porte un état. « OK » veut dire que rien n’est à signaler, « À noter » que le point mérite un regard sans être une faute établie, « À revoir » que la structure s’écarte de ce que recommandent le W3C et MDN. L’outil ne calcule aucune note : une page peut avoir plusieurs H1 et se positionner très bien, et un site peut avoir une structure parfaite et rien à dire. Chaque remarque renvoie à sa source, listée en bas de page.

Pour tester une page avant de la publier, ouvrez « Tester un HTML avant de le publier » et collez le code. Il est analysé dans votre navigateur, sans être envoyé nulle part. Le champ « Signaler les titres de plus de » reste vide par défaut : aucune longueur maximale n’est publiée, l’outil n’en choisit donc pas à votre place.

Ce que Google dit des titres

Le guide de démarrage SEO de Google contient un passage sur le nombre et l’ordre des titres. Pour les lecteurs d’écran, un ordre sémantique est très bien ; pour la recherche Google, les titres peuvent être dans le désordre, cela n’a pas d’importance. Il n’existe pas non plus de nombre idéal de titres pour une page.¹ Le même guide recommande de fournir des titres pour aider les utilisateurs à parcourir les pages.¹ Google n’attend donc pas une arborescence parfaite : la structure sert d’abord les lecteurs, et le reste du travail se fait dans le texte.

Sur le H1, la position de Google est ancienne et constante. Lors d’une session de questions de septembre 2019 rapportée par Search Engine Journal, John Mueller a répondu que le nombre de H1 n’a pas de limite, ni basse ni haute, qu’un site se positionne aussi bien sans H1 qu’avec cinq, et qu’avec HTML5 plusieurs H1 sur une page sont courants.² En mai 2021, le même média rapporte une vidéo de Google où Mueller dit que les systèmes de Google n’ont pas de problème avec plusieurs H1, et une autre réponse selon laquelle une page sans H1 peut se positionner sur des mots présents dans un H2.³ L’auteur de l’article désapprouve pour sa part l’usage de plusieurs H1.

Un H1 ou plusieurs : deux lectures qui ne se contredisent pas

MDN reconnaît que le standard HTML permet plusieurs éléments h1, mais juge cela mauvaise pratique : une page doit généralement avoir un seul h1, qui décrit son contenu.⁴ Les exemples du tutoriel du W3C sur les titres montrent un seul h1, le titre principal de la page.⁵ La question change selon l’interlocuteur. Pour Google, le nombre de H1 est sans conséquence sur le classement. Pour une personne qui navigue au lecteur d’écran, un H1 unique dit clairement de quoi parle la page.

L’outil suit cette séparation. Un seul H1 est marqué « OK ». Aucun H1 ou plusieurs H1 sont marqués « À noter », jamais « À revoir », avec les deux avis côte à côte. La décision vous revient : sur un modèle de page d’un site vitrine, un H1 unique reste le choix le plus simple à défendre ; sur un gabarit qui répète un bloc, plusieurs peuvent se justifier.

Niveaux sautés et accessibilité

Les titres s’emboîtent par rang. Le tutoriel du W3C demande de les imbriquer par niveau, et prévient que sauter des rangs peut dérouter et doit être évité quand c’est possible : un h2 ne devrait pas être suivi directement d’un h4.⁵ MDN donne la raison : les personnes qui utilisent un lecteur d’écran passent de titre en titre pour saisir vite le contenu d’une page, et si un niveau manque, elles peuvent se demander où est passé le titre manquant.⁴

Les deux sources apportent la même nuance. Remonter de plusieurs rangs d’un coup, par exemple passer d’un h4 à un h2 en fermant une sous-section, est normal. Le W3C ajoute une exception pour les zones fixes comme les colonnes latérales, dont les rangs ne doivent pas changer selon le contenu principal : la cohérence entre les pages y passe avant.⁵ L’outil ne signale donc que les descentes de plus d’un rang. Il affiche aussi la zone de chaque titre (menu, en-tête, pied de page, colonne latérale), pour que vous voyiez si un saut vient du contenu ou d’un gabarit.

MDN rappelle enfin qu’il ne faut pas choisir un niveau de titre pour obtenir une taille de texte : la taille se règle en CSS.⁴ Le critère 2.4.6 des règles d’accessibilité WCAG 2.2, de niveau AA, demande que les titres, quand ils existent, décrivent le sujet ou la finalité du contenu.⁶ Et la technique H42 rappelle que le balisage de titre permet aux technologies d’assistance d’annoncer un texte comme un titre, avec son niveau.⁷

Titres vides, répétés, longs ou masqués

Un titre vide est une balise h2 ou h3 sans texte, ou dont le texte est une image sans alternative. Les lecteurs d’écran passent de titre en titre⁴ : un titre vide est un arrêt qui n’annonce rien. L’outil lit le texte alternatif d’une image placée dans un titre, et l’indique dans l’arbre pour que vous sachiez d’où vient le texte.

Des titres identiques sont signalés « À noter ». Le critère 2.4.6 du W3C attend des titres qui décrivent chacun leur section ;⁶ deux sections qui portent le même titre ne se distinguent plus dans la liste des titres. Sur une page de questions, de fiches produit ou de tarifs, la répétition est parfois voulue, d’où l’état « À noter » et non « À revoir ».

La longueur d’un titre ne fait l’objet d’aucune règle publiée chez Google ni au W3C. L’outil affiche donc la longueur de chaque titre, nomme le plus long, et ne le juge que si vous fixez vous-même un seuil. Les titres masqués par un attribut hidden, un attribut aria-hidden ou un style display:none en ligne sont grisés dans l’arbre : ils comptent dans la structure du code mais ne s’affichent pas.

Ce que l’outil voit, et ce qu’il ne voit pas

Pour une adresse, la requête part du serveur de nemociment.fr, qui lit le code HTML de la page, suit jusqu’à cinq redirections et ne renvoie à votre navigateur que la liste des titres, pas la page. Le code est lu avant exécution du JavaScript : un titre ajouté par un script n’apparaît pas, et il se peut que Google, qui exécute le JavaScript, en voie plus que l’outil. Les titres déclarés avec role="heading" et aria-level sont lus comme les balises h1 à h6. Les feuilles de style externes ne sont pas lues, donc un titre caché par une classe CSS n’est pas repéré comme masqué. L’outil lit 1,5 Mo de code au plus, affiche 500 titres au plus et accepte 20 analyses par tranche de 10 minutes.

Après le diagnostic

La structure des titres se règle en même temps que le titre de page et la description : le testeur de title et de meta description vérifie la longueur de ce que Google affiche dans les résultats, alors que cet outil examine ce que la page montre une fois ouverte. Les titres servent aussi de repères pour les liens entre vos pages, un sujet que le guide du maillage interne détaille. Et sur un site entier, avec ses gabarits, ses pages de catégories et ses articles, la structure des titres se contrôle modèle de page par modèle de page, un point que je vérifie dans l’audit SEO que je mène pour mes clients.

Questions fréquentes