Balises h1 à h6 et référencement sur WordPress : bien gérer son balisage


Suite à mon article sur les balises h1 à h6, on m'a demandé des conseils sur l'optimisation du balisage sur un blog WordPress. Comment savoir si un thème est réellement optimisé pour le référencement à ce niveau ?

C'est une question intéressante car beaucoup de créateurs de thèmes WordPress les présentent comme "SEO-optimized", "SEO-friendly", "SEO-ready"... mais bien souvent, les blogueurs n'ont aucune idée de ce que ces termes impliquent vraiment !

Bien sûr, pour savoir si un thème WordPress est "optimisé pour le référencement", on ne se limite pas à étudier s'il a bien une balise h1 et autres balises de titre. Néanmoins, regarder cet aspect est un premier pas utile pour évaluer les compétences du créateur du thème en matière de SEO et ne pas se limiter à un discours marketing qui vous affirme que le thème est optimisé.

Balise h1 et titres secondaires (h2 à h6) sur WordPress

La balise h1 est un bout de code HTML qui sert à mettre en valeur le titre le plus important de votre page, celui qui donne le plus d'indications sur le contenu de la page. Voici donc ce que j'ai tendance à recommander en la matière :

  • Sur votre page d'accueil, la balise h1 doit servir à encadrer le titre de votre blog qui est en général sur cette page l'information la plus importante.
  • Sur les pages internes du blog, utilisez la balise h1 pour encadrer le titre de vos articles (si vous êtes sur une page Article), le nom de vos catégories (si vous êtes sur une page Catégorie), le nom du mot clé (si vous êtes sur la page d'une étiquette WordPress ou sur la page des résultats de recherche).

Les autres balises doivent s'organiser en conséquence, par ordre d'importance entre h2 et h6.

Ça signifie que si vous êtes sur la page d'un article et que celui-ci comporte des sous-titres, ils seront en h2 (puisque la balise h1 est utilisée par le titre principal de l'article). De même, quand vous êtes sur la page d'une Catégorie, comme ma page Créer un blog, le nom de la catégorie est en h1 donc les titres de chaque article doivent être en h2.

Le cas de la sidebar

Si votre blog comporte une sidebar avec des widgets, quelle balise devez-vous utiliser pour encadrer les titres de ces widgets ? Voilà un sujet sur lequel les référenceurs n'ont pas tous le même avis !

Certains préconisent l'usage d'une balise h3 et plus

Certains estiment que les titres des widgets peuvent être encadrés par des balises h3, h4 ou h5. Pourquoi ? Parce que la plupart du temps, les contenus principaux de votre blog ne vont pas au-delà de la balise h3. Vous avez un gros titre en h1, des sous-titres en h2, éventuellement un ou deux niveaux d'organisation supplémentaires (h3, h4)... En utilisant une balise h3, h4 ou h5, on indique donc à Google que les widgets sont moins importants que le reste du contenu du blog.

D'autres préfèrent n'utiliser aucune balise hn

C'est mon cas ! Les widgets présents dans la sidebar du blog ont tous des titres sans balise hn. Pourquoi ce choix ?

Quand vous choisissez une balise, vous répondez en fait à une question simple : quelle importance ai-je envie de donner à ce titre par rapport au sens global de la page ? Or, une sidebar est commune à plusieurs pages de votre blog et comporte des widgets assez généraux : de la publicité, des liens vers les réseaux sociaux, un formulaire d'inscription à votre newsletter, des articles aléatoires, etc.

Bien souvent, ces widgets n'ont pas de lien sémantique avec le sujet de votre page. Imaginons par exemple que vous ayez écrit un article sur le chocolat. Que recherche un visiteur qui vient sur cette page ? Des informations sur le chocolat. Le fait que vous ayez une newsletter ou un compte Facebook n'a pas vraiment de rapport avec le sujet.

Pour cette raison, j'ai tendance à ne pas utiliser de balises hn pour mettre en forme les titres de mes widgets mais de simples balises "div".

