La balise H1

La balise h1 et le référencement, c’est toute une histoire ! Tout le monde la connait ou pense la connaître. Et pourtant…

Comment optimiser cette balise pour le SEO  ? Quelles sont les erreurs à éviter ? Quelle est sa véritable importance ? Combien en utiliser par page pour ne pas froisser Google ? Pourquoi la balise H1 est importante en SEO ? Comment la mettre en place ?

Toutes les réponses sont dans ce cours SEO dédié à la plus célèbre des balises HTML.

Définition de la balise H1

La balise H1 représente le niveau de titre le plus élevé d’un document HTML. Il existe d’autres niveaux moins élevés comme h2, h3, h4, h5 et h6.

Par défaut, les navigateurs varient la taille des titres lorsqu’ils les affichent en fonction de leur importance.

Bien entendu, la plupart des sites utilisent des styles CSS afin de personnaliser totalement l’affichage des balises Hx et il est possible d’afficher un H1 en tout petit même si cela est contraire à l’esprit de la balise et donc non recommandé.

Evitez donc de placer des H1 minuscules en haut de pages. C’était peut être rigolo en 2005 mais cela n’est pas sérieux.

Un titre comme son nom l’indique doit définir le contenu de la section qui va le succéder, ce qui semble plutôt logique.

Comment afficher la balise H1 dans le code HTML ?

Dans votre navigateur, appuyez sur CTRL+U afin d’afficher le code source HTML de la page consultée.

Puis recherchez dans le code <h1> ou <H1> par exemple en utilisant le raccourci CTRL+F afin de trouver automatiquement les balises H1 dans le HTML.

Ne vous faîtes pas avoir par la casse (minuscules/majuscules) cela ne serait pas sérieux…

balise h1

La balise H1 dans le code HTML

<h1 class="entry-title p-name">La balise H1</h1>

Certaines pages contiennent plusieurs balises <h1>, il faut donc poursuivre sa recherche après avoir trouvé la première par sécurité.

Ordre et hiérarchisation des balises H

Les balises H peuvent se succéder afin de définir plusieurs sous sections d’une section ou d’un document HTML.

Un peu comme dans un cours avec des titres et des sous-titres, comme dans un livre avec le titre d’un roman et les titres des chapitres etc.

Voici un exemple avec une seule balise h1.

<h1>Titre le plus important</h1>

<h2>Chapitre 1</h2>
<p>Paragraphe de contenu texte...</p>
<p>Encore un pour la route...</p>

<h3>Sous chapitre 1</h3>
<p>Paragraphe de contenu texte</p>

<h3>Sous chapitre 2</h3>
<p>Paragraphe de contenu texte</p>

<h2>Chapitre 2</h2>
<p>Paragraphe de contenu texte</p>

La balise h1 peut aussi bien représenter le titre le plus élevé d’un document que d’une section c’est à dire d’une partie d’un document.

Comment optimiser une balise H1 ?

La balise h1 est le titre le plus important de la page.

En partant de ce constat, il convient donc d’y placer si possible les mots clés les plus importants à cibler.

Un titre doit idéalement définir le contenu d’un document et est logiquement placé au dessus des ses éventuelles sous-titres. Au dessus, et donc plus visible et certainement vu en premier par les internautes.

Rien de mieux pour les utilisateurs de comprendre immédiatement le sujet de la page qu’ils vont consulter. Ils pourront ainsi plus rapidement s’y plonger ou au contraire la fuir en perdant le moins de temps possible.

Tout cela est donc d’une logique implacable, la balise h1 doit définir se dont traite un document et quoi de mieux que d’y placer les mots clés qui définissent le mieux son contenu.

N’oublions pas que le HTML est issu d’un système de classification documentaire… le SGML.

Exit donc les « <h1>Bienvenue</h1> » qui n’aident pas le lecteur. Renseignez donc la balise h1 avec les mots clés visés par la page à optimiser.

Taille en caractères minimale et maximale de la balise H1 ?

Un titre comme son nom l’indique n’est pas un paragraphe. Il est possible d’utiliser des titres courts ou des titre longs mais il faut rester raisonnable.

Un titre d’un mot peut parfois parfaitement définir le sujet d’une page là où il faudra parfois plusieurs mots pour bien introduire une page ou une section d’une page.

