Balises de titres H1 H2 H3…H6 et référencement : le guide WebRankInfo

Ce dossier comporte 4 parties (cliquez pour y accéder directement) :

1. Syntaxe
2. Impact référencement
3. Outils
4. Balises de titres et CMS

Avant de commencer, sachez que je vous propose 2 bons plans pour tester vos balises H1-H6 🙂

Pour tester gratuitement une seule page à la fois, utilisez mon outil d’analyse des balises H

Pour tester toutes les pages de votre site, lancez mon outil d’audit RM Tech. Entre autres (nombreuses) choses, il analysera les balises de titres Hn de toutes vos pages sous 9 critères ! Vous pouvez lancer un audit gratuitement pour voir s’il détecte des problèmes. Pour avoir les détails il faudra acheter des crédits.

Syntaxe des balises de titres H1-H6

Définition

Les balises de titres H1, H2… H6 (parfois notées Hn) sont des balises servant à définir les différents niveaux de titres pour structurer un (gros) contenu éditorial sur une page HTML. C’est similaire aux différents styles Titre 1, Titre 2, Titre 3, etc. que vous pouvez trouver dans votre traitement de texte Word, Libre Office, Google Docs ou équivalent.

Dans la norme HTML, il existe 6 niveaux de titres : H1 est le plus important, H6 le moins important.

Remarque : j’utilise souvent dans cet article des majuscules pour noter ces niveaux de titres, mais en pratique dans le code HTML on utilise généralement des minuscules. Cela dit, la casse n’a pas d’impact.

Voici la syntaxe du code HTML pour ces différents niveaux de titres :

<h1>titre de niveau 1</h1>
<h2>titre de niveau 2</h2>
<h3>titre de niveau 3</h3>
<h4>titre de niveau 4</h4>
<h5>titre de niveau 5</h5>
<h6>titre de niveau 6</h6>

A quoi servent les balises de titres ?

Il ne faut pas utiliser les balises H pour de la mise en forme, mais pour fournir une information sémantique. En d’autres termes, ces balises servent à définir des niveaux de titres, un découpage en sous-parties, bref une structure ou une hiérarchie des contenus de la page.

Ne vous souciez pas de la mise en forme liée à chaque niveau de titre, les feuilles de styles CSS sont là pour définir leur apparence.

Une bonne façon de voir si vous avez bien utilisé ces balises dans une page, c’est de voir si on peut facilement en faire une table des matières. Faites le test suivant :

• extrayez de votre page uniquement les libellés des balises de titres H1 jusqu’à H6
• affichez-les dans un document sans rien d’autre
• faites-le lire à une autre personne : elle doit comprendre la logique de l’ensemble, de quoi parle la page et comment elle est structurée

Les (bons) rédacteurs web savent utiliser ces niveaux de titres à bon escient : c’est un endroit idéal pour glisser des mots-clés (expressions) stratégiques pour la page, tant qu’on sait rester naturel. Ne versez pas dans la sur-optimisation en mettant toujours plus de mots-clés dans vos balises Hn, et toujours plus de balises Hn dans vos pages “car ça améliore le SEO“…

Cerise sur le gâteau, une bonne structure de titres améliore la lisibilité, surtout pour les contenus longs comme l’article que vous lisez actuellement.

Les balises de titres dans la norme HTML

Voici la définition en HTML4 (source W3C) :

Un élément de titre décrit brièvement l’objet de la section qu’il introduit. Les informations fournies dans ces titres peuvent être utilisées par des noms d’agents (NDLR : user agents, c’est-à-dire les navigateurs mais aussi les crawlers des moteurs de recherche) par exemple pour construire automatiquement la table des matières d’un document. Il y a 6 niveaux de titres en HTML, H1 étant le plus important et H6 le moins important.

Voici la définition en HTML5  (source W3C) :

Les éléments h1, h2, h3, h4, h5 et h6 représentent les titres de leurs sections. Ils sont classés selon le nombre indiqué dans leur nom : h1 se positionne en premier et h6 en dernier. Ces éléments ne doivent pas être utilisés comme des sous-titres (subheadings, subtitles) ou comme des titres alternatifs ou des accroches, à moins que cela représente le titre d’une nouvelle section ou sous-section.

La norme HTML4 indique que les attributs possibles sont les suivants :

• id, class (identifiants pour la page)
• lang (langue), dir (sens de lecture du texte)
• title (titre de l’élément affiché sous forme d’infobulle au passage de la souris)
• style (information de style en ligne)
• align (alignement)
• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (événements)

