Qu’est-ce qu’une balise H1 ? Les bonnes pratiques SEO 2021

Mais pourquoi est-ce que la balise H1 est si impor­tante, com­ment en ajouter une et quelles sont les bonnes pra­tiques à respecter ?

Nous allons répon­dre à ces ques­tions dans ce guide :

• Pourquoi la balise H1 est impor­tante en SEO ?
• Com­ment ajouter une balise H1 ?
• Quelles sont les meilleures pra­tiques SEO de la balise H1 ?

Il y a 3 raisons :

1. Les balis­es H1 aident les moteurs de recherche à com­pren­dre la page
2. Les balis­es H1 améliorent l’ex­péri­ence utilisateur
3. Les balis­es H1 améliorent l’accessibilité

Les balises H1 aident les moteurs de recherche à comprendre la page

John Mueller, de Google, a déclaré que les balis­es H1 aident le moteur de recherche à com­pren­dre la struc­ture de la page. Si vous utilisez des balis­es H1 comme le recom­mande Google pour votre titre de page ou le titre de votre con­tenu, le H1 indique directe­ment à Google “voici le sujet de ma page”.

La balise H1 améliore l’expérience utilisateur

La balise H1 améliore l’expérience util­isa­teur dans le sens où elle joue un grand rôle dans la struc­ture hiérar­chique de la page. La par­tie en H1 est l’élément de titre le plus vis­i­ble sur la page, suivi du H2, du H3 etc.

Ne pas utilis­er de balise H1 ou les autres balis­es de head­ing cor­recte­ment va ren­dre vos pages plus dif­fi­ciles à parcourir.

La balise H1 améliore l’accessibilité

Des mil­lions de malvoy­ants utilisent des lecteurs d’écran pour con­ver­tir les pages web en audio. Selon cette étude de webAIM, 60% des util­isa­teurs de lecteurs d’écran préfèrent que seul le titre de la page soit en H1.

La plu­part des CMS ren­dent l’ajout d’un H1 à votre page très facile. Voyons com­ment y par­venir dans ceux qui sont les plus populaires.

Comment ajouter une balise H1 avec WordPress

La plu­part des thèmes Word­Press sont codés de telle manière que le titre de la page ou de l’article soit en H1.

Comment ajouter une balise H1 avec Wix

La plu­part des thèmes Wix met­tent un H1 sur chaque page. Si vous n’êtes pas sûr de quel texte est con­cerné, mod­i­fiez tem­po­raire­ment le style de vos balis­es H1 dans l’éditeur de thème. Vous allez pou­voir déter­min­er quel élé­ment votre thème met en H1.

Comment ajouter une balise H1 avec Squarespace

La plu­part des thèmes Square­space pla­cent une balise H1 sur chaque page. Si vous ne savez pas laque­lle c’est, cliquez sur les élé­ments de texte les plus mis en avant jusqu’à ce que vous trou­viez celui qui a le style “head­ing 1”.

Comment ajouter une balise H1 en HTML

Utilisez une balise ouvrant H1 (<h1>), tapez le titre de votre page et fer­mez la balise (</h1>).

Exem­ple:

<h1>Ceci est le H1</h1>

Avant d’aller plus loin, il faut tout de même dire que ne pas respecter l’une de ces étapes ne va très prob­a­ble­ment pas ruin­er le SEO de votre site. Ne paniquez donc pas si vous ne suiv­ez pas une de ces direc­tives. Ça ne va pas men­er à des choses cat­a­strophiques comme une pénal­ité de Google.

Le rôle de Google est de com­pren­dre, index­er et class­er le con­tenu du web. Ça ne lui serait pas pos­si­ble s’il n’avait pas des moyens de traiter des pages avec quelques prob­lèmes, par exem­ple sans balise H1

Cela dit, chaque petit élé­ment peut aider en SEO, alors autant faire ce qu’il y a de mieux lorsque c’est possible.

Voici 9 con­seils sur l’utilisation des balis­es H1

1. Utilisez la balise H1 pour les titres de page
2. Cap­i­talisez vos H1
3. Faites con­corder H1 et balise title
4. Utilisez un H1 sur toutes les pages importantes
5. N’u­tilisez qu’un H1 par page
6. Ne faites pas de H1 trop long
7. Tra­vaillez le style pour une hiérar­chie claire
8. Utilisez votre mot-clé principal
9. Écrivez des H1 convaincantes

Utilisez la balise H1 pour vos titres de page

Google con­seille de “plac­er le titre de votre arti­cle de manière très vis­i­ble et au-dessus de votre con­tenu, comme dans une balise H1”.

Si la plu­part des plate­formes de sites et CMS font ceci par défaut, ça peut être mod­i­fié pour cer­tains thèmes.

