Le Guide ultime des titres (Hn) sous WordPress

Les titres (ou headings) sont sans conteste l’un des outils web les plus importants et les plus méconnus. Pour la plupart des gens, ils servent juste à aérer un peu leur contenu. Il est vrai que les titres WordPress vous permettent de créer des morceaux de contenu ménageant pour vos lecteurs autant d’aérations et de petites pauses. Ils vous évitent ainsi d’avoir un contenu uniquement fait de murs de texte en une succession aride de paragraphes.

Mais ce n’est que le sommet de l’iceberg, vraiment. On peut tirer infiniment plus d’un usage adéquat des titres qu’une simple aération pour votre contenu.

balises-hn-WordPress

 

Les titres de A à Z

Les titres HTML sont signalés par des balises allant de H1 (représentant le titre primaire, au sens large, celui qui se trouve en tête de page), jusqu’au tout dernier niveau, avec le « presque-jamais-employé », j’ai nommé le H6…

Quand j’ai débuté en tant que développeur web freelance, un de mes amis m’a envoyé le squelette en CSS qui lui servait de base pour tous les sites qu’il créait. Tout en haut figurait le style pour – je vous le donne en mille – les headings 1 à 6.

h1, h2, h3, h4, h5, h6 {
font-family: "PT Sans", arial, sans-serif;
color: #000000;
}

h1 {
font-size: 34px;
font-weight: 400;
text-transform: uppercase;
margin: 40px 0px;
}

h2 {
font-size: 32px;
line-height: 35px;
}

h3 {
font-size: 24px;
line-height: 32px;
}

h4 {
font-size: 24px;
line-height: 28px;
}

h5 {
font-size: 10px;
font-weight: normal;
line-height: 16px;
}

h6 {
}

J’évoque ceci pour trois raisons essentielles :

  • Afin que vous puissiez utiliser et adapter ces styles à votre sauce
  • Afin que vous vous rendiez compte à quel point les H5 et H6 ont peu d’importance
  • Et pour que vous vous fassiez une idée de la hiérarchie globale des titres sous WordPress

Vous pouvez vous amuser avec ça et vous assurer que chacun de vos headings est aussi beau et parfait que vous le souhaitez. Mis à part ce petit « ravalement de façade » pour votre site, la chose vraiment importante va être la manière dont vous utilisez les titres.

 

H1, le Big Boss

Guide ultime des titres

Vous vous souvenez, de cette phrase qu’ils répètent tout le temps dans les films et principalement dans la série Highlander, « il ne peut en rester qu’un ! » ? Et bien c’est un peu ce dont il est question ici. Vous ne pouvez utiliser qu’un seul H1 sur chaque page ou article.

Dans l’écrasante majorité des cas, WordPress enrobe automatiquement votre titre de page ou d’article d’une balise H1, et il n’est donc pas vraiment nécessaire de s’en soucier. (La plupart des thèmes populaires, comme Divi par exemple, ne modifient pas cette fonctionnalité, mais certains thème le peuvent, donc gardez ça en tête.) En temps normal, vous n’avez tout simplement pas besoin d’ajouter vous-même le H1.

Signalons quand même qu’il y a eu pas mal de pinaillages sur ce sujet à une époque, puisque vous pouvez techniquement utiliser un nouveau H1 quand vous indiquez une nouvelle section, mais les moteurs de recherches ont tendance à ne pas prendre ça en compte et si vous avez besoin de faire appel à la même esthétique, vous pouvez toujours modifier vos H4, H5 ou H6 pour qu’ils ressemblent à votre H1.

Le choix de votre H1 repose essentiellement sur deux critères, dans cet ordre :

  1. L’expérience utilisateur
  2. Le SEO

Il va donc s’agir avant tout de donner envie à votre lecteur de lire votre article. Là, on est vraiment dans l’aspect marketing. Au-delà des quelques clés que vous connaissez sûrement, ne perdez pas de vue les points suivants : le titre H1 doit décrire assez clairement le contenu de votre article ET indiquer de manière limpide ce qu’il apportera au lecteur.

Et pour ce qui est du référencement, les mots-clés sont une bonne chose mais n’en abusez pas. Autrefois, les H1 jouaient un rôle très important dans l’algorithme Google, mais celui-ci a été revu à la baisse depuis quelques années. D’ailleurs votre H1 ne doit surtout pas se transformer en énorme « réservoir à mots-clés » – les moteurs de recherche n’apprécient pas particulièrement… Ciblez donc un ou deux mots-clés, les principaux, cela suffit amplement. Nous reviendrons plus en détail sur le SEO dans la dernière partie de cet article.