Selon HTML5, les attributs possibles des balises de titres sont tous les attributs globaux.

Selon la norme HTML5 (source W3C), les balises de titres H1-H6 ne sont pas adaptées dans les cas suivants :

• pour un fil d’ariane ou un nuage de tags : il vaut mieux utiliser les listes (<ul>)
• pour une conversation, le compte-rendu d’un événement minute par minute, le transcript d’un chat, les dialogues dans un scénario, les logs d’une conversation par messagerie instantanée : il vaut mieux utiliser des paragraphes (<p>)
• les notes de bas de page ou dans la marge (dans ce cas la balise <aside> est appropriée)

Toujours selon le W3C, les cas suivants sont considérés comme valides (j’en reparle plus loin dans la partie SEO) :

• mettre une image dans une balise H1 (ou autre niveau de titre)
• mettre un lien <a href> dans une balise H1-H2-H3
• utiliser du <strong> ou du gras <b> dans une balise de titre

Les titres H1-H6 et le référencement

Impact des balises de titres sur le référencement naturel

L’impact SEO direct existe mais il est faible, bien plus faible qu’on l’imagine souvent. Cela étant, vous auriez tort de ne pas les utiliser, notamment les H1. Regardez par exemple ce test de mai 2016 qui montre l’intérêt des H1 en SEO.

Mais l’impact indirect me semble également très intéressant. En effet, ça incite à bien réfléchir au contenu et surtout à bien le structurer. Cela permet aussi d’inclure des expressions stratégiques dans les H, tant qu’on ne tombe pas dans la “suroptimisation”.

Combien de balises H1, H2, H3… maximum par page ?

C’est ridicule de se poser la question de cette façon !

Ce serait également idiot de penser “Je n’ai pas encore utilisé de H2 sur cette page, il faut donc que j’en ajoute pour améliorer mon référencement. Et si possible aussi quelques H3″.

Voici le raisonnement que vous devriez plutôt suivre :

• pour le titre éditorial principal de ma page, je choisis H1
• si j’ai 3 parties dans mon contenu, alors je vais utiliser une balise H2 pour le titre de chacune des 3 parties
• si dans une des parties de niveau 2 j’ai besoin de découper encore, j’utiliserai le niveau 3, donc des H3
• etc.

Rappelez-vous une règle d’or : la structure des balises de titres de votre page doit permettre de se faire une très bonne idée de la structure de son contenu.

Règles sur les balises h1 – h6

Il s’agit généralement simplement de bon sens. Ne pas les respecter ne va plomber votre référencement, mais autant faire les choses comme il faut. J’ai essayé de les classer en mettant les règles les plus importantes en premier (parfois il y a des bonnes raisons de ne pas les suivre).

Pas de saut de niveau

Une balise Hn ne peut être suivie que par une balise H(n+1) dans l’ordre du code source : on ne saute pas de niveau. Par exemple, après une H1, il ne peut y avoir qu’une H2. Après une H3, il ne peut y avoir qu’une H4.

Remarque : Ce type de problème est repéré par mon outil RM Tech.

Ceci n’est pas correct car on passe du niveau 1 au niveau 3 :

<h1>Tables de jardin</h1>
    <h3>Tables en bois</h3>
    <h3>Tables en plastique</h3>
    <h3>Tables en métal</h3>

Ceci est correct :

<h1>Tables de jardin</h1>
  <h2>Tables en bois</h2>
  <h2>Tables en plastique</h2>
  <h2>Tables en métal</h2>

Pas de balise vide

Une balise Hn ne doit pas être vide. Si votre balise ne contient qu’une image (c’est possible), n’oubliez pas de remplir son attribut ALT, qui fera office de texte du titre.

Remarque : Ce type de problème est repéré par mon outil RM Tech.

Taille des balises de titres

Un titre doit rester un titre ! Ce n’est pas un paragraphe, vous devez donc limiter sa taille (en nombre de mots ou de caractères). Essayez de limiter la taille pour que le titre s’affiche sur une seule ligne (ce n’est pas un critère SEO, plutôt de lisibilité).

Concrètement, la taille d’une balise de titre ne doit pas dépasser ~80 caractères (c’est un ordre de grandeur).

Remarque : Ce type de problème est repéré par mon outil RM Tech.

Rappelez-vous aussi qu’un sous-titre ou un slogan ne doit généralement pas être géré par une balise de titre.

Même chose pour un chapeau (ou “chapô”, le paragraphe d’introduction d’un article) : il n’a aucune raison d’être dans une balise de titre.

Au moins une balise H1 par page