L'apparence de la balise h1 et des autres

Souvent, quand on débute en HTML, on a tendance à croire que les balises h1 à h6 servent avant tout à contrôler l'apparence des titres... Par exemple, qu'un titre en h1 sera beaucoup plus gros qu'un titre en h2.

De ce fait, on oublie parfois qu'elles ont avant tout un rôle sémantique, c'est-à-dire qu'elles aident les moteurs de recherche (et les visiteurs) à identifier rapidement le sens des pages.

Par défaut, la plupart des thèmes WordPress vous imposeront une mise en forme prédéfinie pour les titres et oui, souvent, la balise h1 utilisera une police d'écriture plus grosse que le h2, lui-même plus gros que le h3. Mais si vous avez la possibilité de modifier le code de votre blog, ce sont des choses qu'il est possible de changer. Vous pouvez ainsi adopter la bonne structure de balises, qui sera réellement optimisée pour le référencement, tout en respectant vos préférences en matière de design !

Regardez sur mon blog par exemple : ici, c'est le petit encart "Créer un blog" qui est en h1 alors que le gros titre de chaque article n'a qu'un petit h2.

Balise h1 discrète sur WordPress
Balise h1 discrète sur WordPress

Vous trouverez rarement un thème WordPress 100% à votre goût du premier coup. Chaque référenceur a ses propres convictions comme je vous l'ai montré avec la question de la sidebar. Votre objectif sera donc de trouver un thème "relativement bien optimisé" (balises h1 et h2 au bon endroit !), dont vous pourrez ensuite affiner la personnalisation.


Poster un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

