Combien faut-il mettre de H1 dans une page?

J’écris cet article en toute humilité, simplement pour vous partager des recherches que j’ai dû effectuer dans le cadre de divers projets et les conclusions qui ont pu en être tirées.

C’est une problématique récurrente, surtout avec les blogues : combien faut-il mettre de H1 dans une page web?

C’est quoi un H1?

C’est la base, petit retour en arrière. Les titres H, aussi appelés titres de niveau 1, en-têtes de section ou titres de section (j’utiliserai cette dernière appellation, car elle me semble la moins ambigüe) sont codés avec des balises <h1> à <h6>. Le <h1> représente le titre le plus important. Le <h6> représente le titre le moins important.

Exemple

<h1>Voici le titre de section</h1>
<h2>Voici le titre de sous-section </h2>
<h3>Voici le titre de sous-sous-section</h3>

Les niveaux de titres de section doivent former une progression continue. Ainsi, il est possible de passer du niveau <h1> au niveau <h2>, du niveau <h2> au niveau <h3> et ainsi de suite. En allant d’un niveau supérieur à un niveau inférieur, le saut de niveau est à proscrire (par exemple, passer directement du niveau <h1> à celui <h3>). Par contre, il est possible d’enchaîner un niveau <h2> après un niveau <h4>.

Comment on utilise ça dans une page?

Partons avec ces prémices :

• En principe, sur une page d’accueil, le H1 est le « titre du site », le logo du client, etc.
• En principe, sur une page de contenus, le H1 se doit d’être unique et désigne le « titre de la page ».
• En principe, sur un blogue, les titres des articles listés devraient être des H2 puisqu’il y en a plusieurs.

Mais est-ce que c’est vrai tout ça?

Les titres de section

Contrairement à la croyance populaire, les balises <H> ne sont pas des titres de page, mais plutôt des titres de section (headings). Le titre de la page (title) se retrouve dans le head du document, point final. Sachant cela, il peut effectivement y avoir plus d’un H1 dans une page. Ce n’est pas obligatoire et la plupart du temps il y aura probablement un seul H1 dans la page. Mais, par définition, il peut y en avoir plusieurs! Je vous recommande d’ailleurs cet article d’Alsacréations.

Pour bien démêler tout ça, pensons à un document texte (Word, OpenOffice). Les styles sont gérés un peu de la même façon : le document a d’abord un « titre », puis une liste de styles constituée de « Titre 1 », « Titre 2 », « Titre 3 », etc. Comme dans un document texte, vous pouvez mettre plus d’un Titre 1 dans la page, mais il faut que ce soit cohérent.

Au point de vue SEO

C’est là que ça se corse.

Le H1 serait l’un des sujets les plus discutés et controversés en terme d’optimisation du référencement. Beaucoup de questions peuvent trouver leurs réponses sur cet article (qui date de presque 2 ans malheureusement) : H1 and SEO – Myths and Facts.

Car si l’on considère cet exemple :

<h1>Mots-clés</h1> (Principaux)
<h1>Mots-clés</h1> (Secondaires)
<h1>Mots-clés</h1> (Secondaires)

Et cet autre exemple :

<h1>Mots-clés</h1> (Principaux)
<h2>Mots-clés</h2> (Secondaires)
<h3>Mots-clés</h3> (Tertiaires)

L’exemple 2 est plus logique, l’exemple 1 sera probablement considéré comme Spam. Alors on devrait avoir un seul H1 par page? Pas si vite…

Qu’en est-il de cet exemple ?

<h1>Titre d’un article de blogue</h1> (Importance de même niveau)
<h1>Titre d’un article de blogue</h1> (Importance de même niveau)
<h1>Titre d’un article de blogue</h1> (Importance de même niveau)

Ainsi, WordPress assigne par défaut des H1 à tous les titres d’articles listés. Et ça fait du sens!

Ok, mais est-ce que plusieurs H1 dans une même page vont nuire au référencement?

La réponse est : probablement pas. Tel que le mentionne cet article de Pitstop Media, plusieurs H1 sont acceptables au point de vue SEO, s’ils sont utilisés avec logique et qu’il y a une raison valable à leurs présences multiples. Et si vous êtes encore septique, écoutez ce court vidéo de Matt Cutts, responsable de Google Webspam qui démystifie cette croyance.

Par contre, la mauvaise utilisation de plusieurs H1 dans une même page demeure un risque à être rapporté comme Spam. Par exemple, l’utilisation de deux H1 dont l’un est <h1 id=”logo”><span>logo.png</span></h1> semblerait bien problématique pour Google, tel que présenté dans ce cas précis. Le souci provient-il de la présence de deux H1, du balisage H1 pour un logo ou des balises enfant Span?

Néanmoins, le voisin Bing recommande que chaque page contienne un H1 unique.

Au point de vue accessibilité

Ça se corse doublement lorsqu’on ajoute la notion d’accessibilité (je m’attarde principalement au SGQRI-008 du Gouvernement du Québec).

Quel est le rôle des H en accessibilité?

Les titres H constituent des repères extrêmement importants pour une personne ayant une déficience visuelle ou une limitation motrice et qui souhaite naviguer dans la page sans utiliser la souris. Cette personne peut donc comprendre l’organisation globale de la page et la parcourir à l’aide des en-têtes formant cette « table des matières ».

Que dit le SGQRI-008 sur le nombre de H dans une page?

À la base, au moins un titre de section de premier niveau qui reflète la nature ou la fonction du contenu de la page doit être présent.

Je mets l’accent sur le « au moins ». Il doit donc y en avoir un, mais on sous-entend qu’il peut y en avoir plusieurs.

L’essentiel, c’est que les titres de section constituent une structure logique hiérarchique avec :

• un ou plusieurs titres de section de premier niveau (codés au moyen de la balise <h1>);
• des titres de section de deuxième niveau pour marquer le début des grandes sections (codés au moyen de la balise <h2>);
• des titres de section de troisième niveau pour le début des sous-sections (codés au moyen de la balise <h3>).

Si la page Web est longue et complexe, on utilise alors les titres de section de quatrième, cinquième et sixième niveau (codés respectivement au moyen des balises <h4>, <h5> et <h6>).

Au final, les H sont utilisés pour la structuration du contenu, pour faciliter la lecture, l’accessibilité de la page et le référencement. On savait qu’il fallait respecter l’ordre des titres pour que le rendu soit optimal (ne pas passer du H2 au H4, sans H3). Au final, les H sont utilisés pour la hiérarchie et une page aura dans la majeure partie du temps un seul H1 qui sera prédominant. Mais il y a des exceptions, tels que les blogues.

En conclusion

L’utilisation de multiples H1 est possible et ça ne causerait pas de problème comme tel au niveau du référencement (à moins de les bourrer de mots-clés), mais, la plupart du temps, il n’est pas nécessaire d’employer plusieurs H1 sur une page.

Les titres sont importants. Il faut les utiliser pour titrer seulement. Ne pas les utiliser pour faire paraître du texte PLUS GROS ou plus gras. Les moteurs de recherche emploient les H pour indexer la structure et le contenus de vos pages.

Raison de plus, l’utilisation de H1 multiples ne devrait pas affecter le référencement car HTML5 utilise des éléments sectionning puissants.