Une page doit au minimum avoir une balise H1 (sauf peut-être la page d’accueil), par contre il est tout à fait possible d’avoir uniquement une H1 et rien d’autre, pas même des H2.

Remarque : Ce type de problème est repéré par mon outil RM Tech.

Nombre de balises H1 par page

Le W3C n’émet pas d’objections à avoir plusieurs balises H1 par page, y compris dans HTML4. En HTML5, c’est encore plus libre car il peut y avoir une balise H1 dans chaque section (source). Pour les détails, lisez par exemple cet article en français.

Cela étant, pour ma part je recommande généralement de limiter à 1 le nombre de balises H1 par page. L’idée étant de se concentrer sur la section principale de contenu de la page.

Remarque : Ce type de problème est repéré par mon outil RM Tech.

Ne faites pas l’erreur d’avoir dans votre template une balise H1 sur le logo ou le nom du site, en plus d’une autre balise H1 en haut du contenu.

Commencez votre page par une H1

A part si vous utilisez plusieurs jeux de balises de titres dans différentes “sections” de votre page HTML, sinon la première balise de titre d’une page doit être une <h1>.

Cela vous semblerait-il normal de commencer un document Word par un titre de niveau 2, puis un peu plus loin un titre de niveau 1 ? Non ! Donc faites pareil sur une page HTML.

Remarque : Ce type de problème est repéré par mon outil RM Tech.

Ceci n’est pas correct car on commence par autre chose qu’un titre h1 :

  <h2>Qui sommes-nous ?</h2>
  <h2>Newsletter</h2>
<h1>Tables de jardin</h1>
  <h2>Tables en bois</h2>
  <h2>Tables en plastique</h2>
  <h2>Tables en métal</h2>

Ceci est correct :

<h1>Tables de jardin</h1>
  <h2>Tables en bois</h2>
  <h2>Tables en plastique</h2>
  <h2>Tables en métal</h2>

Pas de doublons avec la balise H1

La balise H1 décrit le contenu précis d’une page, il me semble donc logique qu’une balise <h1> ne doit pas être identique sur toutes les pages (sinon c’est considéré comme un doublon, éventuellement du duplicate content).

Remarque : Ce type de problème est repéré par mon outil RM Tech.

Evidemment, si vous utilisez plusieurs balises H1 dans la page, dans différentes sections, cette règle ne s’applique plus.

Pas de balise isolée (H2-H6)

Pour les balises H2-H6, dans un niveau donné, le nombre de titres du niveau inférieur doit être 0 ou au moins 2 (donc pas seulement 1). Par exemple si on a un H2 et juste en dessous un seul H3, c’est pas bon car il devrait y avoir au moins 2 H3.

Remarque : Ce type de problème est repéré par mon outil RM Tech (je n’en connais aucun autre qui le repère).

Ceci n’est pas vraiment correct car le titre H3 est isolé :

<h1>Tables de jardin</h1>
  <h2>Tables en bois</h2>
  <h2>Tables en métal</h2>
    <h3>Tables en fer forgé</h3>
  <h2>Tables en plastique</h2>

Ceci est mieux car le titre H3 n’est plus isolé :

<h1>Tables de jardin</h1>
  <h2>Tables en bois</h2>
  <h2>Tables en métal</h2>
    <h3>Tables en fer forgé</h3>
    <h3>Tables en aluminium</h3> 
  <h2>Tables en plastique</h2>

Pas de titres identiques dans une même page

Dans la mesure du possible, il faut éviter d’utiliser un même libellé dans plusieurs balises H1-H6 d’une même page.

Remarque : Ce type de problème est repéré par mon outil RM Tech.

La balise H1 doit-elle être identique à la Title ?

En théorie, rien n’interdit d’utiliser exactement le même libellé dans la balise <title> et la balise <h1>. Certains estiment que c’est une forme de suroptimisation, mais je ne vois pas pourquoi.

Cela étant, si c’est possible pour vous, essayez de varier légèrement ces 2 titres, pour les raisons suivantes :

• en ayant des libellé légèrement différents, vous optimiserez votre page pour la longue traîne (et peut-être un peu pour la recherche vocale ou même RankBrain). Variez donc un peu les termes : synonymes, hyperonymes, hyponymes, formes conjuguées, traductions, sigles, etc.
• La balise <title> doit pouvoir être comprise en dehors du contexte de la page (car elle s’affiche dans les pages de résultats de recherche). Elle doit être travaillée spécialement pour le référencement. Sa taille est assez limitée.
• La balise H1 s’affiche en haut d’une page dont l’internaute est censé avoir compris le contexte. Elle peut donc être davantage travaillée dans un but d’accroche (optimisation éditoriale, cf. techniques journalistiques). Même s’il ne faut pas abuser, elle peut être plus longue que la balise title.