24 commentaires sur “Balises h1 à h6 et référencement sur WordPress : bien gérer son balisage
  • Faustine

    Bonjour,

    Tout d’abord un grand merci pour votre blog qui est une vraie mine d’information, je le dévore. Néanmoins, m’étant lancée d’abord sur wordpress.com, version gratuite et limitée, bien souvent je ne peux appliquer tous les conseils. #frustree

    En l’occurrence, j’ai posté une dizaine d’articles sur mon blog et je me suis dit que j’allais vérifier la bonne utilisation des balises. Je m’aperçois, lorsque je vérifie avec l’outil WebRankInfo, que la page d’accueil affiche un H1 sur le logo ce qui est bien. La conséquence étant que les titres des articles apparaissent en H2, soit. Et lorsqu’on est sur un article la balise H1 a disparu et le titre de mon article reste toujours en h2. Bref j’ai des pages sans h1…Pourtant esthétiquement, les titres de mes articles sont différents des titres h2 que j’introduis moi-même dans le corps de mon article…Je suis un peu perdue et ne sais pas quoi faire. Savez-vous si l’on peut y remédier sur wordpress gratruit ? Merci par avance, Faustine

    Répondre à Faustine
    • Marlène

      Bonjour Faustine, hormis en changeant de thème et en optant pour un thème mieux optimisé, non. Ce sont toutes les limites de cette plateforme en gratuit. De manière générale, quand on veut créer un blog en optimisant son référencement ou en ayant une approche un peu « poussée », mieux vaut choisir WordPress.org qui offre plus de possibilités.

      Répondre à Marlène
  • Guillaume

    Bonjour Marlène,

    Merci pour cet article très instructif ! Je viens dessus via la requête h1 WordPress.

    En effet, je vois que j’ai plusieurs balise h1 sur mes pages. L’une est dans le header et l’autre dans le titre.

    Or, comme tu le sais, il est conseillé de n’avoir qu’un h1. Comment je peux faire pour retirer manuellement le h1 du header (qui est le nom de mon site).

    En mode HTML, je n’ai accès qu’au corps de l’article…

    Merci !

    Guillaume

    Répondre à Guillaume
    • Marlène

      Bonjour Guillaume, pour modifier le balisage existant, ça se joue directement dans les fichiers du thème WordPress donc il faut coder. Si le thème a été mal codé au départ, il faut le modifier… et il est conseillé de ne pas toucher directement aux fichiers du thème (situés dans le dossier wp-content > themes > nomdutheme de WordPress) mais de créer ce que l’on appelle un thème enfant (cet article en parle). Ça permet d’effectuer des modifications qui sont préservées si jamais le thème « parent » est mis à jour par son créateur. Si tu n’es pas à l’aise avec le code, tu peux aussi suggérer au créateur du thème d’optimiser le balisage lors d’une future mise à jour.

      Répondre à Marlène
    • Guillaume

      Merci Pour ta réponse !
      En effet, je suis bloqué car j’utilise la version totalement gratuite. En mode CMS only, sans gestion avec Filezila etc. Est ce quand même possible de récupérer et de jouer avec le code HTML et CSS via la récupération du header.php, cela en mode « plan gratuit » ??

      Merci merci :)

      Répondre à Guillaume
    • Marlène

      Sur WordPress.com en gratuit, tu ne peux absolument pas toucher au code, ce sont des plans conçus pour des utilisateurs amateurs qui n’ont pas spécialement besoin d’optimiser leur référencement donc ils ont certaines limites quand on a des besoins plus poussés.

      Répondre à Marlène
    • Guillaume

      En effet…

      Bon, j’ai plus qu’à me faire mon propre site. HTML & CSS, une bonne dizaine d’heure d’auto-formation en prévision.

      Merci en tout cas, grace à ton blog je pars avec des connaissances à insérer directement :)

      Répondre à Guillaume
    • Marlène

      Hello Guillaume, ton commentaire avait été filtré à tort par mon antispam ;) Pourquoi n’utilises-tu pas WordPress.org si la version gratuite de WordPress ne répond pas à tes besoins ? Ça offre plus de liberté pour modifier le code tout en ayant des outils qui facilitent la gestion d’un blog… et tu retrouveras la même interface. Cf cette comparaison entre les deux versions de WordPress.

      Répondre à Marlène
  • Aurore

    Bonjour Marlène,
    Je suis allée faire un tour sur l’outil de Web rank Info pour voir comment le thème de mon site était fait. Et j’ai vu deux choses qui me gênent, les titres de mon sidebar sont en H4, j’aimerai enlever les balises Hn mais comment faire ? Sachant que ces balises sont directement intégrer dans des Widget ?

    Et deuxième chose, le titre de mon blog n’apparaît pas dans la H1 de ma page d’accueil et ensuite en H2 pour les pages articles, catégories et mots clés. La fonction existe bien dans mon code mais elle est indiqué vide…

    Merci de ton aide, sinon je poserai directement la question à celui qui a crée le code, c’est peut-être le mieux d’ailleurs ! ^^

    Répondre à Aurore
    • Marlène

      Hello, pour enlever les balises des widgets il faut aller creuser dans le code du thème pour savoir par quel biais elles sont insérées. Souvent, c’est dans le fichier functions.php, au moment de la définition des widgets, il y a un code qui indique quelles balises sont insérées avant/après le titre d’un widget (une ligne qui commence 'before_title'=> et une ligne qui commence par 'after_title'=>).

      Pour le titre du blog, même chose, il faut trouver quel fichier affiche le titre du blog (soit c’est rattaché au header et donc au fichier header.php, soit c’est autre chose car ça dépend du thème).

      Répondre à Marlène
  • Christelle

    Hello,
    Justement je me demandais si les mots clés devaient aussi être présents mot pour mot dans les balises H2 ou bien si on pouvait utiliser des synonymes ?
    Par exemple : H1 : les leprechauns en Irlande
    « H2 : Origine des leprechauns » ou « H2 : Des lutins malicieux » ?

    Répondre à Christelle
    • Marlène

      Il est plus efficace de mettre les mots clés « en l’état » dans les h2 et de proposer les variantes dans le texte lui-même (explorer le champ lexical, les pluriels, etc).

      C’est malheureusement aussi ce qui conduit à une certaine standardisation des titres sur le web. Si tu prends un site comme Nespresso par exemple, ils font le choix de parler de « grands crus » au lieu de parler de « cafés »… sauf que dans la vraie vie, personne ne va taper « grand cru » sur Google en pensant à un café… et c’est ce genre de préoccupation qui devrait orienter la rédaction d’un point de vue SEO… alors que d’un point de vue marketing, avoir un discours différenciant est utile.

      Répondre à Marlène
  • asakura

    Hum on dirait que WordPress intègre automatiquement dans les titres des article, la balise h1 ?_?
    Peut t’on le vérifier par rapport au thème qu’on possède ?_?

    Répondre à asakura
    • Marlène

      Ça dépend comment le thème est codé en fait. Un thème bien fait doit comporter une balise h1 autour du titre quand on se trouve sur la page d’un article et on doit alors encadrer les sous-titres par des balises h2.

      On peut savoir si c’est le cas en affichant le code source de la page dans son navigateur.

      L’erreur la plus fréquente, c’est un thème qui comporte du h2 sur ces gros titres quel que soit l’endroit du site où on se trouve.

      Répondre à Marlène
  • jeanpierrerieu

    Bonjour,
    Et merci pour l’aide que l’on trouve dans vos articles. Je voudrai faire une modif sur les titres de mon site wordpress mais je ne sais pas comment faire car le nom du site et les tires des galeries sont tout les deux des H2 et comme je veux modifier la police du nom du site sans changer celles des galeries j’aimerai savoir comment « avoir la main » pour changer les titres des galeries de H2 en H3 (ou bien mettre le nom du sire en H1 et les autres titres en H2)
    Merci d’avance de votre aide et… Bonnes fêtes
    J Pierre

    Répondre à jeanpierrerieu
    • Marlène

      Bonjour Jean-Pierre, jolies photos ;) Dans l’idéal, il faudrait que le nom du site soit en h1 sur la page d’accueil et en h2 sur les autres pages… et que le titre des galeries soit en h1 (car j’imagine que c’est l’info la plus importante sur ces pages là).

      Je pense que le plus efficace est de travailler avec des conditions. Par ex., pour le nom du site :

      <?php if (is_front_page()) { ?><h1><?php bloginfo('name'); ?></h1><?php } else { ?>
      <h2><?php bloginfo('name'); ?></h2> <?php } ?>

      => En gros, si on est sur la page d’accueil, on met le nom du site entre des balises h1… et sinon, on le met entre des balises h2.

      On peut créer les titres de chaque page sur le même modèle : si on est sur la page d’accueil, le titre de la page est en h2 (puisque le titre du site est, lui, en h1)… et sinon, le titre de la page se met en h1.

      Ensuite, au niveau du design, pour différencier les titres on peut s’appuyer sur le fichier style.css. Par exemple, une galerie a pour classe CSS « single-galleries »… donc on peut définir une mise en forme pour tous les titres de « single-galleries », qui ne s’appliquera pas au reste. Je ne sais pas quel est votre niveau en code :)

      Répondre à Marlène
    • jeanpierrerieu

      Bonjour,
      Merci beaucoup pour ta réponse Marlène…
      Je suis sur cette piste et j’avance doucement (c’est un peu comme si j’apprenais une nouvelle langue). J’ai réussi à ne modifier que la police du nom de mon site. Les autres titres des galeries sont H1avec une autre police (pour plus de lisibilité). Le seul pb qu’il me reste à résoudre est: Quand je vais sur l’onglet « à la une » le titre est en H2 mais quand je clique sur « suite… » pour lire le reste de l’article, le titre passe en H1 avec la police du nom du site. Mais j’ai bon espoir de résoudre ce pb peu important.
      Merci encore pour ton aide et bonne journée
      Et avec un peu d’avance je te souhaite tous mes meilleurs voeux
      JP

      Répondre à jeanpierrerieu
    • Marlène

      Je trouve que le comportement du titre est assez pertinent : quand on est sur la liste des articles, ce qui prime va plutôt être le « gros titre » (le nom de ton blog en l’occurence) alors que lorsqu’on est sur la page d’un article, c’est le titre de l’article qui devient le plus important (et donc en h1).

      En revanche, le nom du blog reste à ce jour en h1 sur la page d’un article et il serait préférable qu’il soit en h2 (le code que j’ai donné dans ma réponse précédente pourrait être utile). Très belle année 2016 à toi et à tes proches !

      Répondre à Marlène
  • Euphrosyne

    Bonjour Marlène ! Depuis que j’ai lu ce billet, je ne dors plus la nuit… Et je plaisante à peine :-/
    Jusque là, j’avais consciencieusement évité de regarder le code vu que j’ai zéro budget pour mon blog (wordpress.com et thème gratuit) mais tu as éveillé ma curiosité et du coup, cela fait plusieurs jours que je me renseigne sur ces fameuses balises ! Je me rends bien compte que je vais sûrement devoir mettre la main à la poche mais ce que je crains le plus, c’est le temps nécessaire pour réussir à maîtriser tout ça…
    Bref, il me reste un espoir : aurais-tu des thèmes tout faits mais bien faits à me conseiller ??? Sinon, je vais devoir m’auto-héberger, créer mon thème enfant, bidouiller des heures durant et sacrifier les pauvres heures de sommeil que j’arrive encore à trouver ;) Merci !

    Répondre à Euphrosyne
    • Marlène

      Euh il ne faut peut-être pas s’inquiéter autant pour ça, si ? ;) Je remets un peu les choses dans le contexte mais sur le blog, je m’adresse aussi bien à des blogueurs amateurs qu’à des gens qui veulent vivre de leur blog… et sur un blog amateur, il n’y a pas forcément besoin de faire des optimisations très poussées sauf quand on est passionné par le sujet et qu’on fait ça par plaisir :) Tant que ton thème n’est pas trop lent, que ton contenu est de qualité, ça ne t’empêchera pas de t’amuser avec ton blog et d’avoir des visiteurs.

      J’ai vécu des années sans m’intéresser au référencement, ça n’empêchait pas mes sites d’être visités. Le référencement permet d’attirer plus de monde ou d’acquérir une visibilité sur des créneaux très concurrentiels sur lesquels on veut être positionné pour des raisons stratégiques.

      Répondre à Marlène
    • Euphrosyne

      En réalité, mon but n’est pas d’avoir davantage de visiteurs sur mon blog mais de satisfaire ma curiosité intellectuelle ;) Je suis un brin perfectionniste et j’aime le code propre ! C’est une des raisons pour laquelle j’avais refusé de m’y consacrer jusqu’à aujourd’hui : je ne sais pas faire les choses à moitié… Le problème, c’est que les aspects techniques du référencement semblent vachement intéressants alors je me sens irrémédiablement attirée ;)
      Sinon, ma question reste valable : tu aurais un thème gratuit proprement balisé à me conseiller ?

      Répondre à Euphrosyne
    • Marlène

      Ceux de Konstantin Kovshenin sont réputés comme étant plutôt bien codés : https://profiles.wordpress.org/kovshenin#content-themes. Plusieurs de ses thèmes obtiennent d’ailleurs d’excellentes notes de la part des utilisateurs.

      Répondre à Marlène
  • Letizia

    Tu as l’art de me rappeler à l’ordre sur ce qui ne fonctionne pas sur mon blog :) Vous m’aviez déjà fait la remarque mais je n’ai pas encore pris le temps de faire les changements. Cette fois, il faudra que je m’y mette sérieusement et en même temps, il faut que je regarder pour une autre police pour mes titres, je ne suis pas satisfaite avec la mienne.

    Répondre à Letizia
    • Marlène

      Ca fait du bien de changer ses polices de temps en temps, c’est une modification mineure si on compare ça avec un changement complet de design mais ça peut tout de suite donner une autre tonalité à un blog !

      Répondre à Marlène


Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.