Une bonne structure de texte est très importante pour le design, l'expérience utilisateur et le référencement naturel. On vous explique comment les balises de titres fonctionnent. Les balises H, également appelées heading, sont disponibles au niveau du code source. On vous montre comment optimiser votre titraille pour plus de visibilité web.

‍

Le rôle de la titraille est multiple sur le web. En effet, la hiérarchie de contenu d'une page est composée de plusieurs niveaux de titres titres, aussi appelées des “headings”. Le niveau 1 est le plus important et s'appelle un titre H1 ou une balise title selon les outils ou les expert.e.s. Le second niveau s'appelle une balise de titre H2 et ainsi de suite. En un coup d'oeil, gr'ce à vos titres, un visiteur doit être capable de :

• Comprendre ce que vous offrez comme produit ou service
• Saisir rapidement ce que cet objet ou service va faire pour améliorer sa vie
• Quand (l’occasion) et comment l’acheter ainsi que comment en prendre soin

Les balises H sont vos titres et vos sous-titres. H, c'est un acronyme pour headings (titres en anglais) qui font au code HTML qui permet de structurer et hiérarchiser le contenu d'une page Web. On dénombre 6 niveaux de hiérarchisation : de H1 à H6. H1 étant le plus important, H6 étant le moins important. Les 3 premiers niveaux (balise H1, balise H2 et balise H3) communiquent des informations sémantiques aux crawlers des moteurs de recherche.

<H1>Titre qui indique la thématique principale d’une page</H1>

<H2>Titre de votre rubrique, H2 indiquant que cette section parle d'une sous-thématique plus spécifique que le H1</H2>

<H3>Titre de votre rubrique, H3 indiquant que c'est une sous-section de la rubrique H2</H3>

<H4>On peut aller encore plus loin, mais ce niveau n’est pas pris en compte par les moteurs de recherche.</H4>

<H5>Titre de votre rubrique, H5 indiquant que cette section est moins importante que la H4. Ce niveau n’est pas pris en compte par les moteurs de recherche.</H5>

<H6>Titre de votre rubrique, H6 indiquant que cette section est la moins importante de toutes. Ce niveau n’est pas pris en compte par les moteurs de recherche.</H6>

La structure de votre contenu doit être pensée pour vos lecteurs et lectrices avant tout. Il faut organiser votre contenu en sections de façon à ce que la page soit claire pour vos lecteurs. Vous devriez être capable de comprendre de quoi parle une page Web en lisant uniquement les titres et les sous-titres (vos balises H). Après tout, c’est exactement ce que les robots de Google font !

Une titraille bien pensée, c’est l’art de clarifier son message pour que les clients puissent mieux nous écouter. Voici les règles que vous devriez suivre pour optimiser vos balises :

Conseil de rédaction : 12 mots maximum par titre

Nos yeux ont tendance à lire les titres d'abord puis l'article après. Les titres nous vont vous dire si oui ou non vous allez lire la suite. C'est pareil dans le web ! Pour des raisons de lisibilité, il ne faut pas transformer vos titres en romans de 100+ mots. On fait court, simple et lisible : 12 mots maximum. Commencez par trouver un titre qui résume parfaitement votre section. Pour une efficacité redoutable, vos titres devront à la fois répondre aux attentes des internautes et des robots.

L'ordre des balises et important

On respecte une hiérarchie de contenu logique avant tout. Comprenez par là qu'à partir du moment où on parle d'ordre, on parle de suite logique. Donc concrètement : une balise H1 ne peut être suivie d'une balise H3. Il faut avoir une organisation du contenu gr'ce à la titraille.

Comment rédiger un H1 ?

La balise H1, c'est la priorité à analyser et à optimiser en SEO !  Il faut utiliser le mot-clé principal dans la balise H1 et bien expliquer le produit/service/sujet. Il faut toujours prendre soin de ne pas copier le H1 d'une autre page.

Parfois, juste une optimisation au H1 de la page (ou en ajouter un si la page n'en n'a pas) va améliorer votre positionnement au sein des moteurs de recherche. Sur la plupart des sites éditoriaux, la balise H1 représente le titre de l'article. Dans Shopify et dans Etsy, c'est le nom du produit dans la fiche produit.

Quel est le role de la balise H2 ?

C'est une balise qui ouvre une section de votre texte. Il faut l'optimiser avec des mots-clés secondaires si possible.

Qu'est-ce que le H3 ?

Les balises H3 sont utilisées pour décomposer davantage les sections H2 en sous-sections. Un H3 n'est pas toujours nécessaire. On l'utilise souvent dans les landing pages et les articles de blogs plus longs (comme celui-ci). Les titres H3 sont utiles pour mettre en évidence des points spécifiques, cibler des termes de longue traîne, ou encore souligner des niches particulières dans votre contenu. Il est crucial d'utiliser le H3 judicieusement pour améliorer la lisibilité et optimiser votre contenu pour le SEO.

Les balises H4, H5, H6 sont importantes pour l'accessibilité mais pas pour le référencement naturel

Les balises H4, H5 et H6 sont quant à elles, très peu utilisées. Elles n'ont de sens qu'à partir du moment où votre contenu est divisé en plusieurs parties (souvent, des contenus très longs). Aucun intérêt donc de retrouver une H5 sur une fiche produit par exemple !

• Évitez les titres clickbait (ou pute à clic en bon français)
• Résumez parfaitement le titre de la section en reprenant un mot ou une expression clé
• Évitez les titres à rallonge : 10 à 12 mots maximum
• N’hésitez pas à vous adresser à eux en leur posant une question du genre : À quoi correspond le taux de rebond dans Google Analytics ?

On a des conseils de rédaction SEO pour vous.

