Les balises hn et les balises html5 pour booster ton référencement

Référencement naturel : utilise les balises à bon escient

Aidez les bonnes personnes à obtenir la bonne information et ils feront les bonnes choses

Le html est un langage informatique et les balises HTML correspondent à des éléments du code HTML d'une page web sur Internet. Elles sont une partie intégrante de la composition de la page puisqu'elles permettent de mettre en forme et de structurer le contenu.

Aujourd’hui, les robots adorent le HTML5 sémantique et les balises hN, car cela leur permet de mieux comprendre les informations contenues dans ta page web et ton texte. Cela leur permet aussi de savoir ce qui est important et ce qui l’est moins. Ainsi baliser ta page et structurer tes articles c’est bon pour le référencement !

Que tu rédiges avec un éditeur de texte (comme Bear ou Ulysses qui utilisent le Markdown, mais exportent en HTML) ou directement dans wordpress, ces conseils devraient t’aider.

Les balises structurelles du html5 sémantique

Les balises structurelles aident les robots à comprendre ta page HTML ou PHP du reste et surtout sa structure sémantique, voici la liste des balises html :

  1. la balise header
  2. la balise nav
  3. la balise main
  4. la balise aside
  5. la balise article
  6. la balise section
  7. la balise footer

La balise <main> qui contient le corps de ton texte englobe la balise <article> et les balises <section>. La balise nav signale aux robots les menus de ta page web.

Théoriquement on pourrait avoir plusieurs balises <nav> et <header> par balise <article>, mais personnellement je suis adepte des choses simples. En HTML 4 une seule h1 était préconisée. En HTML 5 on peut y placer plusieurs h1. Je préfère encore une fois 1 balise h1 par page, car trop de h1 tue le h1 et je préfère miser sur une stabilité sémantique et hiérarchique.

C’est une structure classique d’imbrication de balises structurelles sémantiques. Mais rien ne t’empêche d’avoir ta balise aside à gauche, ou encore 2 balises aside ou ta balise nav sur le côté ou dans le footer.

Quand <aside> est à l’intérieur de la balise <article>, le contenu doit être relié à l’article (glossaire, des citations de l’article, liens relatifs à celui-ci). Lorsqu’il est utilisé en dehors d’une balise <article>, le contenu de <aside> doit être relié au site web dans son ensemble (liste de liens, catégories, navigation additionnelle, etc.).

Si toute la page est analysée par les robots, c’est malgré tout la balise <main> qui l’est bien davantage avec ses balises filles <article>, et <section>. D’ailleurs un lien en aside ou en footer a moins de poids que dans la zone de texte <main>.

Les balises rédactionnelles du html5 sémantique

Qu’est-ce que le HTML5 sémantique rédactionnel ?

Si tu t’y connais un peu en HTML, tu sais que les balises HTML saupoudrées de CSS sont (la plupart du temps) utilisées pour formater du contenu (taille, couleur, police, graisse, etc.). Une balise indique au navigateur comment afficher tel mot ou tel élément du contenu sur la page.

Attention, d’un navigateur à l’autre, il peut y avoir des petites différences

Certaines balises HTML5 transmettent des informations sémantiques : elles donnent une information supplémentaire aux mots qu’elles contiennent.

Les balises hN : de H1 à H6 = du titre de niveau 1 au niveau 6

En tant que consultant seo, on s’imagine que tout le monde connaît les balises hN, mais en fait non. Les balises <hN> structurent ton contenu et elles divisent autant qu’elles n’aèrent ton texte en sous-sujets et sous-sous-sujets.

La balise h1 (titre de niveau 1)

La balise <h1> que l’on nomme titre, décrit le sujet traité par l’article. Le titre h1 n'est pas à confondre avec la meta title qui elle, est visible dans les résultats de recherche de Google mais pas directement sur la page. Certains webmasters la copient à l'identique. En ce qui me concerne j'y apporte une lègère variation d'un ou deux mots.

Exemple <h1> Le HTML5 sémantique et les balises hN à l’usage des rédacteurs web </h1>

À ce stade ta balise h1 ressemble à n’importe quelle autre ligne de texte. Il faut lui adjoindre une class CSS pour lui donner une forme (taille, couleur, police, graisse)

h1 { font-size:45px ; color:gray ; font-family:osxald-regular ; font-weight:700 }

Cette ligne d’instruction CSS se place dans un fichier CSS externe (feuille de styles) ou alors dans une portion de style CSS inline en haut du code source de ta page web que l’on appelle critical CSS.

Le titre H1 décrit le contenu précis d’une page, il doit donc être différent sur chaque page (sinon c’est considéré comme un doublon et envoie un mauvais signal).

