Structurer ses balises Hn : la hiérarchie qui aide Google à lire votre page

Les balises H1 à H6 ne sont pas un outil de mise en forme, même si c'est souvent ainsi qu'elles sont utilisées en pratique par des personnes qui découvrent le développement web à travers des éditeurs visuels plutôt que par l'apprentissage direct du HTML. Ce sont des repères de structure sémantique que les navigateurs, les lecteurs d'écran, et les moteurs de recherche exploitent pour comprendre l'organisation logique d'une page avant même d'en analyser le contenu en détail. Confondre structure sémantique et style visuel — choisir une balise Hn parce qu'elle a le bon rendu graphique plutôt que parce qu'elle introduit réellement une section du document — est l'erreur la plus répandue sur ce sujet, et l'une des plus anciennes du web, puisqu'elle remonte aux tout premiers éditeurs de sites qui associaient directement chaque niveau de titre à une taille de police prédéfinie.

Pourquoi la hiérarchie compte

Imaginez la table des matières d'un livre technique : un titre de chapitre, puis des sous-titres de section, puis éventuellement des sous-sous-titres pour les points de détail. Cette structure permet de survoler le document et d'en saisir l'organisation générale sans tout lire dans l'ordre — c'est exactement ce rôle que jouent les balises Hn pour une page web, à condition qu'elles soient utilisées de façon cohérente et qu'elles reflètent réellement l'organisation logique du contenu plutôt qu'un choix esthétique arbitraire.

Un lecteur d'écran, utilisé par les personnes malvoyantes ou aveugles pour naviguer sur le web, permet de se déplacer directement de titre en titre sans parcourir tout le texte intermédiaire — une fonctionnalité de navigation rapide qui ne fonctionne correctement que si la hiérarchie des titres est cohérente et complète. Sans cette fonctionnalité, une personne utilisant un lecteur d'écran devrait écouter l'intégralité du contenu de la page dans l'ordre linéaire pour en comprendre la structure, ce qui rend la navigation extrêmement laborieuse sur un contenu long.

Les robots d'indexation, de leur côté, s'appuient sur cette même structure pour identifier rapidement les sujets traités sur une page et leur importance relative les uns par rapport aux autres. Une page dont la hiérarchie de titres reflète fidèlement son contenu facilite ce travail d'analyse automatique, tandis qu'une page sans structure claire, ou avec une structure incohérente, oblige l'algorithme à s'appuyer davantage sur une analyse du texte brut, plus coûteuse en ressources et potentiellement moins précise dans l'identification des sujets réellement traités.

Un H1 par page, qui décrit le sujet réel

La norme HTML5 autorise techniquement plusieurs balises H1 sur une même page, notamment dans le contexte de sections indépendantes délimitées par les balises <section> ou <article>, chacune pouvant théoriquement porter son propre H1 selon l'algorithme de structuration défini par la spécification. Dans la pratique du référencement, et malgré cette possibilité technique, la convention qui reste la plus fiable et la plus largement recommandée consiste à n'avoir qu'un seul H1 par page, correspondant au sujet principal traité — un choix qui simplifie considérablement l'analyse de la page, aussi bien pour un robot d'indexation que pour un humain qui la survole rapidement sans lire l'intégralité du contenu.

Le H1 n'est pas nécessairement identique à la balise <title> qui apparaît dans l'onglet du navigateur et dans les résultats de recherche : le title s'adresse d'abord à l'utilisateur qui compare des résultats de recherche et doit convaincre en une ligne courte de cliquer sur ce résultat plutôt qu'un autre, tandis que le H1 s'adresse au lecteur déjà arrivé sur la page, qui a besoin de confirmer rapidement qu'il est au bon endroit et que le contenu correspond bien à ce qu'il cherchait. Les deux balises peuvent donc porter des formulations légèrement différentes tout en restant cohérentes sur le fond et en évitant toute contradiction qui pourrait dérouter le visiteur ou l'algorithme.

Ne pas sauter de niveau

Un H1 suivi directement d'un H4, sans H2 ni H3 intermédiaires, casse la hiérarchie logique du document de façon similaire à un plan de dissertation qui passerait directement d'une partie à une sous-sous-partie sans transition intermédiaire. Ce n'est pas une erreur qui empêche techniquement l'indexation de la page — Google continuera à explorer et indexer normalement une page avec une hiérarchie de titres incohérente — mais elle rend la structure illisible pour tout outil d'analyse automatique qui tenterait de reconstruire un plan cohérent à partir des seules balises, qu'il s'agisse d'un robot d'indexation ou d'un outil d'accessibilité.

