Les balises HTML indispensables à la rédaction d’un contenu SEO friendly !

You are currently viewing Les balises HTML indispensables à la rédaction d’un contenu SEO friendly !
Les balises HTML pour un contenu optimisé !

Après la rédaction d’un article ou d’une page web, la mise en forme du texte passe par l’ajout de balises HTML. Elles sont indispensables pour hiérarchiser votre contenu et l’optimiser ! Que vous utilisiez ou non un CMS comme WordPress, voici celles à connaître pour réussir une intégration SEO friendly !

Sommaire :

  1. Les balises HTML incontournables en SEO
  2. Les titres et les sous-titres
  3. Le contrôle des balises Hn
  4. Les mots en gras
  5. Les listes à puces
  6. Les points à retenir l’utilisation des balises HTML
  7. La collaboration avec un rédacteur web SEO

Les balises HTML incontournables en SEO

Le langage HTML est un langage informatique composé de balises qui permettent de structurer une page web. Elles sont identifiables à leurs chevrons ou crochets obliques.

Sans pour autant apprendre à coder, tout rédacteur web où toute personne qui crée du contenu sur un site Internet, doit maîtriser les balises HTML qui permettent de mettre en forme son texte.

En effet, cela améliore la compréhension du contenu en faisant ressortir la hiérarchisation des idées et les mots importants aux lecteurs, mais aussi aux robots des moteurs de recherche.

Les balises HTML dont je vais vous parler ici sont celles qui sont applicables au corps du texte, du titre principal jusqu’à la dernière phrase du dernier paragraphe !

Lorsque vous regardez le code source d’une page web, le corps du texte enrichi de balises HTML doit se situer entre ces 2 balises body :

Balise ouvrante body
Balise d’ouverture body
Balise fermante body
Balise de fermeture body (avec slash)

Comme dans cet exemple, la plupart des balises HTML fonctionnent par paire comme ici et l’ajout d’une barre oblique ou slash marque leur fermeture.

Petit rappel : Pour observer le code source d’une page web, il suffit d’effectuer un clic droit et de sélectionner « afficher le code source ».

Balises HTML visibles dans le code source
Affichage du code source d’une page we

Les balises HTML Hn pour les titres et sous-titres

On symbolise les balises HTML dédiées aux titres et intertitres par les caractères Hn. Elles vont du niveau 1 à 6. Plus le chiffre est élevé, plus leur importance décroît. 

h1 pour le titre principal

Dans le corps du texte, la balise h1 est celle qui a le plus de poids pour le référencement naturel. C’est également en principe la plus visible pour le lecteur. On l’utilise pour le titre principal d’une page web ou d’un article.

Techniquement, rien n’empêche d’utiliser plusieurs balises h1 par page, mais ce n’est pas la norme et en matière de SEO, c’est vivement déconseillé. Les robots des moteurs de recherche risqueraient de ne plus comprendre quel est le sujet principal de votre page et donc de ne pas la référencer.

Exemple de balises HTML H1 pour le titre
Rédaction d’une balise H1 pour le titre

Les mots à l’intérieur des balises h1 seront compris par les robots du moteur de recherche comme étant votre titre principal.

En général, le H1 apparaîtra en plus gros que le reste du texte sur votre page web. Toutefois la taille de police, la couleur ou la mise en gras attribuées aux balises HTML dépendent de ce qui est écrit dans votre fichier CSS (votre feuille de style).

Autrement dit, ne tenez pas compte du design pour attribuer vos balises HTML, mais bien du sens de votre texte. Si le rendu visuel ne vous plaît pas, c’est au niveau du CSS qu’il faut faire des changements avec l’aide d’un développeur.

h2 : deux emplois possibles

Elle correspond en général à un sous-titre de premier niveau. À noter qu’elle peut aussi être utilisée pour l’accroche ou le chapô. C’est en tout cas ce que préconise Olivier Andrieu, un pionnier du référencement naturel.

Toutefois, réserver le H2 aux sous-titres est l’usage le plus courant et j’ai pu vérifier à de nombreuses reprises qu’il n’empêchait en rien d’arriver en première position ou en position 0.

Du h3 au h6

Le h3 est un titre de 3e niveau, ou autrement dit un « sous » sous-titre. Admettons que vous fassiez un article intitulé « quelle table de jardin choisir ? ».

Le titre est en h1. En H2, vous pouvez avoir plusieurs sous-titres comme :

  1. Petite ou grande, trouvez la taille idéale
  2. Quel matériau privilégier pour sa table de jardin ?
  3. La forme, une affaire de goût !