Balises de titres sur une page d’accueil ou une page de catégorie

Ces balises sont surtout utiles aux pages à fort contenu (éditorial). Donc à mon avis :

• sur la page d’accueil c’est difficile à définir, voire non adapté, sauf dans le cas d’une page d’accueil avec beaucoup de texte, ou alors avec clairement plusieurs parties (qui peuvent donc démarrer par un H2). Mettez éventuellement le titre du site en H1 (à condition de ne pas le laisser en H1 sur les autres pages du site).
• sur une page de catégorie/listing, ce n’est pas non plus très adapté. Les avis divergent, pour ma part je ne recommande pas de mettre une balise de titre sur chaque produit/article/annonce. D’ailleurs le W3C recommande aussi d’utiliser simplement une liste <ul> et pas de <h1>…<h6>

Zones de la page adaptées aux balises de titres

Je vous conseille de vous concentrer à utiliser les balises de titre dans la zone principale de contenu de votre page, la section la plus importante. C’est pourquoi pour ma part, même si ce n’est pas un problème selon le W3C, je ne suis pas favorable à utiliser des balises de titres dans les menus, l’entête ou le pied de page.

Précision : si vous utilisez des balises de titre dans une barre latérale ou un pied de page (c’est encore très fréquent), pour respecter les règles du W3C ces titres devraient servir à structurer la section dans laquelle ils sont. Hors, presque tout le temps, je vois des niveaux de titre H2 dans la barre latérale (sans H1 avant) et des H2, H3 ou H4 dans le footer…

Les conseils de Google pour les balises de titres

Ce qu’il faut faire :

• Utilisez des titres pertinents pour indiquer les sujets importants et organiser le contenu de manière hiérarchique
• Utilisez les points principaux et secondaires du contenu de la page, pour constituer une sorte de plan
• Utilisez les balises de titre avec pertinence et parcimonie

Ce qu’il faut éviter :

• Placer du texte dans des balises de titre qui ne seraient pas utiles pour définir la structure de la page
• Utiliser des balises de titre là où d’autres balises comme <em> et <strong> seraient plus appropriées
• Choisir des balises de titre de différentes tailles de manière irrégulière

Pour les détails, voyez cette page.

Utiliser d’autres balises HTML avec les balises de titres

Mettre une image dans une balise H1-H6

Même si ce n’est pas très fréquent, rien n’interdit d’inclure une image dans une balise de titre, par exemple H1. D’après mon expérience, ça ne semble pas non gêner le référencement, à condition bien entendu de remplir l’attribut ALT de la balise <img> avec ce que vous auriez naturellement mis en texte dans la balise <h1>.

Ceci n’est pas correct car il n’y a pas d’attribut alt dans l’image :

<h1><img src="/tables-jardin.jpg"></h1>

Ceci est correct :

<h1><img src="/tables-jardin.jpg" alt="tables de jardin"></h1>

Remarque : il serait mieux de préciser certains attributs comme par exemple height et width.

Mettre un lien dans une balise H1-H6

Même si ce n’est pas très utile a priori, rien n’interdit d’inclure un lien dans une balise de titre, c’est-à-dire le rendre cliquable. Voilà à quoi pourrait ressembler le code :

<h2><a href="/tables-en-bois/">Tables en bois</a></h2>

Bien sûr, un cas de figure évident est une page listant des éléments (catégorie de ecommerce, petites annonces). Mais si vous avez bien lu le début de cet article, vous savez que les balises de titres ne sont pas vraiment adaptées à ce cas de figure.

Mettre du gras dans une balise H1-H6

A mon avis ce n’est pas très malin d’utiliser du gras dans une balise de titre (en tout cas si c’est sur l’ensemble du titre), car il vaut mieux utiliser les CSS pour définir l’apparence.

Voici à quoi cela pourrait ressembler si la mise en exergue est mise sur tout le titre :

<h1><strong>Tables de jardin</strong></h1>

Cela dit je ne pense pas que cela pose de véritable problème en référencement (et même avec le W3C). Attention tout de même à vouloir tout “optimiser” à outrance !

Mettre du <span> dans une balise H1-H6

Ce n’est pas interdit d’inclure une balise <span> au milieu d’un titre, par exemple pour mettre en évidence (couleur, gras, taille…) une partie. Cette pratique se rapproche de la précédente quand la mise en exergue ne concerne qu’un bout du titre.

