Structure des titres SEO

Comment fonctionne cette vérification

Scanaris compte les balises <h1> du HTML de ta page. Le résultat correct est exactement une. S'il n'y en a aucune, il ouvre un constat de sévérité moyenne : ni Google ni un lecteur d'écran ne savent quel est le sujet principal. S'il y en a deux ou plus, il en ouvre un de sévérité faible avec le décompte : plusieurs titres principaux diluent ce dont parle la page. Seul le HTML servi est examiné, sans exécuter de JavaScript, et seulement la page analysée.

Pourquoi c'est important

Le <h1> est le titre de la page, la première chose qu'un lecteur d'écran annonce et l'un des signaux les plus clairs dont dispose Google pour comprendre le sujet. Une page sans h1 est comme un article sans titre : le moteur doit le déduire du reste. Plusieurs h1 ne sont pas une erreur HTML, mais ils dispersent ce signal : si ta page produit a le nom du produit, le slogan et « Avis » tous en h1, aucun des trois n'est le sujet. Et c'est la base du reste de la hiérarchie : les h2 divisent le contenu en sections, les h3 subdivisent, et c'est ainsi que navigue celui qui utilise le clavier ou un lecteur d'écran, et ainsi que les assistants IA découpent ton texte pour le citer.

D'où ça vient

Le cas le plus courant de zéro h1 est le design : le gros texte du hero est un div avec des classes de taille, ou un p, parce que celui qui l'a mis en page a pensé à l'apparence et non à la structure. Dans les applications monopages, le h1 est rendu par JavaScript et n'est pas dans le HTML initial. Le cas des h1 multiples vient souvent des composants : chaque carte, chaque section ou chaque widget apporte son propre h1, ou le logo est enveloppé dans un h1 « pour le SEO », ce qui est un conseil de 2008.

Comment corriger

• Un h1 par page avec le sujet principal, visible et proche du début du contenu. Sur l'accueil, ce que tu fais ; sur un article, son titre ; sur un produit, son nom.
• Le logo n'est pas un h1. C'est un lien vers l'accueil avec le nom de la marque en texte ou en alt.
• Le reste en h2 et h3, sans sauter de niveaux : un h3 va dans une section avec h2. Si une balise ne t'intéresse que pour sa taille, utilise une classe CSS, pas un niveau de titre.
• Dans les composants, accepte le niveau en prop (<Heading :level="2">) au lieu de le fixer à l'intérieur, pour que la même carte soit h2 sur une page et h3 sur une autre.
• Dans une SPA, rends côté serveur au moins la structure de la page ou utilise le prérendu ; sinon, Google voit une page vide avant d'exécuter ton JavaScript.

Vérifie que c'est corrigé

curl -s https://tondomaine.com | grep -oiE '<h[1-6][^>]*>[^<]{0,80}' | sed 's/<\(h[1-6]\)[^>]*>/\1: /'

Une seule ligne doit commencer par h1:, suivie de la hiérarchie des h2 et h3 dans un ordre logique. Si rien ne sort, c'est JavaScript qui rend le contenu et Google ne le voit pas non plus au premier passage.

Questions fréquentes

HTML5 autorise un h1 par section. Pourquoi est-ce signalé ?

La spécification l'autorisait avec l'algorithme d'« outline » par sections, mais aucun navigateur ni lecteur d'écran ne l'a jamais implémenté, et la spécification l'a retiré en 2022. En pratique, un h1 par page reste la recommandation de Google et des règles d'accessibilité.

Mon h1 est masqué en CSS pour que le design reste propre.

Un h1 masqué avec display: none n'est lu ni par Google ni par les lecteurs d'écran. Si tu as besoin qu'il soit invisible mais lu, utilise une classe de texte masqué visuellement (sr-only) ; mais demande-toi si le titre principal de la page devrait vraiment être caché.

Les autres niveaux sont-ils vérifiés ?

Cette vérification ne compte que les h1. Les titres vides sont détectés par accessibilité, et le titre de l'onglet, qui n'est pas la même chose que le h1 même s'ils se ressemblent souvent, est examiné par métadonnées SEO.