Vos h3 viennent détailler chacune de ces parties (si c’est nécessaire !). Par exemple après le H2 « Quel matériau privilégier », vous pourriez avoir ces titres de 3e niveau :

  • Le bois naturel et écologique
  • Le métal résistant et design
  • Le verre pour une table de jardin élégante !

Les balises HTML h4 à h6 dans le corps du texte sont plus rares. Pour cette raison, il est possible de les utiliser pour le fil d’ariane ou les tags qui contiennent des mots intéressants, en rapport avec le sujet traité.

Contrôlez rapidement vos balises Hn

Vous pouvez tout à fait contrôler les balises HTML de titres et d’intertitres en inspectant votre code source, mais il existe des outils plus visuels pour un aperçu rapide.

Web accessibility evaluation tool

Gratuit et sans installation nécessaire, cet outil de W3C a été conçu pour améliorer l’accessibilité web. Particulièrement ludique, le Web accessibility evaluation tool affiche les balises HTML Hn en bleu. Pour l’utiliser, il vous suffit d’indiquer l’URL de la page que vous souhaitez contrôler.

analyse des Hn avec le web accessibility eevaluation tool
Aperçu de l’analyse par le Web accessibility evaluation tool

Web developer

L’extension téléchargeable depuis Google Chrome est gratuite.  Une fois sur la page web que vous souhaitez analyser, ouvrez Web developer. Dans l’onglet «information», cliquez sur « view document outline ». Un deuxième onglet va s’ouvrir en affichant uniquement vos balises HTML h1 à h6.  

Aperçu de l’analyse par Web developer

La balise strong pour les mots en gras

Moins essentiels que les titres et sous-titres pour Google, les mots en gras ont malgré tout plus de poids pour l’algorithme que les autres mots présents dans les paragraphes.

On utilise la balise strong pour appliquer des caractères gras au mot-clé principal répété plusieurs fois dans un même texte, mais aussi pour d’autres mots intéressants pour le lecteur ou les moteurs de recherche.

Il faut donc ajouter la balise strong en tenant compte du référencement naturel, mais aussi des notions d’eye tracking. Les mots en gras attirent le regard du lecteur, mais ça n’est plus vrai s’ils sont trop présents. Leur emplacement doit rester harmonieux pour ne pas nuire à la lisibilité du contenu.

Si la balise bold, permet aussi de mettre les mots en gras, elle n’indique pas aux moteurs de recherche leur importance. Pour le SEO, c’est donc la balise strong qu’il faut privilégier !

Les balises HTML pour les listes à puces

Les listes à puces sont appréciées par Google, mais aussi par le lecteur. Elles synthétisent des idées fortes et sont rapides à lire. Comme pour les mots en gras, il ne faut pour autant pas en abuser.

Le début d’une liste numérotée est marqué par les caractères ol entre crochets, alors qu’une liste non ordonnée commence par ul.

Dans les deux cas, chaque élément de la liste commence avec une balise li. 

liste à puces non ordonnée

Points essentiels pour l’utilisation des balises HTML

La simple lecture des balises HTML présentes dans le corps texte doit suffire à comprendre le sujet de la page et de ces différentes parties.

Votre mot-clé principal doit impérativement être présent dans votre titre en h1 et dans au moins un sous-titre en h2. Plus le texte est long, plus vous pouvez vous permettre de le rajouter dans d’autres sous-titres en h2 ou h3, mais ne tombez pas dans la suroptimisation (Google vous pénaliserait !).

Vous pouvez utiliser les balises HTML présentées ici plusieurs fois, à l’exception de la balise h1 réservée au titre de votre page.

La plupart des spécialistes ainsi que la société W3C conseillent le suivi d’un ordre logique pour les balises Hn. Ne passez pas du h1 au h3 sans passer par un sous-titre en h2.

La collaboration avec un rédacteur web SEO

Que vous produisiez vos contenus vous-même ou que vous travailliez avec un prestataire, une fois l’écriture du texte terminé, le travail n’est pas fini ! Pour ma part, en tant que rédactrice web SEO, je peux ajouter les balises HTML pour que vous n’ayez plus qu’à copier-coller votre contenu dans le code source, quel que soit votre CMS. Sous WordPress, j’intègre directement votre contenu !   

Ingrid Pilard

Consultante SEO et rédactrice web

Laisser un commentaire