Mais ici, la règle essentielle à retenir est la suivante : ne sacrifiez pas l’expérience utilisateur au profit du SEO. Votre titre doit rester avant tout lisible et attrayant. Ne gâchez pas ces qualités sous prétexte glisser un mot-clé de plus dans votre H1… Plus d’informations à ce sujet dans notre billet sur les articles WordPress.

 

H2, l’élément moteur

Guide ultime des titres

Mes petits doigts saisissent des titres H2 à longueur de temps. C’est la balise de titre WordPress la plus utilisée, parce qu’elle est pratique et répond à de nombreux usages. Contrairement au H1, le H2 n’est pas limité en nombre, grâce à lui vous pouvez séparer votre contenu pour le rendre plus lisible. Il vous servira à distinguer les grandes parties de votre article ou de votre page. Si besoin, vous disposez de suffisamment de niveaux d’intertitres pour que le H2 vous permette de vous focaliser sur cette fonction : indiquer les points forts de votre contenu, ses sujets principaux. En un coup d’œil, les H2 permettent de comprendre comment le sujet évoqué dans le H1 est traité, par quelles étapes on va passer et comment l’article s’articule.

Donc, pas la peine à ce stade de trop vous attarder sur l’aération du contenu : si des parties sont trop longues, vous pourrez encore le subdiviser avec des H3.

Par exemple, la plupart des titres qui divisent cet article en différentes parties sont des H2. Il est donc très facile d’identifier les différences entre le titre d’un article (H1) et les titres de parties (H2). Et soyons clair : vous pouvez tout à fait vous contenter de ces deux-là pour élaborer une stratégie de titres efficace. Le H3 agira comme bonus, si besoin.

Comme je le disais… parmi les différents types de titres, le H2 est le moteur de votre article, et puisque vous commencez à vous intéresser de près aux titres WordPress, je peux d’ores et déjà vous annoncer que le H2 va devenir votre nouveau meilleur ami.

 

H3, l’acolyte

Guide ultime des titres

Si le H2 était Batman, le H3 serait Robin. Pas tout le temps indispensable, mais toujours là quand on a besoin d’un petit coup de pouce pour se tirer des situations compliquées.

D’une manière générale, vous pouvez considérer le H3 comme une simple option. Nombre de posts que j’écris n’en comportent pas un seul, mais quand j’ai besoin de détailler à fond un ou plusieurs sujets, l’emploi des titres de niveau 3 sous la ou les parties concernées m’offrent beaucoup de contrôle sur la manière dont je présente mes informations.

Regardez ça ! Les H3 permettent de faire des sous-parties.

J’ai tendance à considérer les H3 comme les listes non ordonnées ou listes à puces (UL en HTML), à cette différence près que je peux les faire suivre de plusieurs paragraphes de détails et les rendre beaucoup plus élégants et agréables à lire.

Prenez le passage que vous êtes en train de lire. Si j’avais dû inclure ceci dans une une liste non ordonnée, elle aurait eu l’air assez rebutante et farfelue. Et il ne contenait pas assez d’informations à lui seul pour faire l’objet d’un point majeur au sein de la discussion globale. J’ai donc choisi de le démarquer en le mettant sous un H3. Pas mal, non ?

 

H4 à H6, les grands oubliés

Oooh, pauvres H4, H5 et H6. Vous êtes de si bons titres qui voudriez tant être utilisés de temps en temps, mais la plupart des gens ne savent pas ou ne voient aucune raison de vous employer… Alors vous êtes oubliés par l’immense majorité des webdesigners et des auteurs.

J’entends par là que la plupart des fichiers CSS ne vous incluent même pas dans leurs styles. (et vous pouvez jeter à nouveau un coup d’œil à mon exemple ci-dessus, il y a bien un emplacement pour le H6, mais il est vide… Donc, même moi je me moque un peu de vous, pas vrai ?)

Les rédacteurs web et les spécialistes du SEO s’accordent à dire que l’usage de ces niveaux de titres est totalement facultatif. Les inclure ou non ne nuira pas à vos classements sur les moteurs de recherche – mais ça n’aidera pas non plus à les améliorer.

