Améliorer son référencement : mise en forme des titres

Deuxième article de la série pour améliorer son référencement. Après avoir installé le logiciel de suivi Google Analytics, on va parler de choses un peu plus concrètes, à savoir la mise en forme du texte et son importance dans le positionnement d’un blog dans les résultats des moteurs de recherche.

Introduction à la hiérarchisation du texte

Je ne vous apprends rien, mais je rappelle que le texte est un élément prépondérant dans le référencement de votre blog et de vos articles.  En plus, les algorithmes de référencement des moteurs de recherche prend en compte la hiérarchisation du texte, avec des titres.

On a souvent tendance à laisser ses doigts panioter sur le clavier et à écrire en un seul paragraphe. Mais vous allez voir que ce n’est vraiment pas la meilleure manière d’être bien référencé et aussi d’aider le lecteur à s’y retrouver dans un article !

On ne lit pas une page, on la scanne !

C’est un concept très important dans l’écriture d’un blog, mais aussi dans le design d’un blog. Il existe des termes techniques pour parler de ce concept mais je vais vous épargner tout ça, on n’est pas dans un cours de webdesign !

Quand vous écrivez un article, le titre de votre article est considéré comme l’élément le plus important et le plus représentatif de l’article. Ca vous paraît logique, non ?

Lorsque l’on surfe sur un blog ou même un site, on « scanne » la page avec nos yeux en survolant le contenu. On lit rapidement les titres et c’est tout ! Si le titre nous paraît intéressant, on va lire l’article, sinon on passe à autre chose. Et oui, il faut le savoir, il est très rare de lire complètement la page d’un site ou d’un blog, nous avons toujours tendance (inconsciemment) à scanner et survoler les informations, et ça, il faut le prendre en compte lorsque l’on écrit un blog !

Le moteur de recherche, un utilisateur comme les autres ?

Et bien le moteur de recherche va chercher à reproduire ce comportement du lecteur . Pour reproduire cette attitude face à un blog, il va donner beaucoup plus d’importance au titre de l’article et, s’il y en a, aux titres de sections à l’intérieur de cet article.

J’ai utilisé ce premier gros paragraphe pour mettre en oeuvre cette hiérarchisation. Le premier titre qui sera prise en compte par le moteur de recherche sera le titre de l’article : Améliorer son référencement : mise en forme du texte.

Ensuite, le robot qui scanne mon article va surtout repérer les titres de sections, à savoir (dans l’ordre d’importance) :

– le titre de ce paragraphe : Introduction à la hiérarchisation du texte.

– les plus petits titres : On ne lit pas une page, on la scanne et Le moteur de recherche, un utilisateur comme les autres ?

Il faut donc toujours garder en tête cette hiérarchisation et surtout l’importance du titre dans le référencement d’un article. Si le titre de votre article n’a aucun lien avec le contenu de l’article, vous serez mal référencé pour le thème que vous aurez abordé dans votre article.

Mais comment fait-il pour savoir quelles phrases sont des titres ?

Ben oui, question bête mais pas tant que ça. Le robot qui scanne la page est très très bête (lui, contrairement à un lecteur !), il ne voit pas ce qui est écrit plus gros que le reste, il faut lui dire rapidement et simplement où sont les titres ! Et là, je suis désolée mais on va rapidement voir une petite notion de HTML. Si vous avez déjà lu (scanné) mon dernier article sur comment installer Google Analytics, vous devriez vous rappeller du mot balise, non ?!

Petit rappel rapide sur les balises HTML

Une balise HTML est de la forme <nom_de_la_balise> pour ouvrir la balise et est fermée par la balise de fermeture </nom_de_la_balise>. Par exemple, pour un paragraphe simple, on va avoir le code suivant :

<p>Le paragraphe avec mon texte à l'intérieur</p>

Ca vous revient ?

Les balises HTML pour les titres

Comme le robot de Google ne sait « que » lire le code HTML d’une page, on a tout simplement créé des balises dédiées aux titres et à leur hiérarchisation. Vous allez très vite comprendre !

Voici la liste des balises qui vont servir de titres :

<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 6</h6>

Et leur retranscription en visuel (dans le cas de mon blog) :

Titre 1

Titre 2

Titre 3

Titre 4

Titre 5
Titre 6

Assez simplement, on utilise 6 niveaux de titres qui sont désignés par le numéro, avec 1 étant le titre de plus haut niveau (le plus important) et le 6 le moins important.