Voici à quoi cela pourrait ressembler si la mise en exergue est mise sur une partie du titre :

<h1>Tables de <span>jardin</span></h1>

Cacher une balise H1-H6

Evitez d’utiliser une technique pour rendre invisible votre balise Hn, c’est interdit par les moteurs. Inutile de prendre un tel risque alors que vous pouvez éviter de les cacher.

Outils d’analyse des titres H1-H2-H3…H6

Pour l’analyse d’une seule page

Outil WebRankInfo H1-H6

Je vous propose un outil en ligne gratuit permettant de tester des balises H1, H2, H3 d’une page et non seulement de les lister, mais aussi de fournir des conseils d’amélioration.

Extension Web Developer

Il existe un grand nombre d’extensions pour Firefox ou Chrome pour l’analyse des balises de titre, mais j’aime bien Web Developer. D’abord, vérifiez que la case est cochée devant “Entourer > Indiquer les balises en entourant les éléments” puis cliquez sur “Entourer > Titres (H1-H6)” :

ce qui met en évidence les balises de titre directement dans la page web (sans voir le code source), avec un code couleur :

Une autre façon d’utiliser cette extension est de demander de générer une table des matières. Dans ce cas, le vert indique que tout est correct, et l’orange qu’il y a un problème, comme ici :

Remarque : il existe d’autres extensions, n’hésitez pas à indiquer celles que vous préférez !

Pour l’analyse d’un site en entier

Etudier une page c’est bien, mais largement insuffisant pour la plupart des sites. C’est pourquoi j’ai inclus dans mon outil d’audit SEO en ligne “RM Tech” une analyse très poussée des balises de titres. Je ne suis sans doute pas objectif, mais il me semble que c’est l’analyse la plus complète qui soit parmi les outils SEO.

Voici un exemple de bilan des balises de titres dans un rapport RM Tech :

Sans oublier l’analyse des doublons des balises H1 sur l’ensemble du site :

Gestion des titres H1, H2, H3… H6 dans les CMS

Chaque CMS a sa façon de gérer les balises de titres : à vous de vérifier dans votre cas si c’est bien fait ! En outre, cela dépend aussi du modèle (template / thème) utilisé sur votre site.

A vous de vérifier que vous n’avez pas les erreurs suivantes :

• le template utilise une balise <h1> sur le nom du site, sur toutes les pages (je rappelle que la balise H1 doit logiquement décrire le contenu principal de la page, pas du site)
• le template utilise autre chose qu’une balise <h1> pour le titre de l’article affiché en haut de page
• le template n’utilise aucune balise Hn pour les titres

Lisez les conseils ci-dessous pour les détails.

L’automatisation des balises title, H1..H6

Mieux vaut rédiger individuellement les balises, mais de bonnes règles d’automatisation permettent d’industrialiser le référencement naturel on-site.

Si votre site est gros, je vous conseille donc de commencer par définir des règles d’automatisation, puis au cas par cas de les améliorer manuellement. On fait exactement la même chose avec la balise Title et la meta description !

Dans la suite, j’explique comment ajouter/mettre/modifier une balise H1, H2, H3… dans chaque CMS populaire. Si le vôtre n’est pas listé ici, dites-le dans les commentaires !

Les balises H1-H2-H3 dans WordPress

Quand vous éditez un article ou une page dans le backoffice de WordPress, vous pouvez définir le niveau d’un titre en cliquant sur le menu déroulant des styles :

Généralement, vous n’avez pas besoin de sélectionner le titre de niveau 1 car votre template l’utilise déjà avec le titre de votre article, qui s’affiche (en front) dans le haut de la page.

Si vous souhaitez définir un titre différent pour la balise <title> et la balise <h1>, vous aurez besoin d’une extension (comme par exemple Yoast SEO).

Les balises H1-H2-H3 dans Prestashop

C’est très classique, là aussi dans Prestashop vous pouvez choisir un titre parmi les 6 possibles :

Les balises H1-H2-H3 dans Wix

Cela dépend peut-être des templates (dites-le moi en commentaires !) mais sur Wix vous pouvez choisir le niveau de titre en cliquant sur un titre puis sur “Modifier” puis sur “Thèmes” afin d’accéder à ce menu :

Les noms des différents niveaux de titres prêtent à confusion car on a l’impression que le Titre 1 n’est adapté que pour le nom du site, et qu’on choisit les autres en fonction de leur taille en pixels…

Remarque : j’ajouterai des conseils pour Joomla, Magento et bien d’autres CMS un peu plus tard ! Dites-moi lesquels vous intéressent…