Il n’y a pas de limites strictes à respecter. Toutefois pour le SEO, il serait parfaitement envisageable de récupérer toutes les balises h1 d’un site et d’essayer d’allonger tous les titres les plus courts afin d’y injecter des mots clés pertinents.

La limite maximum ? Dès que cela devient pénible pour l’utilisateur. N’oubliez pas que théoriquement, il s’agit du titre de la page ayant la taille la plus importante, ce qui devrait mécaniquement vous limiter.

Comme toujours en SEO le mieux est l’ennemi du bien…

Identique à la balise TITLE ?

Si vous avez déjà lu le cours sur la balise TITLE, vous avez retenu qu’il fallait placer dans la balise TITLE les mots clés les plus important à l’instar de la balise h1. A partir de là, pourquoi prendre la peine de les différencier ?

Il ne s’agira pas d’une erreur d’avoir une balise TITLE identique à une balise h1.

Toutefois, la grande différence entre ces deux balise est l’affichage. Le TITLE s’affichera de manière très peu visible dans la barre du navigateur et souvent dans les SERP alors que le h1 sera certainement le texte le plus voyant de la page consultée par l’internaute.

A partir de là, on ne peut s’offrir le même type de liberté. Les contraintes éditoriales sont bien plus fortes sur le titre d’une page affichée en gros. Imaginez les titres des articles de votre journal préféré comme le New York Times s’ils étaient tous pensés en priorité pour le SEO et optimisés par des référenceurs…

Vous risquez d’avoir des problèmes si vous ne prenez pas en compte cette dimension éditoriale en optimisant les balises h1.

Par ailleurs, il arrive que Google décide d’afficher dans les SERP le contenu de la balise H1 plutôt que celui de la balise TITLE.

Enfin, en SEO il est souvent important de savoir varier les plaisirs plutôt que de se contenter de répéter les mêmes optimisations partout. Différencier une balise TITLE d’une balise h1 c’est l’occasion d’inclure encore plus de mots clés, d’enrichir le champ lexical de son document et d’aider encore plus les moteurs à thématiser votre contenu.

Dans les faits, une balise H1 contiendra souvent des mots clés similaires à la balise TITLE sans être rigoureusement identiques.

Sur certains sites comme les sites de presse, le référenceur n’aura pas son mot à dire sur le choix d’un titre rédigé par un journaliste. La priorité sera souvent donnée aux lecteurs et non aux bots. Il faudra donc apprendre à respecter les jeux de mots les plus originaux ou vaseux qui ne feront sourire que les lecteurs et laisseront notre ami Googlebot pantois.

Il faudra alors redoubler de ruse et former en amont autant que possible les rédacteurs et journalistes en sachant les appâter. Un titre et donc une balise h1 optimisée pour les moteurs cela peut signifier aussi développer considérable son lectorat et il n’a rien de plus plaisant pour un auteur que d’être lu par le plus grand nombre.

Impact de la balise H1

L’impact de la balise h1 est très faible en SEO.

Le poids de cette balise est globalement le plus souvent sur-estimé par les référenceurs dixit John Mueller de Google himself.

Il ne s’agit donc pas d’une erreur grave en SEO si vous n’avez pas cette balise sur votre page. Bien entendu dans un environnement concurrentiel se priver de cette balise et de ce type d’optimisation simple restera toujours idiot.

Et aujourd’hui, quelle thématique n’est pas concurrentielle ?

Les SERP c’est la guerre et se priver de munitions représente toujours un risque.

A force d’éliminer les optimisations « bonus » il ne faudra pas s’étonner de ne pas ranker ou de ne pas être classé premier. Retenez bien ce raisonnement car il est valable pour presque tout en référencement.

H1 vs les balises H2, H3, H4, H5 et H6

Etant donné que la balise H1 représente le niveau de titre le plus élevé, il est logique que les moteurs de recherche y accordent plus d’importance qu’une balise h6 représentant le niveau de titre le plus bas.

La pondération respecte certainement l’ordre logique du niveau de titre et on peut aisément imaginer qu’à partir de la balise h3 les différences doivent certainement être infimes.

Il ne faut donc pas trop se focaliser sur l’ensemble des balises de votre titraille.