Si vous vous deman­dez com­ment votre thème procède, la manière la plus sim­ple de le véri­fi­er est de faire un clic droit dans votre nav­i­ga­teur puis de sélec­tion­ner “inspecter”. Si la par­tie surlignée con­tient un <h1>, c’est qu’elle est bien dans une balise H1.

Si vous n’êtes pas fam­i­li­er avec le HTML, installez la barre d’outils SEO de Ahrefs et véri­fiez gra­tu­ite­ment le rap­port “on page” pour voir vos balis­es H, dont votre H1.

Si vous préférez véri­fi­er vos balis­es H1 en masse :

1. Souscrivez à un compte gra­tu­it pour les out­ils de Web­mas­ter de Ahrefs
2. Lancer un crawl de votre site avec l’Audit de site
3. Aller sur le rap­port On page
4. Descen­dez jusqu’au graphique “H1 setup”
5. Cliquez sur la par­tie verte du graphique

Capitalisez vos H1s

La cap­i­tal­i­sa­tion con­siste à met­tre une majus­cule à tous les mots qui con­ti­en­nent qua­tre let­tres ou plus.

Si votre CMS utilise le même texte pour la balise H1 et la balise Title, cap­i­talis­er le texte va aider à bien ren­dre dans l’apparence des résul­tats de recherche. Il n’y a générale­ment que les sujets de forum qui utilisent le bas de casse pour les titres.

Faites concorder votre H1 avec votre Title

Google con­seille d’avoir le même texte en balise title qu’en H1.

La plu­part des CMS (comme Word­Press) vont le faire automa­tique­ment, mais il est pos­si­ble de don­ner un title dif­férent du H1 avec un plu­g­in de SEO comme Yoast.

La rai­son la plus fréquente pour faire ce genre de chose est lorsque le titre de votre page est par­fait pour un H1, mais trop long pour être une balise title (qui va appa­raître dans les résul­tats de recherche).

Par exem­ple, notre title et notre H1 sont légère­ment dif­férents pour cet arti­cle :

Si votre title et votre H1 sont légère­ment dif­férents, mais glob­ale­ment issus du même moule, comme c’est le cas ci-dessus, tout va bien. Mais si les deux sont totale­ment dif­férents, il vaut mieux les accorder.

Pourquoi ? Parce que ce qui va sou­vent attir­er le vis­i­teur est le titre de votre page dans le SERP (résul­tat de la page de recherche). S’ils arrivent sur une page qui a un titre (H1) totale­ment dif­férent, il va avoir l’im­pres­sion d’avoir été dupé.

Vous pou­vez véri­fi­er les écarts entre title et H1 gra­tu­ite­ment grâce aux out­ils de Web­mas­ter de Ahrefs.

1. Souscrivez à un compte gra­tu­it pour les out­ils de Web­mas­ter de Ahrefs
2. Lancer un crawl de votre site avec l’Audit de site
3. Aller sur le rap­port On page
4. Descen­dez jusqu’au graphique “H1 setup”
5. Cliquez sur la par­tie verte du graphique
6. Cherchez les grandes dif­férences entre title et H1

Voici une dis­cor­dance entre un title et un H1 pour notre guide sur les textes d’ancre :

La balise title est plutôt ori­en­tée sur le sujet de la déf­i­ni­tion alors que le H1 présente plutôt un angle autour d’une étude. Il se pour­rait qu’un util­isa­teur soit con­fus ou se sente trompé après avoir cliqué sur le résul­tat de recherche. Il faudrait donc que nous choi­sis­sions un angle et nous y tenir.

ASTUCE

Si votre site a beau­coup page, vous pou­vez tri­er le rap­port d’Audit de Site de Ahrefs par la quan­tité de traf­ic organique pour pri­oris­er vos mod­i­fi­ca­tions. Il ne sert pas à grand-chose de s’inquiéter de la dif­férence entre title et H1 sur une page qui n’attire qua­si­ment pas de traf­ic organique.

Utilisez une balise H1 pour toutes vos pages importantes

Comme le title de votre page devrait être con­tenu entre des balis­es H1, il va sans dire qu’il faut utilis­er ladite balise sur toutes les pages impor­tantes. Toutes les pages ont un title après tout.

Si vous voulez trou­ver les pages aux­quelles il manque une balise H1 ou qu’elle est vide :

1. Souscrivez à un compte gra­tu­it pour les out­ils de Web­mas­ter de Ahrefs
2. Lancer un crawl de votre site avec l’Audit de site
3. Aller sur le rap­port On page
4. Descen­dez jusqu’au graphique “H1 setup”
5. Cliquez sur la par­tie rouge du graphique

Comme vous pou­vez le voir au-dessus, quelques-unes de nos pages n’ont pas de H1