Concrètement, la hiérarchie devrait toujours descendre d'un niveau à la fois : H1 pour le titre principal de la page, puis H2 pour chacune des sections principales qui composent le contenu, puis H3 pour les sous-sections à l'intérieur de chaque H2 si un niveau de détail supplémentaire est nécessaire, et ainsi de suite jusqu'à H6 si la profondeur du contenu le justifie réellement — ce qui reste rare en pratique pour la plupart des pages web, qui n'ont généralement besoin que de deux ou trois niveaux de hiérarchie pour rester lisibles. Remonter d'un niveau (passer d'un H3 à un H2) est en revanche parfaitement normal et attendu, puisque cela correspond simplement au début d'une nouvelle section principale après la fin d'une sous-section précédente.

Titres vides, décoratifs, ou utilisés pour le style

Utiliser une balise Hn uniquement parce qu'elle produit un rendu visuel agréable — gros, gras, bien espacé par rapport au texte environnant — sur un texte qui n'introduit aucune section réelle du contenu (un slogan publicitaire, un intitulé de bouton d'action, une légende d'image, une citation mise en avant visuellement) dilue le signal sémantique que la hiérarchie est censée porter. Ce réflexe est particulièrement fréquent chez les personnes qui construisent des pages sans connaissance approfondie du HTML sous-jacent, en s'appuyant sur des éditeurs visuels de type "glisser-déposer" qui associent implicitement chaque niveau de titre disponible dans leur interface à une taille de police prédéfinie plutôt qu'à un rôle structurel dans le document.

La bonne pratique inverse complètement ce raisonnement intuitif mais erroné : définir d'abord le rôle sémantique de chaque élément du contenu — est-ce que ce texte introduit réellement une nouvelle section, ou est-ce un élément décoratif qui n'a pas vocation à apparaître dans un plan structurel de la page — puis ajuster son apparence visuelle uniquement en CSS, qui est justement le langage conçu pour cela et qui permet de dissocier complètement l'apparence visuelle de la structure sémantique sous-jacente. Un texte peut ainsi visuellement ressembler à un grand titre en gras sans pour autant être encodé comme une balise Hn, s'il ne joue pas ce rôle structurel dans le document.

Le cas des pages longues et des articles de blog

Sur un contenu long — un article de blog approfondi comme celui-ci, une page de documentation technique, un guide détaillé — une hiérarchie de titres bien construite a un bénéfice supplémentaire directement visible dans les résultats de recherche : elle augmente les chances d'apparaître dans un extrait enrichi de type "table des matières" ou "liens de saut" (jump links), où Google affiche directement des liens cliquables vers les sections internes de la page sous le résultat principal. Cette fonctionnalité repose entièrement sur une structure Hn cohérente et sur des intitulés de section suffisamment explicites et autonomes pour être compréhensibles hors de leur contexte immédiat, sans nécessiter la lecture du paragraphe qui précède pour en saisir le sens.

Sur ce type de contenu, une pratique complémentaire consiste à faire correspondre les intitulés de section aux questions ou sous-thèmes que se pose réellement le lecteur en abordant le sujet, plutôt qu'à une formulation abstraite qui ne prendrait sens qu'en contexte. Un titre de section formulé comme "Ne pas sauter de niveau" est plus directement compréhensible et plus utile pour la navigation qu'un intitulé générique comme "Point technique numéro trois", qui ne dit rien du contenu réel de la section sans lecture préalable.

Le lien entre structure de titres et accessibilité numérique

Au-delà du référencement, la structure des titres est l'un des critères les plus fondamentaux des standards d'accessibilité numérique, en particulier les Web Content Accessibility Guidelines (WCAG) qui font référence internationalement en la matière. Une hiérarchie de titres cohérente permet à une personne utilisant un lecteur d'écran de comprendre en quelques secondes si une page correspond à ce qu'elle cherche, sans devoir écouter l'intégralité du contenu — un gain de temps et d'autonomie considérable, en particulier sur les sites institutionnels ou administratifs où l'accessibilité numérique fait souvent l'objet d'obligations légales spécifiques selon les pays et les secteurs concernés.

Cette convergence entre bonne pratique de référencement et bonne pratique d'accessibilité n'est pas un hasard : les deux disciplines s'appuient sur le même principe fondamental, à savoir qu'un document bien structuré sémantiquement est plus facilement exploitable par n'importe quel système d'analyse automatique, qu'il s'agisse d'un robot d'indexation cherchant à comprendre le sujet d'une page ou d'une technologie d'assistance cherchant à en restituer la structure à un utilisateur qui ne peut pas voir directement la mise en page visuelle.

Comment auditer sa propre hiérarchie