Si possible essayez de placer d’autres mots clés dans les autres balises H. Usez et abusez des synonymes et mots appartenant au même champ lexical mais surtout placez d’autres mots clés cherchés avec votre mot clé principal.

En ayant ainsi des titres riches en terme de mots clés, votre page sera plus susceptibles de se positionner sur un très grand nombre de mots clés différents.

Trop répéter la même expression sur l’ensemble des balises H serait non naturel, de la sur-optimisation, contre productif et donc une erreur.

Utilisez un maximum d’adjectifs qui sont effectivement recherchés et préférez les verbes à l’infinitif plutôt que les versions conjuguées qui ne correspondent pas la plupart du temps à des recherches.

Balise H1 sur une image

Il est possible d’encadrer une image à l’aide d’une balise H1

<h1><img src="/img/matt-cutts-smile.jpg" alt="Le plus beau sourire de Matt Cutts" /></h1>

Google pondérera alors certainement plus fortement le contenu de l’attribut alt de l’image que les autres attributs alt de la page optimisée.

Peut-être que le poids de la balise h1 sera alors légèrement plus basse car Google sera que le contenu de l’attribut alt ne sera pas aussi visible qu’un contenu texte classique encadré d’un h1. Qui sait ?

Nombre de balises H1 par page & HTML5

Historiquement les référenceurs réclament depuis toujours une seule balise h1 par page.

L’arrivée de HTML5 et de ses sections qu’elles soient génériques avec la balise <section> ou spécifiques : article, nav, aside, header, footer à relancer le débat.

Il est logique que chaque section puisse disposer de son propre titre de la plus haute importance c’est à dire d’une balise h1.

En HTML5, utiliser plusieurs balises H1 est normal et logique.

<article>
  <header>
    <h1>Titre Article</h1>
    <p>Auteur : X - Date : X</p>
  </header>
    
  <p>Contenu article</p>
</article>

<article>
  <header>
    <h1>Titre Article numéro 2</h1> <!-- OMG deuxième balise h1 Oo -->
    <p>Auteur : X - Date : X</p>
  </header>
    
  <p>Contenu article</p>
</article>

Les référenceurs ont rapidement tranché le débat en continuant à préconiser d’utiliser une seule balise h1 par page.

Lorsqu’on pose la question à monsieur Google en 2017, il répond qu’on peut en utiliser autant de balises H1 qu’on en a envie (quelle générosité !).

combien de h1 utiliser par page

Combien peut-on utiliser de balise H1 par page selon John Mueller de Google

Remarque lorsqu’on posait la question à l’ancien émissaire de Google, le vénérable Matt Cutts il répondait la même chose 8 ans plus tôt

balise H1 selon matt cutts

Combien de balises h1 par page selon Matt Cutts de Google

Il ne s’agirait donc pas d’une erreur SEO.

Pourquoi les référenceurs n’aiment pas que plusieurs balises H1 soient utilisées ?

Rappelez vous, le mieux est souvent l’ennemi du bien. Plusieurs risques se présentent lorsque vous ne cadrez pas l’utilisation de cette balise.

Vous risquez par exemple de voir utilisé une balise h1 sur le logo d’un site ET sur le titre d’un article. Dommage, vous aurez donc une balise h1 identique sur toutes vos pages.

Cela pourrait peut être diluer l’importance des mots qualifiant vraiment le sujet d’une page et rendrait plus similaire les pages les unes par rapports aux autres au lieu de mieux les différencier.

Le 3ème problème est que lorsqu’on laisse la main libre à un moldu (vous savez les personnes qui ne sont pas des référenceurs….) ils risquent d’en mettre partout pensant trop aux moteurs et cherchant à optimiser le plus possible pour finalement aboutir à de la sur-optimisation.

Quelle valeur accorder à cette balise si elle est partout sur un document se questionnait notre bon vieil ami Matt.

Une seule balise h1 par page reste donc une bonne pratique SEO par sécurité à moins de savoir précisément ce que vous êtes en train de faire.

Accessibilité

Du coté de l’accessibilité, comme souvent on remarque beaucoup d’analogies avec ce que demandent les référenceurs.

C’est à dire qu’il est recommandé de déployer une hiérarchie de titres et ceci de manière logique en respectant l’ordre des balises de H1 à H6.

Il est aussi recommandé d’appliquer ces balises aux véritables titres de la page sans chercher à en cacher.