En pratique, on utilise surtout h1, h2 et parfois h3. Les autres titres sont très peu utilisés sur les blogs et aussi par les robots pour référencer l’article.

Vous l’aurez remarqué, dans mon article, le premier titre utilise une balise h1, et les plus petits titres sont entourés d’une balise h2.

En somme, je vous conseille donc de mettre en pratique l’utilisation de ces balises sur vos articles. J’en entends déjà me demander « Mais comment je fais ? ». Et bien on va le voir tout de suite !

Mise en forme du texte sur Canalblog

Je ne commence pas par le cas le plus facile. Pourquoi ? Parce que Canalblog n’a, à ma connaissance, pas mis en place ce système de hiérarchisation de titres lorsque l’on écrit un article. Comme vous le voyez dans l’image ci-dessous, il existe un menu déroulant qui permet d’augmenter la taille du texte (normal, grand,…).

PinitMise en forme du texte Canalblog

Il va donc falloir utiliser le code HTML pour intégrer ces balises. Heureusement que ce n’est pas si compliqué ! Il vous suffit de cliquer sur le bouton en forme de <> qui représente en fait une balise HTML.

L’écran nous permet alors d’écrire du code HTML :

PinitMise en forme du texte Canalblog

Et là, on voit bien les balises HTML du Titre 1 (h1) que j’ai moi-même insérées pour utiliser la mise en forme du texte. Sur la deuxième ligne, j’ai utilisé le menu déroulant de la barre de mise en forme et on voit que ce ne sont pas des balises de titre (c’était juste pour vérifier !).

Voilà ce que donnent les 6 niveaux de titres sur un article de Canalblog (j’ai laissé le thème par défaut). Si vous regardez bien, la date est en fait un titre de niveau 2 (h2) et le titre de l’article (Test titres) est un titre de niveau 3 (h3), ce que je trouve vraiment dommage !

PinitMise en forme du texte canalblog

Sur Canalblog, c’est finalement un peu éprouvant de devoir tout le temps passer en mode HTML pour mettre les balises de titre, mais je peux vous assurer que le jeu en vaut la chandelle ! On est là pour améliorer son référencement, non ?

Mise en forme du texte sur Overblog

Pour cette fois, je félicite Overblog qui a intégré non pas un menu pour simplement augmenter la taille du texte, mais un menu pour mettre en forme les titres ! Et là on retrouve bien nos balises de titre. Utilisateur d’overblog, je te vois sourire derrière ton écran !

PinitMise en forme du texte Overblog
Cette image montre que vous pouvez utiliser très simplement les 6 niveaux de titres dont je vous ai parlés plus haut !

Mise en forme du texte sous WordPress

Je vais parler de mon cas personnel dans ce paragraphe vu que j’utilise WordPress pour bloguer. J’utilise l’extension TinyMCE Advanced pour avoir une barre de mise en forme plus avancée et que je peux moi-même personnaliser selon ce que je veux faire. Je n’ai jamais changé d’extension et j’en suis toujours contente ! Quand vous utilisez cette extension, vous avez le même style de menu déroulant qu’avec Overblog et vous pouvez simplement mettre en forme vos titres. Comme je suis fénéante, je vous montre directement ma barre de mise en forme !

PinitMise en forme du texte avec WordPress

Le menu se situe sur la deuxième ligne (Paragraphe).

Ce qui est vraiment sympa avec WordPress, c’est que vous pouvez utiliser des extensions, comme ici, pour améliorer votre expérience de blogueur ! Si vous êtes sur Canalblog, et bien vous n’avez pas le choix, vous devez vous dépatouiller pour mettre en forme les titres. Si vous êtes sur WordPress, vous installez l’extension et le tour est joué ! On peut (presque) toujours trouver une extension qui convient à ce que l’on recherche comme fonctionnalité, et c’est vraiment ça que j’adore sur WordPress !

Alors maintenant, plus d’excuses, on utilise les titres pour améliorer son référencement !

What do you think?

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