La méthode la plus simple ne demande aucun outil spécialisé : ouvrir l'inspecteur du navigateur intégré (accessible via un clic droit puis "Inspecter" dans la plupart des navigateurs modernes), extraire uniquement la liste des balises Hn dans l'ordre où elles apparaissent dans le code source de la page, et vérifier que cette liste, lue seule et détachée de son contexte visuel, forme un plan cohérent et compréhensible du contenu de la page. Si ce plan ne fait pas sens sans le reste du texte environnant, ou s'il révèle des sauts de niveau inattendus, la structure mérite d'être revue et corrigée dans le gabarit concerné.

Des extensions de navigateur dédiées à l'accessibilité ou au référencement permettent d'automatiser cette extraction et d'afficher visuellement la hiérarchie sous forme d'arborescence indentée, ce qui rend les sauts de niveau et les incohérences beaucoup plus visibles qu'une simple lecture linéaire du code source, en particulier sur des pages avec un grand nombre de sections et de sous-sections.

L'algorithme de structuration HTML5 et ses limites pratiques

La spécification HTML5 a introduit un algorithme théorique de structuration du document, censé permettre de déduire un plan hiérarchique cohérent même en présence de plusieurs balises H1 réparties dans différentes sections indépendantes du document, chacune délimitée par les balises <section> ou <article>. En théorie, cet algorithme permettrait à un navigateur ou à un outil d'analyse de reconstituer correctement la hiérarchie logique d'un document même sans respecter la convention classique du H1 unique évoquée plus haut dans cet article.

En pratique cependant, cet algorithme de structuration n'a jamais été implémenté de façon cohérente par l'ensemble des navigateurs et des technologies d'assistance, et son adoption reste aujourd'hui largement incomplète et disparate selon les outils considérés. Cette situation explique pourquoi la convention pragmatique du H1 unique par page, bien que plus restrictive que ce que permettrait théoriquement la norme HTML5, reste la recommandation la plus fiable et la plus largement partagée dans l'industrie du référencement et de l'accessibilité, précisément parce qu'elle ne dépend d'aucune implémentation technique incertaine ou incomplète pour produire un résultat prévisible et cohérent quel que soit l'outil utilisé pour analyser la page.

Le cas des composants d'interface : accordéons, onglets, carrousels

Les interfaces web modernes intègrent fréquemment des composants interactifs comme des accordéons dépliables, des systèmes d'onglets, ou des carrousels de contenu, dont le contenu n'est pas nécessairement visible dans son intégralité au premier chargement de la page. La question de savoir si les titres associés à ces composants doivent porter une balise Hn se pose régulièrement, et la réponse dépend principalement de la nature réelle du contenu concerné : si le contenu masqué initialement constitue une section à part entière du sujet traité par la page, il mérite logiquement une balise Hn au niveau approprié de la hiérarchie, même si ce contenu n'est visuellement révélé qu'après une interaction de l'utilisateur.

Un piège fréquent sur ce type de composant consiste à masquer entièrement le contenu replié via une propriété CSS comme display: none, ce qui peut dans certains cas conduire les moteurs de recherche à accorder moins d'importance à ce contenu par rapport à un contenu immédiatement visible sans interaction — une nuance à garder à l'esprit sur les pages de FAQ construites sous forme d'accordéon, où l'intégralité des questions et réponses gagne généralement à rester présente dans le code source de la page, indépendamment de leur état visuel replié ou déplié par défaut à l'affichage initial.

Le rôle complémentaire des landmarks ARIA

En complément de la hiérarchie de titres Hn, les landmarks ARIA (Accessible Rich Internet Applications) constituent un second niveau de structuration sémantique du document, cette fois centré non pas sur le contenu textuel lui-même mais sur les grandes zones fonctionnelles de la page : l'en-tête principal, la navigation, le contenu principal, la barre latérale, le pied de page. Des balises HTML5 natives comme <header>, <nav>, <main>, <aside> et <footer> remplissent aujourd'hui largement ce rôle sans nécessiter d'attributs ARIA explicites supplémentaires dans la majorité des cas simples, les attributs ARIA restant surtout utiles pour les composants d'interface personnalisés qui n'ont pas d'équivalent natif direct en HTML5.

Ces deux systèmes de structuration, hiérarchie de titres et landmarks de zones fonctionnelles, sont complémentaires et non redondants : la hiérarchie de titres organise le contenu informationnel proprement dit, tandis que les landmarks organisent l'espace fonctionnel global de la page. Une page bien structurée sur les deux plans simultanément offre l'expérience de navigation la plus fluide possible, aussi bien pour un lecteur d'écran que pour un robot d'indexation cherchant à comprendre rapidement l'organisation générale du document.

Erreurs spécifiques aux systèmes de gestion de contenu prêts à l'emploi