Balise H1 et site E-commerce

Afin d’illustrer un peu plus ce cours dédié à la balise h1 en SEO, prenons l’exemple d’un site E-commerce.

Les 2 gabarits typiques d’un site e-commerce sont :

  • Catégorie (page listing)
  • Fiche produit

Une catégorie se distingue principalement d’une autre catégorie par son libellé, c’est à dire le nom de la catégorie.

Une catégorie liste des produits en rapport avec le nom de cette catégorie.

Cela signifie certainement que le nom de la catégorie est ce qu’il y a de plus important sur le page, qu’il s’agit de l’élément qui le caractérise le plus.

On encadre donc le nom de la catégorie par une balise h1. C’est simple non ?

Une fiche produit présente de manière détaillée comme son nom l’indique un produit en particulier. A l’instar d’une personne, c’est le nom d’un produit qui le définit le mieux.

Là encore, on place donc le h1 autour du libellé du produit.

Balise H1 et blog

Les gabarits typiques d’un blog sont :

  • Catégorie
  • Article
  • Archive
  • Tag

On veillera à placer le h1 sur chacun des libellés : Nom de la catégorie, Titre de l’article, nom de l’archive, libellé du tag…la logique est implacable.

Balise H1 et home page

La home page n’est pas n’importe quelle page…

La home page dans beaucoup d’entreprises c’est un véritable champ de bataille ! Tout le monde veut y être.

Tellement que pour éviter les trop nombreuses disputes on y ajoute fréquemment des sliders que personne n’utilise, que personne n’aime mais qui font terriblement plaisir à ceux qui y voient leurs idées ou leurs produits y défiler. Nous nous égarons pas… cela sera la thématique d’un autre cours.

Tout cela pour dire que la home page c’est une page drôlement politique dans beaucoup d’entreprises même lorsque les internautes entrent par les fenêtres c’est à dire qu’ils sont nombreux à ne jamais voir la home page.

En tant que référenceur, vous savez que la home page est souvent la page la plus puissante d’un site, celle qui a le plus de popularité. On peut aussi penser que Google pondère plus fortement les pages d’accueil.

Malheureusement, la home page est souvent très générique.

Si on s’amuse au même exercice que celui réalisé précédemment dans ce tutoriel que pour les sites E-commerce et les blogs, on risque d’encadrer d’une balise h1 le nom de son site.

C’est génial pour être premier sur… (suspens)… le nom de son site ! Mais il faut bien avouer que balise h1 ou pas, on est bien souvent positionné en première position sur son nom sans rien optimiser du tout. Super !

Si votre site est un MFA utilisant un EMD tel que tronconneuse-pas-cher.com il y a bien entendu un intérêt mais sur la majorité des sites l’intérêt est limité.

Vous allez me rétorquer : « Pourquoi ne pas essayer de se positionner sur des mots clés intéressants et concurrentiels ? »

Vous avez raison.

Malheureusement, les pages d’accueil se prêtent généralement mal à un titre très visible et optimisé qui ne correspond pas au nom du site. En tant que référenceur il vous faudra batailler ferme avec les graphistes, les décideurs, le service UX et finalement avec l’ensemble des acteurs de la chaîne de production web pour peut être n’aboutir à aucun résultat intéressant en SEO.

Un conseil… gardez vos forces pour d’autres batailles, vous en aurez besoin.

Mais en tant que référenceur, protégez-vous !

Ne pas avoir de H1 sur une home n’est pas choquant en SEO. Et c’est ce qui risque de se passer si la design ne propose pas de titre approprié pour ce gabarit.

En revanche, les référenceurs du dimanche et les autres moldus ne manqueront pas un jour de venir vous expliquer que vous êtes un mauvais référenceur à cause de cela car ils auront cliquer sur un outil en ligne disant que c’est une erreur très grave de ne pas avoir de H1.

Conservez précieusement les écrits lors de vos échanges concernant ce point. Ils vous seront utiles un jour, vous verrez…

Si vous voulez éviter ce type de problèmes ou que vous avez envie « d’embêter » votre équipe technique ou tout simplement que vous disposez d’une superbe équipe qui aime bien faire les choses, vous pouvez par exemple encadrer le logo du site d’un H1 mais uniquement sur la home page.