• Mettez le mot clé principal dans la meta titre et si possible dans votre balise H1. Sinon, mettez le second mot clé le plus important ou ayant le plus gros volume dans votre H1.
• Utilisez les mots clés secondaires pour les balises titre H2 et H3. Besoin d'aide pour comprendre ce qu'est un mot clé ?
• Évitez de tomber dans la sur-optimisation : si vous ne voyez que le même mot clé non stop dans tous vos titres, vous avez suroptimisé votre contenu.
• Évitez les titres trop longs : 10 à 12 mots maximum
• Ne soyez pas hors-sujet, “inscription à l'infolettre” n'est pas une thématique importante ni une section de votre page.
• Évitez les doublons : le contenu d'une balise H1 doit être unique pour chaque page.

L'exercice est parfois complexe car il faut faire un compromis parfois entre les besoins des utilisateurs et celui des robots (et ceux de l'entreprise !)

Et où inscrit-on nos H1, H2 et H3 ?

Pour tes propres textes, c'est bien simple. Tant dans Word que Google docs, tu trouveras comme styles tes fameux Titres 1, 2, 3, etc. Tu te demandes peut-être pourquoi je ne te parle pas des H4,5,6 etc.? Bien qu'ils aient leur rôle à jouer pour l'accessibilité et la structure du texte, ils ne sont pas considérés par les moteurs de recherche. Eh oui, google n'aime que les H1,2 et 3, alors focus là-dessus pour insérer tes mots-clés!

Voilà, tu as désormais plusieurs éléments en poche pour organiser ta structure et fournir au développeur ce dont il a besoin pour une page web cohérente, et bien visible sur les moteurs de recherche.

Voici un exemple concret avec la page d'accueil du site Quartier Artisan.

• Mettez le mot clé principal dans la meta titre et si possible dans votre balise H1. Sinon, mettez le second mot clé le plus important ou ayant le plus gros volume dans votre H1. 
• Utilisez les mots clés secondaires pour les balises titre H2 et H3. Besoin d’aide pour comprendre ce qu’est un mot clé ?
• Évitez de tomber dans la sur-optimisation : si vous ne voyez que le même mot clé non stop dans tous vos titres, vous avez suroptimisé votre contenu. 
• Évitez les titres trop longs : 10 à 12 mots maximum
• Ne soyez pas hors-sujet, “inscription à l’infolettre” n’est pas une thématique importante ni une section de votre page. 
• Évitez les doublons : le contenu d’une balise H1 doit être unique pour chaque page.

L’exercice est parfois complexe car il faut faire un compromis parfois entre les besoins des utilisateurs et celui des robots (et ceux de l’entreprise !)

Voici un exemple concret avec la page d'accueil du site Quartier Artisan.

1) Comme tu peux le constater, il n'y a pas de H1 dans la présente structure. Pourtant, c'est le titre principal le plus essentiel à inclure pour bien se positionner sur les moteurs de recherche. Assure-toi donc de toujours choisir un H1 qui va droit au but, clair et bien précis. Dans le cas de notre exemple, j'inscrirais en H1 « Le Quartier artisan : un OBNL au rayonnement provincial ». Notion importante : comme rédacteur web, on s'en tient à un seul H1 par page.

2) Par la suite, je favoriserais deux H2 distincts pour énoncer les deux missions du Quartier artisan :

Premier H2 : Dynamiser la région de Mégantic Deuxième H2 : Rassembler et outiller les artisans entrepreneurs québécois 3) En H3, je mettrais en valeur d'autres sous-titres en lien avec chaque mission. Par exemple, si on prend celle de rassembler et outiller les artisans entrepreneurs, j'inscrirais en H3 les outils, offres d'emplois, etc.

4) Je ne sais pas si tu as remarqué, mais dans la structure actuelle du Quartier artisan, il y a un H3 très, très, très long. Rappelle-toi la règle suivante : 10 à 12 mots maximum par titre!

Je vous conseille dans un premier temps, d'installer l'extension de navigateur incontournable en SEO :

Web developer pour Firefox ou pour Chrome . L'outil permet d'entourer les différentes balises d'une page web. Il permet également de fournir un « plan du document », une manière de représenter plus graphiquement la structure d'un site.

Je vous conseille dans un premier temps, d’installer l’extension de navigateur incontournable en SEO : Web developer pour Firefox ou pour Chrome. L’outil permet d’entourer les différentes balises d’une page web. Il permet également de fournir un « plan du document », une manière de représenter plus graphiquement la structure d’un site. 

Valider la hiérarchie de contenu d'une page : mode d’emploi

Voici une marche à suivre qui te permettra d’obtenir des informations super pertinentes sur la hiérarchie de contenu des sites web que tu visites.

1. Que ce soit dans Chrome ou Firefox, installe l’outil « web developer toolbar » sur chrispederick.com. Une fois cette extension installée, tu apercevras un petit écrou dans ta barre de navigation.
2. Une fois que l’extension est installé sur votre navigateur, il faut charger votre page web à analyser.
3. Puis, il faut cliquer sur l’extension. L’icône de la WebDev Toolbar est un écrou.
4. Il faut cliquer sur l’onglet Information puis Document Outline pour voir la hiérarchie de votre page.
5. Finalement, clique sur « View document outline ». Un autre onglet va s’ouvrir pour vous montrer une visualisation. Si cela ne marche pas, vous pouvez recharger la page et retenter. D’habitude, 9 fois sur 10 ça marche. 
   

On a rédigé un article qui va plus en détail sur comment penser la hiérarchie de votre contenu dédié aux rédacteurs Web. N’hésitez pas à le consulter si vous voulez tout savoir sur cet aspect du SEO.

‍