Balisage sémantique
Un Balisage sémantique pour doper votre référencement
Le langage HTML est comme son nom l'indique un langage de marqueur, un langage de balises. Il me semble capital de connaitre l'utilité de chaque balise, c'est-à-dire dans quels buts elles ont été créées et comment elles sont définies dans les standards.
Notez bien, que je parle ici de balisage sémantique et non de sémantique qui est un sujet bien plus vaste et qui dépasse très largement le cadre du web (et mes compétences).
Déployer un balisage sémantique présente de multiples intérêts notamment
pour l'accessibilité, le traitement, l'analyse ou bien encore l'affichage d'un document. Dans le cadre de cet article, nous nous bornerons bien entendu au contexte des moteurs de recherche puisqu'en en effet, le balisage sémantique présente des opportunités certaines pour votre visibilité !
Structure son document et son contenu
Afin d'être plus clair, prenons quelques exemples concrets avec plusieurs balises sémantiques :
- Balises h1, h2, h3, h4, h5 et h6 : Balises encadrant des titres. H1 représente le(s) titre(s) le(s) plus important(s), h6, le(s) titre(s) le(s) moins important(s)
- Balise p : Balise encadrant un paragraphe
- Balise ol : Liste ordonnée
- Balise blockquote : Citation
En fonction du sens de votre contenu, il s'agira donc d'utiliser les balises adéquates.
Balise table, div et sémantique
Une légende urbaine veut que l'utilisation de la balise div soit bénéfique pour le référencement naturel d'un site au détriment de la balise table. C'est tout simplement faux ! Au contraire même, puisque la balise table me semble donner plus de sens à des données qu'une balise div. Les experts du HTML confirmeront.
Lien entre balisage sémantique et moteurs de recherche
Les moteurs de recherche tels que Google, Yahoo ou bien encore Live analysent le code HTML avant de générer leurs classements. Un des buts du jeu pour ces moteurs est de comprendre le sens d'un document afin de les classer convenablement et de proposer ainsi des résultats pertinents à leurs utilisateurs.
Les balises du langage HTML sont les alliées des moteurs dans leur quête de pertinence. Comme nous l'avons vu, lorsque ces balises sont utilisées judicieusement, elles permettent d'analyser plus finement la structure d'un document ainsi que de pondérer plus facilement l'importance d'une information.
Concernant l'optimisation du référencement de votre site, il faudra donc que vos pages :
- Traitent de la thématique que vous visez
- Contiennent les mots clés que vous visez et qu'ils soient placés à des endroits importants (sémantiquement parlant) dans votre document. C'est-à-dire que vos mots clés soient encadrés par des balises leur donnant de l'importance
Exemple de balisage sémantique
Voici un exemple d'utilisation judicieux des balises h1, h2, h3 ,p ,ul , ol et li.
<h1>Les éléphants des forêts</h1> <p>Dans cette partie, nous abordons le sujet moins connu des éléphants des forêts.</p> <h2>L'habitat</h2> <p>Les éléphants des forêts ne vivent pas dans les arbres mais au milieu d'eux.</p> <h2>L'alimentation</h2> <p>Les éléphants des forêts ne mangent pas des aliments identiques la nuit et le jour.</p> <h3>L'alimentation de nuit</h3> <p>La nuit, les éléphants des forêts mangent les aliments suivants :</p> <ul> <li>Souris</li> <li>Serpent</li> <li>Araignée</li> </ul> <h3>L'alimentation de jour</h3> <p>Le jour, les éléphants des forêts mangent d'autres aliments. Voici la liste d'aliments par ordre de préférence :</p> <ol> <li>Herbe</li> <li>Foin</li> <li>Fougère</li> </ol>
CSS et balisage sémantique
La langage CSS permet de modifier l'affichage des balises. C'est pourquoi, le choix d'utiliser telle ou telle balise doit être déterminé avant tout en fonction du sens de la balise plutôt que de son affichage par défaut dans votre navigateur..