Wireframe

Les wireframes sont des dessins en noir et blanc parfois appelés « en fils de fer » souvent utilisés pour lister l’ensemble des éléments devant s’afficher sur un gabarit donné et définir leur positionnement.

Il est pratique de travailler sur ce type de document pour rester concentrer sur les informations importantes et ne pas être distrait par les couleurs ou les images par exemple.

C’est le moment idéal pour définir vos h1. Indiquez dessus où doit se placer la balise H1 (et pourquoi pas les autres balises ou microformats…) gabarit par gabarit.

Maquettes

Les maquettes arrivent après les wireframes et parfois sont les seuls documents visuels avant l’écriture du code HTML.

Indiquez directement dessus où votre balise h1 doit être placée et envoyez vos magnifiques gribouillages à votre intégrateur avant qu’il ne commence à travailler.

Vous lui épargnerez de devoir tout refaire, vous gagnerez du temps et ferez économiser de l’argent à votre employeur.

Vous éviterez aussi d’énerver l’intégrateur car il n’est jamais agréable de devoir refaire son travail. Conserver de bonnes relations avec les acteurs techniques est l’une des conditions de réussite en SEO même si cela n’apparaît pas clairement dans les algorithmes de Google.

Vous pouvez nous croire sur parole.

Intégration

C’est l’intégrateur qui va placer la balise h1. Souvent les intégrateurs sont des spécialistes du HTML et du CSS.

Les personnes qui rendront dynamique le site sont d’autres spécialistes, d’autres développeurs. On parle de développeurs front-end et de developpeurs back-end.

Les technologies évoluant tellement vite et devenant de plus en plus complexes, un référenceur doit interagir avec de plus en plus de spécialistes intervenant à un moment ou à un autre du projet.

La plupart du temps il faut s’assurer que l’intégrateur a bien compris vos conseils sur la balise h1 et rien ne vaut une bonne discussion en complément des spécifications. S’il commence à vous parler d’accessibilité, du w3c ou des bonnes pratiques Opquast c’est un très bon signe.

H1 & gabarits des CMS : WordPress, Prestashop, Shopify…

La plupart des CMS utilisent des templates, des gabarits. C’est à dire qu’un seul fichier va définir le code d’un type de pages.

Un seul fichier va définir l’ensemble des fiches produits d’un site ecommerce, un seul fichier va définir comment s’affiche globalement toutes les catégories etc.

Plus précisément, l’information indiquant l’utilisation de la balise h1 pour toutes les balises <h1> de toutes les catégories d’un site est défini à un seul et unique endroit dans un fichier.

Sous WordPress, le nom du template d’une catégorie est souvent category.php, d’un article single.php d’une page page.php et ainsi de suite.

Quasiment tous les CMS suivent la même logique qu’ils s’agissent de PrestaShop, de Shopify, de Magento…

Il suffira alors d’ouvrir le bon fichier correspondant au template à modifier, chercher dedans la balise h1 (via un CTRL+F par exemple) et de l’éditer.

Plugins pour voir les balises H

Visualiser toutes les balises H d’une page, trouver la balise h1 peut être un peu fastidieux surtout si vous n’êtes pas à l’aise avec le code HTML.

Il existe de très nombreux plugins et solutions pour trouver plus facilement ce que vous cherchez en 1 clic. Cherchez « plugin h1 » + le nom de votre navigateur et vous devriez trouver rapidement votre bonheur.

Les dev tools de chrome sont sympathiques ainsi que le plugin web developer toolbar.

Sur ce dernier, cliquer sur « Information » puis sur « view-document-outline » et vous verrez apparaître sur une page toutes les balises H.

webdeveloper toolbar et H1

Comment afficher les balises H1 via un plugin

H1 via web developer toolbar

Balises H affichées via la web developer toolbar

H1 et logo

En tant que référenceur vous vous demandez peut être pourquoi il y a autant de sites ayant un h1 identique sur l’ensemble des pages ou en double placé sur le logo ?

La réponse :

A l’école des intégrateurs, il a longtemps été enseigné de placer une balise H1 autour du logo des sites.

D’un point de vue SEO, placer le même h1 sur l’ensemble des pages et sur un élément non caractéristiques qui n’apporte rien à la sémantique de la page, qui n’aide pas les moteurs à mieux comprendre le sens du contenu d’une page par rapport à une autre n’est pas une bonne idée.

