Balises sémantiques et SEO : définition, rôle et balises essentielles

En langage informatique, les balises HTML permettent le bon affichage d'une page web. Elles sont utilisées pour renseigner les navigateurs web sur le rendu souhaité. En revanche, elles ne donnent pas d'information sur le contenu d'une page. C'est ce que corrige la dernière version HTML, appelé HTML5, avec l'apparition des balises sémantiques. Celles-ci sont désormais chargées d'apporter du sens au contenu qu'elles encadrent pour faciliter la compréhension des moteurs de recherche. Leur usage influence donc l'indexation et le référencement naturel d'un site. Il semble donc essentiel de comprendre leur rôle et de connaître les balises incontournables en SEO.

Quel est le rôle des balises sémantiques ?

Lorsqu'un internaute arrive sur une page web, il est assez facile pour lui de différencier les diverses zones de contenu. En revanche, ce n'est pas du tout le cas pour les robots d'indexation. Sans indication précise sur le contenu, ils ne pourront pas comprendre de quoi traite la page et encore moins quels sont les éléments les plus importants.

C'est le rôle que vont jouer les balises sémantiques. En effet, elles indiquent le type et l'importance de chaque contenu aux robots des moteurs de recherche. Elles renforcent la structure et hiérarchisent le contenu d'une page internet.

Ainsi, les robots sont capables de comprendre rapidement les informations présentes. En conséquence, l'indexation est favorisée, ce qui influe directement sur le positionnement.

L'utilisation des balises sémantiques s'inscrit dans une stratégie SEO globale. Elles ne suffisent pas à améliorer le référencement naturel à elles seules, mais aident à l'optimiser au mieux. Avec un bon balisage sémantique, la lecture est à la fois facilitée pour les moteurs de recherche, mais aussi pour l'internaute.

Les balises sémantiques incontournables en HTML

En code HTML, les balises sémantiques commencent par une balise ouvrante qui se caractérise par le signe <> et se termine par une balise fermée comportant un slash </>. Le contenu est à placer entre les deux balises. Par exemple, le code HTML se présentera comme suit : <article>contenu</article>.

Voici les principales balises sémantiques utilisées pour communiquer une bonne structure de page aux moteurs de recherche :

Balise <header>

Elle sert à présenter le contenu présent en haut de page. Il s'agit de l'en-tête, où figure le logo de l'entreprise et la navigation principale du site. Elle indique aux robots d'indexation que les informations présentes sont récurrentes d'une page à l'autre d'un site. Il faut également noter qu'une balise <header> ne peut pas comporter une autre balise <header>.

Balise <nav>

Elle présente le menu de navigation du site. Elle est souvent placée en en-tête, mais peut aussi figurer dans le pied de page ou dans une barre latérale. Elle contient uniquement des liens de navigation.

Balise <main>

Cet élément encadre le contenu principal de la page. Il est conseillé d'utiliser une seule balise <main> par page. C'est dans cette partie que va être codée la majorité du contenu du site internet. De plus, celle-ci contient différentes zones constituées des balises <section> et <article>.

Balise <article>

La balise <article> est utilisée pour indiquer aux moteurs de recherche où se trouve le contenu principal de la page. Elle est utilisée pour taguer un article de blog, mais aussi les messages d'un forum ou d'une fiche produit. Elle contient de manière générale un titre, les informations de publications (auteur et date), la catégorie, le contenu et les articles annexes d'une thématique similaire. Il faut noter que cette balise peut posséder plusieurs éléments <section>.

Balise <section>

Faisant parfois débat avec la balise précédente, elle va aussi indiquer un contenu principal qui, en revanche, pourra être structuré. Ainsi, avec cette balise, il est possible d'indiquer les différentes zones qui structurent le contenu principal. Elle permet de découper le contenu de façon thématique par rapport aux balises <main> et <article>.

Balise <aside>

Elle permet de faire figurer du contenu qui n'est pas en corrélation avec le contenu principal de la page. Il s'agit donc de contenu dit annexe. C'est le cas, par exemple, des barres latérales ou lors d'ajouts d'informations supplémentaires. Il faut savoir que la balise <aside> n'est pas soumise à des règles de placement. Elle peut figurer à n'importe quel endroit du site web.

Balise <footer>

Elle est utilisée pour délimiter le pied de page. Elle contient le contenu récurrent d'une page, comme le logo, les liens de navigation ou encore des informations légales. Elle est placée en bas de page ou d'un bloc.

Balise <Hn>

Il s'agit des balises de titre, indispensables pour structurer les textes. Le balisage Hn joue un rôle essentiel pour améliorer la lisibilité du contenu textuel par les moteurs de recherche. Elles comportent les mots-clés principaux et secondaires, qui permettront de donner des informations clés sur le sujet de la page.

Les balises Hn se divisent en 6 niveaux. La balise <h1> indique le titre principal qui est aussi le plus important de la page ou de l'article. La balise <h2> caractérise les sous-titres et permet de découper le texte en plusieurs paragraphes. À l'intérieur, il peut y avoir des sous-paragraphes caractérisés par les balises <h3>, puis <h4> pour détailler encore plus le contenu. Il existe aussi des balises <h5> et <h6>, mais il est rare d'aller aussi loin dans le détail rédactionnel.

À noter que chaque page ne doit comporter qu'une seule et unique balise <h1>. En revanche, le nombre de balises <h2>, <h3>, <h4> n'est pas limité. L'important est de structurer de manière fluide et logique le contenu rédactionnel.

Balises <blockquote> et <cite>

Lors de l'utilisation de citation dans le contenu, il est nécessaire d'encadrer celle-ci par la balise <blockquote>. Le nom et la source de la citation doivent être, quant à eux, balisés à l'aide de <cite>. À savoir que la balise <cite> est à placer à l'intérieur de la balise <blockquote>.

Balises <code> et <pre>

La balise <code> est utilisée pour mettre en valeur des extraits de code au sein d'un texte. Les moteurs de recherche savent ainsi que le contenu encadré est relatif à des lignes de codes.

D'autre part, la balise <pre> affiche un texte pré-formaté. C'est-à-dire qu'elle est utilisée pour reproduire un texte à l'identique du code dans lequel il a été tapé. Elle conserve donc les tabulations, les espaces et les sauts de lignes présents dans le texte. De ce fait, elle indique aux robots d'indexation que le texte qu'elle encadre est un contenu pré-formaté.

Pour aller plus loin, découvrez comment créer des contenus parfaitement optimisés pour les moteurs de recherche en téléchargeant la checklist de rédaction SEO, ou découvrez l'outil SEO de HubSpot.