Je te conseille d’utiliser les balises de titre dans la zone principale de contenu de ta page, la section la plus importante (souvent main). Même si ce n’est pas un problème selon le W3C, je n’utilise pas des balises de titres dans les menus, le header ou le footer. Je préfère les balises <ul>. Cela me parait bien plus logique d’un point de vue SEO.

Le fil d’Ariane est une sorte de navigation interne et non un élément de structure de contenu qui ne devrait donc pas inclure le moindre hn.

Les autres balises hn (titre de niveau 1 à 6)

Les balises hn sont similaires aux différents styles Titre 1, Titre 2, Titre 3, etc. que tu peux trouver dans Word, ou wordpress.

Les titres de 2 à 6 sont utilisées pour hiérarchiser et structurer les sous-sujets. Chaque <h2> (sous-titre) est un sous-sujet du sujet général (la balise <h1>). Chaque <h3> est un sous-sujet du <h2> auquel il appartient, donc un sous-sujet du sous-sujet. Et ainsi de suite.

Exemple <h2> les balises rédactionnelles du html5 sémantique </h2>

Une balise / titre s’utilise donc pour mettre en exergue la structure sémantique du contenu plutôt que son apparence. Utilise le CSS pour l’aspect visuel des balises et du texte.

Comment trouver ces mots ? Avec un logiciel comme YourtextGuru ou cocon.se

Une page web se doit de respecter la sémantique des balises <hN> et surtout leur ordre. Passer directement d’un titre <h1> à un titre <h3> est une mauvaise idée ! Cela reviendrait pour un éditeur d’écrire le chapitre 3 avant le chapitre 2.

Certains conseillent de ne pas utiliser de balises isolées, comme une seule balise h3 au sein d’une balise h2.

Conseil 1 : selon la norme HTML5 (source W3C), les balises de titres H1-H6 ne sont pas adaptées pour un fil d’ariane ou un nuage de tags : il vaut mieux utiliser les listes (<ul>)

Conseil 2 : le chapeau (ou « chapô », le paragraphe d’introduction d’un article) : ne doit pas être mis en h1 ni même en h2, un chapeau n’est pas une balise de titre. Ne place pas non plus, une balise h1 sur un logo. D’autres placent une balise h1 sur une image. Ce n’est jamais mon cas, mais si tu souhaites le faire n’oublie pas d’y placer une balise alt car cela ne servirait à rien.

<h1><img src="mon-image.jpg" alt="texte qui parle de mon image"></h1>

Conseil 3 : Personnellement je ne vais jamais au-delà de la balise h4 (ou titre de niveau 4), je préfère rajouter une balise h2 ou rédiger un autre article.

Dernier conseil : si tu veux vérifier la structure de ton texte, va sur Firefox, installe l’extension « web developper » Une fois fait, affiche ta page dans le navigateur et clique sur « View document outline » tu obtiendras ceci :

La balise strong : indiquera aux moteurs de recherche que le mot est important

La balise strong est une indication pour les moteurs de recherche et ce, même si visuellement le ou les mots sont mis en gras. Généralement ce sont les mots qui font partie de l’empreinte sémantique liée à ton sujet.

<strong>mot important</strong>

Si tu souhaites simplement mettre en gras un mot pour un effet visuel, utilise le CSS

<span class="fw700">mot à mettre en gras, mais pas important pour le seo</span>

.fw700 {font-weight:700}

Attention, trop de strong tue le strong. Si tout est important, au final plus rien ne l’est. Utilise la balise strong avec parcimonie.

Ne pas utiliser la balise <b> pour mettre en gras SEO, mais uniquement la balise strong

La balise em = légère emphase sur un mot

Cette balise est utilisée quand on veut que le lecteur insiste sur un mot à la lecture, mais cela n’a aucune incidence sur le référencement.

Exemple : mot en emphase <em>mot en emphase </em>

La balise mark = surligner un mot

Cette balise est utilisée quand on veut que le lecteur voie immédiatement un mot à la lecture (le mot est surligné), mais cela n’a aucune incidence sur le référencement.

Exemple : mot à surligner : <mark>Mot à surligner</mark>

Idem si tu veux choisir une couleur de surlignement, utilise le css

mark {color:jaune}

D’autres balises à connaître

  • Balise DEL = Texte supprimé, Balise INS = Texte inséré
  • Balise DEL = Texte qui a été supprimé après la publication initiale.
  • Balise INS = Texte qui a été inséré après la publication initiale.

Ce qui donne :

mot à supprimermot à insérer mot abrévié

Utiliser ces balises ne sert en rien au référencement, mais permet une meilleure compréhension de la lecture.

La balise CITE = Citer une personne, une source

<cite> l’abbé Pierre</cite>

Encore une fois, on peut mettre en forme cette balise par le biais du CSS

cite {
margin-top :.75em ;
font-size :.75em ;
display : inline-block;
width: 100%;
font-style : normal ;
margin-left: 3.75em;
color:orange
}
cite : before {
content : ‘\2014\00A 0' ;
}