Il faut donc éviter de placer un h1 autour du logo même si en html5 dans une section header cela pourrait certainement avoir du sens.

Ordre des balises Hx et position du H1 dans le code

Au début de ce cours, nous vous avons donné l’exemple de plusieurs balises H avec un positionnement logique en débutant par la balise h1 placée tout en haut puis d’autres balises de type h2 et supérieures.

C’est joli et logique.

Toutefois, est-ce-que cela est utile de respecter l’ordre pour le SEO ? Est-ce-que ne pas respecter l’ordre des balises titres peut être pénalisant ? Placer des h2 avant un h1 va-t-il réduire la pondération de votre balise h1 ?

Malgré ce que disent ou pensent la majorité des référenceurs, la réponse de Google est que cela n’a aucune importance.

Pourquoi ?

Parce que plus de 40% des pages ne respectent aucun ordre et présentent des problèmes de syntaxes tout en donnant de bonnes informations aux internautes.

Il ne s’agit donc pas d’un critère pouvant être pertinent. D’après Matt, il ne faut pas s’en inquiéter.

Ordre de la balise H1 dans le code html

Partie structurelle vs partie contextuelle d’une page

Nous avons vu précédemment qu’il est préférable d’appliquer les balises h et surtout la balise H1 sur des éléments pertinents permettant de différencier les pages les unes des autres.

Ainsi à chaque fois qu’une balise H est appliquée, elle contient des mots clés pertinents et en rapport avec l’expression clé principale ciblée par la page.

Les parties communes à l’ensemble des pages se situent dans le header, dans le footer et dans le ou les sidebar(s). Ces parties ne contiennent pas de mots clés en rapport avec la catégorie, le produit et l’article affiché. Elles contiennent le plus souvent des informations génériques ou servent à la navigation des internautes.

Ainsi une bonne pratique est de ne jamais utiliser une balise H dans l’une de ces zones. 

Evitez par exemple une balise H2 sur le mot « panier » de votre site E-commerce ou sur le mot « Commentaires » de vos articles de blogs.

Bien entendu, comme vu précédemment, la pondération des balises H étant très faible et de plus en plus faible lorsque le niveau du titre est éloigne de la balise H1, l’impact négatif en terme de SEO est certainement négligeable.

Toutefois, il s’agit d’une bonne pratique simple à retenir et souvent facile à mettre en place.

Comment scraper automatiquement les balises H1 d’une page ?

Un crawler SEO fera le travail rapidement et simplement.

Sans logiciel de ce type, il est possible via un fichier excel (.XLS) par exemple de récupérer tous les H1 à partir d’une URL.

Comme toujours c’est l’incontournable plugin « SEO tools for Excel » qui réglera le problème. Essayez la fonction HtmlH1 qui devrait répondre à votre besoin :

=HtmlH1(URL)

Attention cette fonction retournera uniquement le premier h1 du document.

Il existe aussi des fonctions pour la balise h2 et h3

=HtmlH2(URL)
=HtmlH3(URL)

Du coté de la solution en ligne Google Sheet, c’est encore et toujours via un importxml qu’il faudra passer pour obtenir le h1 ou le h2 par exemple.

=importxml("url","//h1")
=importxml("url","//h2")

Synthèse

  • Une seule balise H1 par page si possible
  • Le poids de la balise H1 est très faible
  • L’ordre des balises H n’est pas important mais si possible respecter l’ordre hiérarchique
  • Il n’y a pas de limite de taille maximale ou minimale
  • La balise H1 doit contenir des mots clés à optimiser
  • La balise H1 et la balise TITLE peuvent être identiques ou différentes
  • Ajouter des adjectifs et d’autres mots clés recherchés dans les autres balises H
  • Eviter de répéter le même mot clé partout dans tous les titres
  • Ne pas cacher ou réduire la taille de manière trop importante un h1
  • Google autorise l’utilisation de plusieurs H1 et cela fait même partie du HTML5
  • Google indique que l’ordre n’a pas d’importance
  • Eviter de placer une balise H1 (et d’autres balises Hx) dans les parties génériques du site (header, footer, sidbar…)

Les auteurs

(4 Guides SEO en cadeau : + de 200 pages)