16 Comments
  • kaderick
    11 janvier 2011

    donc j’ai installé l’extension!
    et donc pour les titres il suffit d’utiliser « titre 1 » puis « titre 2 » je vais essayer ça sur mon prochain post pour voir!!! merci encore une fois de ton aide 🙂

    • ktycat
      11 janvier 2011

      Oui c’est ça ! Après, l’affichage dépendra de la mise en forme de ces balises dans ta feuille de style CSS mais le h1 devrait toujours ressortir plus grand que le h2.

  • MyrtilleD
    11 janvier 2011

    Je ne pense jamais à utiliser ces balises de titre, Blogger ne les propose pas non plus dans son éditeur de message.

    Les rajouter à la main ne représente pas un travail énorme mais il faudrait aussi que je modifie leur apparence dans le code html du modèle et je risque de toucher en même temps les formats de titre du blog qui utilise aussi ces balises.

    J’essaierai de m’en souvenir si je passe un jour sur wordpress, ou ponctuellement 😉

    • ktycat
      11 janvier 2011

      Je n’ai pas regardé si blogger les proposait. Il faut en effet toucher non pas au code html mais à la feuille de style CSS pour changer l’affichage de ces titres.

      • MyrtilleD
        11 janvier 2011

        L’éditeur de Blogger est du genre de celui de Canalblog que tu montres, tu peux modifier la taille de la police et mettre du gras 😉

        Et tout est défini dans la page html, les éléments de style à l’intérieur de la balise . Le truc c’est que le code utilise des balises h1 avec des éléments de style définis je ne sais où, donc il faut faire attention de ne pas mettre en l’air la mise en page du modèle simplement pour rajouter des titres à son article.

        Ou alors utiliser des balises h2 ou h3 mais ça ne doit pas avoir le même poids pour le référencement. Par contre ça peut être utile pour améliorer la présentation et faciliter le « scan » de l’article par le lecteur.

        • ktycat
          12 janvier 2011

          Souvent on utilise les balises h1 pour mettre automatiquement le titre de l’article en avant, ça se règle dans le template qu’on utilise. Mais c’est vrai que c’est toujours utile d’utiliser les balises de plus bas niveaux si la h1 est déjà utilisée, ça aura toujours une influence sur le référencement et la présentation sera toujours meilleure et plus claire !

  • Question bête : sur Overblog il y a une fenêtre en haut pour le Titre. Il ne faut donc pas le rédiger dans la fenêtre Titre mais dans la fenêtre du texte, en prenant soin de cocher Titre 1 ?
    Désolée pour ma question bête, mais je découvre.

    Merci en tout cas, un billet très intéressant, très utile et bien fait !!

    • ktycat
      11 janvier 2011

      Si bien sûr, le titre de l’article est toujours à mettre dans le champ fait pour. Il est automatiquement mis en forme et tu ne peux pas y changer quelque chose en utilisant du code HTML dans ce champ. Les balises dont je parle sont à utiliser à l’intérieur de l’article, lorsque tu veux hiérarchiser tes paragraphes et utiliser des titres de section.

  • Jude
    12 janvier 2011

    connais tu dotclear? je suis dessus et c’est un peu difficile pour modifier la taille des titres…

    • ktycat
      13 janvier 2011

      Je connais mais je ne l’ai jamais utilisé. Je pense que toute la mise en forme des titres doit se faire dans la feuille de style du template que tu utilises.

  • loul
    14 janvier 2011

    @ktycat Merci pour toutes ces infos. Je pensais bien au visuel de mon site mais pas à nos amis les robots ! Presque envie d’aller retoucher mes anciens billets 🙂 Je sens que je vais revenir par içi…
    @Jude Quand tu écris ton billet sur Dotclear tu as un menu déroulant à coté des styles de police. Par défaut il y a marqué « aucun » mais sinon tu choisis « titre de niveau 1,2,etc… ».

    • ktycat
      15 janvier 2011

      Et oui les robots sont nos amis même s’il ne faut pas qu’ils deviennent plus importants que les vrais lecteurs ;).

  • la sorciére du logis
    13 avril 2011

    La suite ! La suite !
    au fait, tu fais quoi dans la vie, doctorante ou docteur quelque part dans une université où il y a des moutons à coté… Alors d’où te viennent tes connaissances photo et web ?

    • ktycat
      14 avril 2011

      Dans la vie je suis doctorante en chimie ;). Mes connaissance photo et web me viennent de mes passions, j’aime beaucoup apprendre quand j’ai une passion 🙂 !

  • eivlyss
    30 avril 2011

    Et bein je vais penser à mettre des titres dans mes articles maintenant !

  • la sorciére du logis
    14 janvier 2012

    La suite, la suite 🙂 Oui je sais, c’est du flood, oui je sais, j’ai déjà demandé. Mais bon…