En fait, le seul usage vraiment intéressant qu’on peut en faire est celui que j’ai brièvement évoqué dans la partie sur le H1 : les tests et l’expérimentation autour des styles et du CSS…

 

Les titres et le SEO

Guide ultime des titres

Tout d’abord, si vous n’utilisez pas le plugin Yoast SEO, laissez-moi vous dire une chose: vous devriez ! Avec cet outil, vous tirerez le maximum de vos titres pour votre classement dans les recherches organiques.

Comme je l’ai dit plus haut, il ne s’agit pas bien sûr d’utiliser vos titres comme des bennes à mots-clés ! Évidemment, si vous voulez que les robots des moteurs de recherche analysent correctement votre site, la chose la plus intelligente à faire est d’indiquer clairement le mot-clé principal de vos pages et de vos articles dans la partie la plus évidente à scanner. Mais ce n’est pas une raison pour le mettre dans chaque titre – tout est une question de dosage. Il devrait apparaître :

  • Dans votre titre de page ou d’article (H1)
  • Dans quelques-uns de vos titres de parties (H2)

Lisez attentivement les conseils prodigués par Yoast à propos de vos titres pour voir ce qu’il attend et quel poids il donne à chaque élément.

 

Le mot-clé principal apparaît dans 1 (sur X) intertitres dans votre texte.

Guide ultime des titres - Avertissement Yoast 1

Même si un mot-clé a été utilisé au moins une fois dans un titre de partie, ce n’est pas toujours suffisant pour bien vous positionner dans les moteurs de recherche, en fonction du nombre total de vos intertitres. Yoast va vous avertir si le pourcentage de présence de votre mot-clé dans les titres est correct. Dans un tel cas, j’ajouterais probablement le mot-clé dans le dernier intertitre de l’article, afin de m’assurer que j’emploie les bonnes pratiques.

(Ici, la pastille orange a été obtenue uniquement parce que j’ai activé la case « article important », qui rend Yoast plus regardant à tous points de vue – voir cet article sur les Cornerstones pour en savoir plus.)

 

Le titre SEO est plus grand que la limite lisible.

Guide ultime des titres - Avertissement Yoast 2

La taille des titres joue elle aussi un rôle important. Vous voulez qu’ils soient visibles dans leur intégralité, pas seulement pour les robots des moteurs de recherche, mais aussi et surtout pour les humains qui feront une véritable recherche… Donc, si votre titre SEO (qui correspond généralement à votre H1) est trop long, les gens ne pourront peut-être pas le lire entièrement et risquent de passer leur chemin.

C’est pourquoi ce marqueur est orange. Ce n’est pas si grave d’avoir un titre un peu trop long, mais ce n’est pas forcément une bonne chose pour autant.

 

1 des intertitres est suivi par plus de 300 mots, ce qui est le maximum recommandé.

Guide ultime des titres - Avertissement Yoast 3

Alors, pour être franc, cet avertissement provient de l’analyse de lisibilité de Yoast et non de l’onglet SEO. Il n’empêche, c’est hyper important.

Pourquoi ? Parce que votre article (ou votre page) doit toujours rester lisible et aéré. C’est d’ailleurs pour ça qu’on trouve des memes internet à propos des murs de textes interminables. Et c’est aussi la raison pour laquelle on croise des tas de « TLDR » (Too long, didn’t read – Trop long… j’ai pas lu) dans les commentaires suite à des posts monolithiques… à tel point que ce sigle est devenu chez les anglo-saxons le point de repère en fin d’article pour proposer un résumé aux lecteurs pressés !

Sur le net, les gens ont besoin de petits blocs d’informations digestes et 300 mots est clairement la limite haute. Ça ne veut pas dire que ce contenu de trois cent mots maximum doit être simplifié à l’extrême ou nivelé par le bas, mais cela signie que vous devez pouvoir décomposer vos idées en différentes parties cohérentes et traiter ces sous-rubrique de manière individuelle… de préférence entre des titres H2 ou H3.

 

Oh, et une dernière chose…

Vous avez vu ce que je viens de faire dans la partie précédente ? J’ai utilisé des titres H3 pour séparer ces points afin de pouvoir parler en détail de chacun d’eux. Dans un premier temps, j’avais fait plus court, sous forme de liste à puces. Mais j’ai compris qu’il fallait que je détaille un peu plus, et j’en suis venu tout naturellement à utiliser des intertitres. Comme quoi, il n’est pas si rare que j’applique mes propres préconisations !

