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

WebRankInfo : la plus grande communauté francophone du référencement
Olivier Duffez
Créateur de WebRankInfo,
consultant en référencement
Les balises de titres (h1, h2, h3…h6) servent à structurer l'information dans une page web. Comment bien les utiliser pour améliorer le référencement naturel en plus de la lisibilité de la page ? Voici le guide ultime !
Publié le 15/08/2022. Auteur : Olivier Duffez
Ce dossier comporte 4 parties (cliquez pour y accéder directement) :
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.
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 :
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 :
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.
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 :
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 :
Toujours selon le W3C, les cas suivants sont considérés comme valides (j'en reparle plus loin dans la partie SEO) :
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".
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 :
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.
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).
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 :
Ceci est correct :
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.
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.
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.
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.
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 :
Ceci est correct :
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.
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é :
Ceci est mieux car le titre H3 n'est plus isolé :
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.
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 :
Ces balises sont surtout utiles aux pages à fort contenu (éditorial). Donc à mon avis :
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…
Ce qu'il faut faire :
Ce qu'il faut éviter :
Pour les détails, voyez cette page.
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 :
Ceci est correct :
Remarque : il serait mieux de préciser certains attributs comme par exemple height et width.
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 :
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.
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 :
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 !
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 :
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.
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.
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 !
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 :
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 :
Lisez les conseils ci-dessous pour les détails.
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 !
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).
C'est très classique, là aussi dans Prestashop vous pouvez choisir un titre parmi les 6 possibles :
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…
Cet article vous a-t-il plu ?
22 commentaires
Bonjour Olivier, je teste les possibilités de Wix pour faire un BLOG.
Or j'ai l'impression que les options dans un post de blog ne sont pas les mêmes que pour une page.
Aussi, je ne trouve aucun moyen de placer le titre de l'article en H1, et encore moins de gérer correctement les H2, H3, etc… dans mes articles. On peut seulement choisir 2 niveaux de titres qui sont gérés en css et pas en Hn.
Je me trompe ?
Désolé Philippe, je n'utilise pas Wix, je ne sais pas répondre.
Pour les moteurs de recherche (google, yahoo, bing), les balises H1 a H6 n’ont pas toutes le même poids. D’un point de vue référencement, la balise H1 est la plus importante parmi tous les autres titres. Plus on augmente de niveau de titre (h2, h3, h4, h5 et h6), moins son contenu sera considéré comme important par les moteurs de recherche.
Bonjour, une structure du type:
h1
h2
h1
h2
h3
est elle correcte ?
Non car généralement une page n'a qu'un seul titre de niveau 1.
Et pourquoi n'y a-t-il qu'un seul H3 ? le niveau supérieur est H2 ce qui est bien, mais s'il y a besoin de découper c'est en plusieurs parties donc il devrait y avoir au moins 2 H3.
Bonjour, bonjour,
Merci pour votre long article très intéressant !
J'ai cependant une confusion… à laquelle je ne trouve pas de réponse précise.
Est-ce ok si dans un site de 5 pages il y ait :
1/wrapper > header > H1> image logo > avec la fonction "alt" je mets quelques mots propres à chaque contenu de page . Mon H1 est donc lié au logo.
+
2/ wrapper > section banner > div inner > H1 = en guise de début de titre de page. C'est le début de mon article
J'ai bien compris que un seul H1 pouvait suffire, mais pour le coup si je ne le place qu'en titre de la banner, ce qui me semble être le plus logique, puis que je cherche à le valider sur un validateur, mon header devient "untitled section".
ce qui m'inquiète un peu…
Est-il préférable de mettre un h1 dans le header + dans la banner ? ou la banner suffit ?
Pour la home, qui a moins de contenu, le H1 sur le logo en header est-il suffisant ?
Mille mille mercis d'avance pour vos réponses
sur une page HTML4, il est vraiment conseillé de rester à une seule balise H1, le titre de la page (et pas du site)
sur une page HTML5, il peut y avoir plusieurs H1 puisqu'on peut avoir plusieurs arborescences dans plusieurs sections. Je pense néanmoins que le plus important reste de travailler les Hn dans la partie principale de la page
pour une page d'accueil, les Hn ne s'imposent pas vraiment sauf si elle est bien remplie au niveau contenu
bonjour et merci
En premier je vais supprimer les balises de l'accueil et cela répondra à la remarque sur l'esthétisme et je vais créer une page abstract avec les balises de tout le projet (et une utilisation de liste)
dans un deuxième temps je tenterais de coller à schema.org (pour la page abstract)
bonjour
Mon site utilise webacappella 4
J'ai créé une balise H1 par page
La page accueil est divisée en 4 balises H2 (je suis dans la phase de mise en conformité avec schema.org
Cela perturbe l'équilibre de la page
Que faire sans être sanctionné par google :
– rendre invisible les balises : comment ? attitude googlee
– mettre les infos des balises en bas de la page ?
-…………… etc
– merci pour vos conseils
cordialement
MJ
Non Michel, il ne faut ni rendre invisibles ces titres, ni les planquer en bas de page. Si l'accueil a 4 rubriques, c'est une bonne idée de leur donner un titre en H2 à chacune, en quoi cela perturbe-t-il l'équilibre de la page ?
Cela étant, pour une page d'accueil, les balises H ne sont pas vraiment adaptées.
Merci pour le retour rapide.
C'est un peu confus, donc un article (moyen de 200-300) sans balise H2,n'est pas nécessairement mal optimisé ? Ce n'est pas "dommage" ?
@Christelle : effectivement, dans un article aussi court que 200 mots, ça risque d'être dur d'avoir plusieurs parties qui méritent chacune un titre (qui serait alors un H2). C'est fou le nombre de personnes qui pensent que pour le référencement, il faut essayer de mettre le plus possible de balises H dans une page ! On en met quand on a besoin de structurer un contenu, c'est tout.
Bonjour,
Très instructif cet article.
D'après ce que j'ai compris, les balises permettent (entre autres) de dire à google où sont les mots clefs : title, Hn, Alt de l'image… Du coup, on pourrait croire qu'il peut être obligatoire de toujours mettre des sous-titres pour mieux hiérarchiser l'information et en profiter pour placer des mots clefs. D'où ma question : la balise H2, doit-elle comprendre aussi les mots clés visés ? Est-ce que les mots clefs du H1 doivent aussi se retrouver sur l'un des h2 au moins  ? Exemple H1 : Interview avec Paul Henry / H2 : Paul Henry, un parapentiste téméraire
Merci d'avance pour les éclairages
@Christelle : il ne faut surtout pas résumer en disant "ces balises permettent de mettre des mots-clés", sinon on imagine en effet "tant que je n'ai pas assez utilisé de H2 (et H3) dans ma page, ce n'est pas assez optimisé" ou "ll faut que j'arrive à rajouter des mots-clés dans mes H2" ou "là j'ai des mots-clés, je vais donc les mettre en H2"…
La balise H2 aura sans doute des mots importants pour la page, c'est logique mais pas indispensable.
On ne peut certainement pas donner des règles du genre "les mots-clés du H1 doivent se retrouver partiellement dans les H2"…
J'espère que c'est plus clair ?
Merci pour cet article très complet.
Grande débutante en WordPress, j'ai fais l'erreur de remplacer tous mes titres 1 pars des titres 2 pour qu'il aient un style différent du titre du site. Il vaut mieux que je change tout ça rapidement ou Google comprendra quand même ? Mes titres utilisés pour le référencement ne sont pas tout à fait les mêmes que ceux de mes pages, qui n'ont en plus que des h2 et autres.
@Sara : il ne faut pas choisir les niveaux de titres en fonction de leur apparence mais de leur signification, comme expliqué dans mon article.
Le plus simple pour aider serait d'avoir une URL d'exemple…
@Olivier,
Non désolé pas en mesure de donner de résultats (car d'autres facteurs bien plus essentiels comme la qualité du contenu priment avant tout). Toutefois si je peux aider Google à comprendre la structure de chacune de mes pages en remplaçant un simple "div" par un nav, un footer ou encore un aside, je crois que cela ne peut être que positif. Le HTML 5 autorise la multiplicité des balises H1. Google doit pouvoir s'adapter selon le HTML utitlisé.
Je suis bien d'accord, si on peut aider Google autant le faire, en espérant que ça nous apporte quelque chose. Je dis juste que je n'ai jamais vu de retour d'expérience positive grâce à ça.
Beaucoup de plugins et sites d'audits ne connaissent pas le HTML 5. Ne vaut-il pas mieux (en 2016) jouer la carte du html sémantique à coup de balises article, section, aside, footer & nav, figure/figcaption etc.
@AL2015 : oui tant qu'à faire, c'est bien d'utiliser HTML5 et ces balises. Cela dit, je n'ai jamais rencontré un seul cas où leur utilisation avait été bénéfique en SEO (en tout cas mesurable). Peut-être avez-vous un retour d'expérience à partager ?
Merci pour cet article très détaillé. Dans le ecommerce nous trouvons souvent l'utilisation des h… dans les menus et dans le titres des produits d'une page catégorie. Est-ce une bonne pratique pour le seo ?
@Carine : je l'ai indiqué dans l'article, mais pas de façon aussi précise ou explicite.
Dans aucun cas je ne trouve qu'une balise de titre H ne devrait se trouver dans un menu : il est préférable d'utiliser des listes à cet endroit.
Pour les titres des produits dans une catégorie, les avis sont partagés mais j'ai indiqué que je préfère ne pas en utiliser (c'est également la recommandation du W3C).
Les commentaires sont fermés
Inscription à la newsletter
Catégories
Consulting SEO
Envie d'améliorer votre référencement ?
Consultant SEO depuis 2003, j'ai une très grande expérience en audit et consulting. Que ce soit pour une demande ponctuelle, pour un audit ou du long terme, je peux vous aider.
WebRankInfo / Tous droits réservés 2022 – Mentions légales – Me contacter

source