Ce qui donne : L’abbé Pierre

Là non plus, cette balise n’a aucune importance en référencement, mais elle est très utile, car elle permet au lecteur de bien mieux lire ton texte. Il est vrai qu’un texte non formaté, non aéré est assez pénible à lire. Du coup le lecteur a beaucoup moins envie de finir l’article. De même, pour la balise blockquote.

Ceci est une citation longue. J’utilise la balise blockquote pour ce faire. D’ailleurs ci cette citation est empruntée à un auteur. Tu te dois de citer l’auteur avec une balise cite imbriquée.

De même que pour la balise cite, la balise blockquote, on peut mettre en forme cette balise par le biais du CSS.

blockquote {
margin-top :.75em ;
font-size :.75em ;
display : inline-block;
width: 100%;
font-style : normal ;
margin-left: 3.75em ;
border : orange 1px solid
}

La balise figure et figcaption = indiquer des informations sur une image

La balise <figure> est utilisée pour une image, une photo, une carte, un graphique, une vidéo. Tu peux ajouter une légende au-dessous de l’image en plaçant quelques mots entre les balises <figcaption> à l’intérieur des balises <figure>, comme indiqué ci-dessus. Les mots inscrits dans la légende comptent de la même manière que les autres mots dans le texte, mais pas plus.

<figure><img data-original=" https://www.whitewolf-agency.com/images/google.jpg » alt=" référencement naturel google » class=" lazy"/> <figcaption class=" legende"><strong class=" blueindex">comment booster ton référencement sur google </strong></figcaption> </figure>

Tu remarqueras dans le code qu’il n’y a un data-original au lieu d’un src. C’est logique puisque j’utilise le lazy loading afin de ne pas perturber le chargement du Dom par les images.

La balise ol ul et dl = les listes à puces

Les balises <dl> <ul> ou <ol> ne servent pas directement à référencer ton site, mais elles aident Google à digérer et à mieux comprendre ton texte, ta page.

<ul> = liste non ordonnée

<ul id="puce3  class="margin-40px-tb"><li>balise html h1 </li><li>balise html h2 </li><li>balise html h3 </li><li>balise html h4  </li></ul>

Ce qui donne :

  • balise html h1
  • balise html h2
  • balise html h3
  • balise html h4

<ol> = liste ordonnée

<ol start="1" id=" puce2"><li>balise html h1 </li><li>balise html h2 </li><li>balise html h3 </li></ol>

Ce qui donne :

  1. balise html h1
  2. balise html h2
  3. balise html h3

<dl> et <dt> = pour un glossaire, lexique ou liste de définitions

<dl>
<dt class="fw700">SEO</dt>
<dd>définition</dd>
<dt class="fw700">SEA</dt>
<dd>définition</dd>
<dt class=" w700">SEM</dt>
<dd>définition</dd>
</dl>

La balise <i> : mettre en italique

On se sert de la balise <i> pour mettre en italique, mais cela ne sert à rien en référencement.

La balise <u> : souligner

Évite de l’utiliser, car ton groupe de mots ressemble à un lien et cela induit en erreur le lecteur qui pense que le lien ne marche pas et pour cause, ce n’en est pas un.

La balise <alt> : explique ce qu’est l’image

Cette balise est utile en référencent et notamment dans l’index google images.

Utiliser les balises HTML5 sémantiques dans wordpress

Pour les utilisateurs de WordPress, dans l’éditeur de texte, se trouvent toutes ces balises prêtes à être utilisées.

Conclusion

L’implémentation correcte du HTML5 sémantique est déjà extrêmement importante et permet aux robots de bien mieux analyser ta page pour le référencement. Il ne faut donc pas négliger toutes ces balises, qu’elles soient structurelles ou dédiées à la rédaction.



Bien utiliser les balises hn et les balises html5 en référencement

Moyenne de 5 basée sur 21 votes

Rédiger pour le web : en savoir plus sur la structure de l'information

    2 Commentaires
    • Ludivine le 15/05/2019

      Bonjour

      J'ai vu que vos puces étaient colorées. J'ai essayé moi aussi mais en fait avec mon code c'est la puce et le texte qui sont colorés. Comment faites-vous pour n'avoir que la puce colorée ?

    • Angélique le 15/05/2019

      Bonjour Ludivine
      C'est tout simple avec du CSS, une class et une pseudo class. Je vous donne le code, à vous de l'adapter.

      ul.puce3 li:before
      {
      content:"\2022";
      color:orange;
      font-weight:700;
      margin-right:8px;
      font-size:2em;
      vertical-align:top
      }



      puce3 est une class, li:before est la pseudo class. Ensuite

      <ul class="puce3">
      <li>phrase1</li>
      <li>phrase2</li>
      </ul>






    03 29 43 14 05
    Question rapide?