Mais comme indiqué plus haut, les seuls niveaux de titre obligatoires sont le H1 et le H2… Et encore, même le H2 n’est que recommandé, puisque 300 mots est considéré de nos jours comme le minimum pour que Google vous inclue dans ses classements. Mais il y a fort à parier que vous voudrez écrire un peu plus que ça.

Alors vous allez utiliser les deux. Et souvenez-vous que le H1 est ajouté automatiquement par WordPress (qui se base sur le titre que vous avez indiqué pour votre article ou votre page).

titres wordpress

Sous WordPress, inutile d’utiliser la balise H1 (titre 1) dans l’éditeur

 

L’usage des titres WordPress au quotidien

L’usage correct des titres devrait vous venir naturellement à mesure que vous vous perfectionnerez en création de contenu. Vous trouverez votre voie, apprivoiserez votre flux, et apprendrez comment séparer le contenu que vous écrivez en blocs d’idées. Je ne vais pas vous mentir, ça peut être un peu difficile de s’y habituer. Mais une fois que c’est acquis, vos articles vont briller, autant pour vos lecteurs que pour les robots qui les scanneront.

Tldr : Pas besoin de H1 parce que WordPress le fait pour nous, mettez des tas de H2, quelques H3 pour décomposer les parties complexes et H4 à H6 si vous voulez jouer avec les styles.

Avez-vous d’autres astuces à partager concernant les titres WordPress ? N’hésitez pas à nous en faire part dans les commentaires.

Le Guide ultime des titres (Hn) sous WordPress
4.5 pour 35 votes

A propos de l'auteur...

David

J'ai longtemps travaillé entouré de mots, dans une librairie. Aujourd'hui rédacteur freelance et traducteur anglais-français, je vous aide à booster vos sites web avec du contenu de qualité.

Mes domaines de prédilection : marketing web, entrepreneuriat, crypto-monnaies, consommation éthique et responsable, écologie, monde du livre... Pour en savoir plus, rendez-vous sur mon site redak.fr.

6 commentaires pertinents à ce jour ;)

  • édith dit :

    Bonjour,
    Je pense faire ce que vous préconisez dans ce billet mais, j’ai une question tout de même.
    Mon site traite de la cuisine (recettes) et pour publier ma recette dans les normes, je code celle-ci à la main avec la norme “Schema.org Type: Recipe ” et donc sans plugin.
    Ma recette débute obligatoirement par un h1.

    Réussir un rougail.

    Je me retrouve donc avec deux balises h1 ! Mon titre article et mon titre recette.

    Que me conseillez-vous de faire ? continuer comme cela ou changer ma manière de faire ?
    Merci

  • WP Formation dit :

    @Edith, une seule balise h1, cela me semble bien plus approprié !

  • édith dit :

    Merci pour la réponse apportée.
    Je ne voulais pas changer mon code “récipe” à cause du résultat dans les données structurées de Google.
    Je viens de faire une vérification et le titre de ma recette ressort correctement dans l’outil donc, je vais dorénavant appliquer votre conseil et mettre un h2 titre dans mon code “Schema.org”
    Merci…

  • yann04 dit :

    Bonjour. Merci pour votre article. J’ai toutefois une question :
    Dans le cadre du SEO est-ce que le chapo d’un article peut être ou doit etre en h2 Merci.

  • Thomas Hardi dit :

    Bonjour,

    Les auteurs de thème, eux aussi, connaissent mal l’utilisation des Hn, je vois des thèmes où le menu de navigation est en H3 pui je voisle titre du site quand on lit un article apparaît en H1, au détriment du titre de l’article.
    Même les auteurs de thèmes de respectent pas la hiérarchie des Hn

  • Eva dit :

    Bonjour,
    j’ai un thème enfant de StoreFront et je découvre que H1 = titre du site …. :( Les autres thèmes par défaut non pas l’air mieux.. Twenty Fifteen a un H1 vide et le titre de l’article se met en H2…. C’est problématique non ??

Vous pouvez laisser votre commentaire ci-dessous et même vous abonner aux commentaires de l'article.
Nota: pour le champ "Site Web", seuls les liens vers vos réseaux sociaux sont autorisés.

Likez, Tweetez, Commentez, Partagez !

Partagez38
Tweetez58
Partagez
Enregistrer1
Buffer6
103 Partages