Les sites construits sur des systèmes de gestion de contenu généralistes, avec des thèmes visuels prêts à l'emploi non spécifiquement conçus pour le site en question, présentent souvent des erreurs de structure de titres qui échappent au contrôle direct du rédacteur de contenu, puisqu'elles sont encodées directement dans le thème visuel lui-même plutôt que dans le contenu rédigé au cas par cas. Un thème peut par exemple encoder systématiquement le nom du site ou le slogan affiché dans l'en-tête en tant que balise H1 sur chaque page du site, laissant alors le titre réel de l'article ou de la page en balise H2, ce qui inverse involontairement l'ordre de priorité hiérarchique attendu.

Ce type d'erreur, particulièrement fréquent et pourtant rarement identifié sans un audit technique dédié, mérite une vérification systématique lors du choix ou de la personnalisation d'un thème visuel, puisqu'elle affecte potentiellement l'intégralité des pages du site simultanément plutôt qu'une page isolée, avec un effet cumulé bien plus significatif qu'une simple erreur ponctuelle limitée à une seule publication.

Questions fréquentes

Deux H1 sur la même page, est-ce pénalisé par Google ? Ce n'est pas une pénalité au sens strict — Google ne rejette pas la page pour autant et continue à l'indexer normalement — mais cela affaiblit la clarté du signal envoyé sur le sujet principal de la page, en particulier si les deux H1 traitent de sujets différents plutôt que de reformuler simplement le même sujet principal sous deux angles complémentaires.

Le nombre de H2 sur une page a-t-il une importance particulière ? Non, il n'existe pas de nombre optimal universel applicable à tous les contenus. Le bon repère reste la cohérence avec le contenu réel de la page : autant de H2 que de sections logiquement distinctes composant le sujet traité, ni plus ni moins, sans chercher à atteindre un nombre arbitraire pour des raisons de référencement supposées.

Faut-il inclure des mots-clés dans les balises H2 et H3 ? C'est une pratique raisonnable quand elle reste naturelle et cohérente avec le sujet réel de la section concernée, mais forcer artificiellement un mot-clé dans chaque sous-titre au détriment de la clarté produit généralement un résultat contre-productif, aussi bien pour la lisibilité humaine que pour la perception de qualité éditoriale du contenu.

Une page sans aucune balise Hn peut-elle être pénalisée ? Il n'existe pas de pénalité automatique documentée pour l'absence totale de structure Hn, mais cette absence prive la page d'un signal utile à la fois pour le référencement et pour l'accessibilité, et complique la compréhension rapide du contenu aussi bien pour un algorithme que pour un visiteur humain qui parcourt la page en diagonale avant de décider s'il va la lire en détail.

La longueur d'un titre Hn a-t-elle une importance particulière ? Il n'existe pas de limite stricte documentée, mais un titre de section démesurément long perd une partie de son utilité pratique, aussi bien pour la navigation rapide d'un lecteur d'écran que pour la lisibilité visuelle d'ensemble. Un titre de section formulé en une phrase courte et directe reste généralement plus efficace qu'une formulation longue et complexe qui se rapproche davantage d'un paragraphe que d'un véritable titre.

Peut-on modifier la structure des titres d'une page déjà publiée et bien positionnée sans risque ? Une réorganisation prudente et cohérente de la hiérarchie, qui clarifie la structure sans changer le sujet de fond traité par la page, ne présente généralement pas de risque particulier pour le classement déjà obtenu. Il reste recommandé de procéder par étapes mesurées plutôt que par une refonte radicale et simultanée de nombreuses pages à la fois, pour pouvoir isoler l'effet de chaque changement si une variation de performance venait à être observée par la suite.

Le H1 doit-il obligatoirement apparaître visuellement en haut de la page ? Non, rien n'impose sa position visuelle exacte dans la mise en page, seulement sa position dans l'ordre logique du code source et son rôle sémantique de titre principal. Dans la pratique cependant, le placer visuellement en haut du contenu principal reste la convention la plus intuitive à la fois pour les visiteurs et pour la cohérence entre structure visuelle et structure sémantique du document.

Un menu de navigation ou un pied de page doivent-ils contenir des balises Hn ? Généralement non, ces zones relèvent davantage des landmarks structurels évoqués plus haut (nav, footer) que de la hiérarchie de titres du contenu proprement dit. Certains gabarits y insèrent malgré tout des balises Hn pour des raisons de style visuel hérité, ce qui rejoint l'erreur de confusion entre présentation et sémantique déjà discutée dans cet article.

Seoditum vérifie ce point automatiquement, avec preuve à l'appui, sur l'ensemble de votre site.