Est-ce que c’est une bonne pra­tique ? Pas vrai­ment, mais ce n’est pas un si gros prob­lème, car ces pages n’ont pas beau­coup d’intérêt en ter­mes de SEO. Ce sont des home de blog et des archives qui de toute manière vont surtout attir­er du traf­ic direct ou de marque.

Si nos développeurs pour­raient “cor­riger” ça en quelques min­utes, il est inutile de leur faire per­dre leur temps : les pages appa­rais­sent comme il faut pour les util­isa­teurs. C’est tout ce qui compte pour celles-ci.

N’utilisez qu’une balise H1 par page

John Mueller de Google déclare qu’u­tilis­er plusieurs H1 par page n’est pas un problème.

Si vous utilisez du HMTL5, c’est vrai au sens strict. Utilis­er plusieurs H1 dans dif­férentes sec­tions n’est pas tech­nique­ment mal.

<body>
   <h1>Apples</h1>
   <p>Apples are fruit.</p>
   <section>
      <h1>Taste</h1>
      <p>They taste lovely.</p>
      <section>
         <h1>Sweet</h1>
         <p>Red apples are sweeter than green ones.</p>
      </section>
   </section>
   <section>
      <h1>Color</h1>
      <p>Apples come in various colors.</p>
   </section>
</body>

La plu­part des nav­i­ga­teurs mod­ernes ne vont avoir aucun prob­lème à affich­er cela. Ils vont faire appa­raître les élé­ments des balis­es H1 au sein de leurs <sec­tion> en fonc­tion de leurs niveaux d’imbrication. Cela veut dire que le H1 de la pre­mière <sec­tion> va ressem­bler à un H2, celle de la <sec­tion> imbriquée à l’intérieur à un H3 etc.

Cela dit, même avec une HTML5, le W3C recom­mande d’utiliser des “niveaux de titre qui sont appro­priés à l’imbrication des sections”.

Par exem­ple

<body>
   <h1>Apples</h1>
   <p>Apples are fruit.</p>
   <section>
      <h2>Taste</h2>
      <p>They taste lovely.</p>
      <section>
         <h3>Sweet</h3>
         <p>Red apples are sweeter than green ones.</p>
      </section>
   </section>
   <section>
       <h2>Color</h2>
       <p>Apples come in various colors.</p>
   </section>
</body>

La rai­son der­rière cette recom­man­da­tion est que cer­tains nav­i­ga­teurs plutôt anciens vont avoir du mal à don­ner un ren­du cor­rect sans règles CSS explicites.

Que faire si votre site n’utilise pas HTML5 ?

John Mueller dit que plusieurs balis­es H1 ne posent tou­jours pas de problème :

Peu importe que vous util­isiez du HTML5 ou non, avoir plusieurs élé­ments H1 sur une page ne pose pas de problème.

Pourquoi est-ce que Google dit cela alors que ça va à l’encontre des recom­man­da­tions des stan­dards du W3C ?

Réponse : ils ont mis au point des mécaniques qui per­me­t­tent de con­tourn­er les prob­lèmes qui peu­vent être provo­qués par l’utilisation de plusieurs H1 sur la même page.

Donc même si ça n’a a pri­ori pas d’impact en SEO d’utiliser une ou plusieurs balis­es H1 par page, nous pen­sons tout de même qu’il vaut mieux n’en avoir qu’une pour la plu­part des sites.

Vous pou­vez véri­fi­er les écarts entre title et H1 gra­tu­ite­ment grâce aux out­ils de Web­mas­ter de Ahrefs.

1. Souscrivez à un compte gra­tu­it pour les out­ils de Web­mas­ter de Ahrefs
2. Lancer un crawl de votre site avec l’Audit de site
3. Aller sur le rap­port On page
4. Descen­dez jusqu’au graphique “H1 setup”
5. Cliquez sur la par­tie jaune du graphique

Ne faites pas de H1 trop longs

La plu­part des CMS utilisent le même texte pour votre H1 et votre balise title. Si c’est votre cas, à moins que vous n’ayez prévu d’écrire une balise title unique pour cha­cune de vos pages ou arti­cles, autant ne pas faire de titres H1 trop longs.

Quelle taille env­i­ron ? La règle par­le d’environ 70 car­ac­tères ou moins.

Voici une page qui enfreint cette règle :

Le H1 de la page est de 80 car­ac­tères, ce qui rend très bien sur la page en elle-même. Mais comme Word­Press utilise le même texte pour les balis­es Title, le titre est tron­qué sur la page de résultats.

Il faudrait que nous réglions le prob­lème en faisant une ver­sion plus courte de la H1 pour la balise Title. Si nous avions fait juste un petit effort pour écrire un titre plus court dès le début, nous n’aurions même pas ce problème.

Travaillez le style de vos heading pour la hiérarchie du contenu

Les Head­ings (les titres, représen­tés par les balis­es Hn) sont util­isés pour créer une struc­ture, une hiérar­chie dans la page web. La H1 étant générale­ment le titre le plus impor­tant de la page, votre style en CSS devrait en être le reflet.

En d’autres ter­mes, votre H1 devrait être ce qui est le plus vis­i­ble sur votre page

On dirait peut-être que j’enfonce des portes ouvertes, mais il y a beau­coup de sites où on ne fait pas la dif­férence entre les H1 et H2.

Utilisez votre mot-clé principal

En 2020, John Mueller de Google a dit :

Quant au sujet du texte sur une page, un élé­ment de titre nous envoie des sig­naux très fort sur la page et son sujet.

Comme les balis­es H1 englobent générale­ment des titres de page, c’est sans doute le head­ing le plus impor­tant. Il est donc logique d’y inclure votre mot-clé prin­ci­pal pour que le sujet de votre page ne fasse aucun doute pour vos util­isa­teurs et Google.

C’est ce que nous faisons pour qua­si­ment tous nos articles.

Est-ce que c’est tou­jours la chose la plus per­ti­nente à faire ? Bien sûr que non.

Il vaut mieux par­fois utilis­er une vari­ante proche de votre mot-clé cible pour amélior­er la lis­i­bil­ité et la compréhension.

Par exem­ple, le mot-clé prin­ci­pal pour cet arti­cle est “com­ment avoir plus de vues sur Youtube”, mais comme nous avons fait un arti­cle sous forme de liste, ça n’avait pas beau­coup de sens d’utiliser cette expres­sion exacte comme titre. On a donc fait une légère vari­a­tion à la place.

N’ayez pas peur d’ajouter des con­jonc­tions ou des mots vides (le, la, les…) pour que le titre sonne plus naturel.

Écrivez des H1 convaincants

Le con­tenu des balis­es H1 doit être une bonne descrip­tion, c’est évi­dent. Mais si vous écrivez des arti­cles, il doit aus­si être suff­isam­ment intéres­sant pour con­va­in­cre l’utilisateur de cliquer.

Com­ment écrire un titre d’article convaincant ?

Avant de vouloir utilis­er l’un de ces généra­teurs de titre d’article, prenez en compte l’objectif de votre arti­cle. S’il est là pour attir­er du traf­ic organique de la part des moteurs de recherche, et que votre CMS utilise le même texte pour le H1 et la balise title, le titre doit être écrit en prenant en compte les util­isa­teurs de moteurs de recherche.

Com­ment savoir ce qu’ils veulent ?

Cherchez de l’inspiration dans ce qui est bien posi­tion­né pour votre mot-clé cible.

Par exem­ple, si nous faisons une recherche pour “Tech­niques SEO” et analysons les pre­miers résul­tats, il est clair que ce qui est le plus recher­ché sont des tech­niques SEO effi­caces et que l’on peut appli­quer rel­a­tive­ment facile­ment pour aug­menter son traf­ic organique.

Nous pou­vons utilis­er ces infor­ma­tions pour rédi­ger un titre con­va­in­cant (H1) pour notre article.

Dans le monde du SEO, on appelle cela opti­miser pour l’intention de recherche.

FAQs

Con­clu­ons en répon­dant à quelques ques­tions fréquentes sur les balis­es H1

Quelle taille doit avoir une balise H1 ?

Les balis­es H1 peu­vent être aus­si longues que vous le souhaitez. Mais comme beau­coup de CMS utilisent ce titre autant pour le H1 et pour la balise title. Il vaut mieux garder le texte court (<70 car­ac­tères) pour éviter que le titre soit tron­qué dans le SERP.

Est-ce qu’on peut avoir plus d’une balise h1 par page ?

Si vous utilisez du HTML5, oui. Si ce n’est pas le cas, c’est décon­seil­lé, mais n’a que peu de chance d’avoir un gros impact.

Est-ce qu’on peut utiliser une image en balise H1 ?

Oui. D’ailleurs c’est ce que fait W3C (le texte retenu pour le H1 est alors celui de l’attribut alt de l’image).

Conclusion

Les balis­es H1 ne sont plus aus­si impor­tantes que par le passé. Google a mis des proces­sus en place pour com­pren­dre cor­recte­ment le con­tenu d’une page même si l’utilisation de balis­es H1 n’est pas optimale.

Cela dit, suiv­re ces bonnes pra­tiques n’est pas dif­fi­cile, alors autant le faire. Au moins, cela améliore l’expérience utilisateur.

Vous avez des ques­tions ? Je suis sur Twit­ter.