Un exemple sera certainement plus compréhensible, imaginons la hiérarchie de titres d’une page de type CV :

<h1>Le titre d'un cv</h1>
<h2>Formations</h2>
<h3>Diplome 1</h3>
<h3>Diplome 2</h3>
<h3>Diplome 3</h3>
<h2>Expériences Pro.</h2>
<h3>Poste 1</h3>
<h3>Poste 2</h3>
<h3>Poste 3</h3>

On comprend très vite que les titres intéressants en terme de mots clefs sont dans des balises H3. Balises qui sont moins mis en avant que les balises H2 par Google (ou les autres). De plus, les mots des balises H2 ne sont pas intéressants. La solution : on va échanger les balises :

<h1>Le titre d'un cv</h1>
<h3>Formations</h3>
<h2>Diplome 1</h2>
<h2>Diplome 2</h2>
<h2>Diplome 3</h2>
<h3>Expériences Pro.</h3>
<h2>Poste 1</h2>
<h2>Poste 2</h2>
<h2>Poste 3</h2>

Ainsi, nos mots-clefs sont bien dans des balises importantes et on garde une certaine hiérarchie. Mais cette hiérarchie n’est pas continue (H1 suivi de H3 contenant des H2), vu qu’on a inversé l’ordre. Cette pratique n’est donc en soit pas vraiment “propre” et ne respecte pas les normes.

Malgré ce non respect des normes, cette pratique reste un bon moyen de propulser des mots-clefs et n’est pas mal vu par les moteurs.

Depuis un moment, je souhaitais réagir à un article sur la hiérarchie des titres publiés sur alsacreations. En lui-même, l’article est très bon et explique bien comment construire de manière sémantique et dans le respect des normes, une hiérarchie propre. Mais pour le référencement, il ne suffit pas de respecter ces règles. Il faut parfois tricher, je vais reprendre point par point ce très bon article et rajouter si besoin des infos pour le référencement.

Les titres de section

Ce que l’on appelle « hiérarchie des titres » ou plus simplement hiérarchie est l’ensemble des éléments titres de section balisés de H1 à H6 (que l’on appellera “Hn”). Le W3C définit le titre de section comme un élément qui décrit brièvement le sujet de la section qu’il introduit. Ce titre de section ne doit pas être confondu avec le titre de la page, balisé avec title, exclusivement dans le head du document.

Premier point important, c’est vrai qu’il faut bien différencier titre de section (balise Hn) et titre de la page. Mais pour les moteurs de recherche, la balise H1 reste le titre de la page. Il n’a pas à être identique à la balise TITLE mais il est en quelque sorte son équivalent dans la page. Je reviendrais sur le H1 en fin d’article.

La hiérarchie des titres sert principalement à structurer le document  mais elle a bien d’autres utilités, voire même nécessités :

• Pour les utilisateurs de lecteurs d’écran, les titres Hn sont un moyen efficace de naviguer dans la page, mais les logiciels de lecture d’écran ne peuvent générer une liste de titres compréhensible que si la hiérarchie des titres du site est correcte.
• Pour les robots indexeurs des moteurs de recherche, les titres de haut niveau représentent du contenu important et ont donc une pondération plus forte que le reste du contenu. Ces titres doivent donc être présents et bien utilisés.
• Les visiteurs scannent les pages d’un site plus qu’ils n’en lisent le contenu. Les titres de section et de sous-section étant des points de repère, il est important que ces titres soient présents et annoncent le contenu qui les suit.

Sur ces points, je suis tout à fait d’accord. J’en profite pour rappeler que les moteurs s’intéresse surtout aux balises H1 et H2.

Dans la pratique

La hiérarchie des titres d’une page web doit être :

• Logique : elle doit suivre le schéma d’une table des matières comme pour tout document textuel.
• Continue : elle doit commencer par un H1 et ne pas comporter de sauts de niveau (un H1 ne peut être directement suivi d’un H3, il doit y avoir au moins un H2 entre les deux).
• Pensée pour l’utilisateur, et non pour le référencement : les titres doivent être des titres et non des mots clés sans rapport avec ce qui suit, ni des paragraphes complets.
• Sémantique, et non visuelle : un élément Hn doit être utilisé pour sa valeur sémantique (titre de niveau n) et non pour son rendu visuel (qui peut être totalement transformé avec CSS).
• Ergonomique : Les utilisateurs sont habitués aux titres, ils les aident à se retrouver dans la page, tant papier que virtuelle, et à aller à l’essentiel de l’information. La présence de titres de section rend également le texte plus digeste et lisible  et de fait aide à retenir l’attention, très volatile sur Internet, du lecteur.

Tout ceci est tout à fait vrai et bien conforme à la sémantique. Mais il est possible de tricher dans l’organisation de la hiérarchie des titres, afin de mettre les H2 sur les titres porteurs de mots clefs. On peut ainsi perdre la continuité, ce qui n’est pas vraiment “propre”.

Note :

Peut-il y avoir plusieurs H1 dans une même page ?

Oui, c’est tout à fait possible. Bien que certains pensent que H1 ne doit être utilisé qu’une seule et unique fois dans la page  aucune règle, sémantique ou autre, ne tranche sur ce sujet. L’élément H1 doit désigner un titre de niveau 1, si la construction de la page implique la présence de plusieurs titres de niveau 1, il est tout à fait logique d’utiliser l’élément approprié : H1. Par contre, l’élément H1 ne doit en aucun cas être utilisé, à tort, pour « booster le référencement » d’un site en y mettant autre chose que des titres de niveau 1.

On arrive à la partie intéressante. Comme je disais au début de l’article, les moteurs considèrent la balise H1 comme un titre de la page et elle doit être unique. Mais la réponse donnée sur alsacreations.com est tout à fait vrai ! En terme de sémantique ou de norme W3C, rien n’indique que la balise H1 doit être unique.

On voit clairement ici la différence entre les normes sémantiques pures et la vision des pages par les moteurs. Pour moi les deux pratiques se défendent et ont de bons arguments.

1. Le fait de n’utiliser qu’un seul H1 permet d’avoir un titre unique dans BODY. Cette pratique offre à l’utilisateur un titre dans la page ce qui me parait être une bonne chose.
2. Utiliser plusieurs H1 dans une page, c’est tout simplement considérer que le titre de la page est dans la balise TITLE. La balise H1 devient ainsi un titre de section comme les autres.

Dans une optique d’un bon référencement dans les moteurs, c’est bien sur la première pratique que j’utilise et que je conseille.

Une page très bien optimisée comporte un titre et des sous titres développés dans un ou plusieurs paragraphes qui peuvent être parsemés de points importants, de listes, d’abréviations… Il faut donc utiliser les balises qui correspondent au bon type de contenu pour que les robots différencient chacun de ces éléments.

Les balises HTML pour les titres

Pour les titres ils existent les balises H qui se déclinent sur plusieurs niveaux. La balise H1 est le titre de votre page, les balises H2 : les sous-titres et ainsi de suite. Vous pouvez grâce à ce système hiérarchique donné un squelette solide à votre page. Vous noterez bien que j’ai écris “LA” balise H1 car celle ci doit être unique : c’est le titre de votre page, il peut évidement n’y en avoir qu’un ! Les moteurs de recherche apportent beaucoup d’importance à cette balise ainsi qu’au titre de niveau 2. Les titres de niveaux plus bas 3, 4, etc sont moins pris en compte.

<h1>Le titre de votre page</h1>
<h2>Un premier sous-titre</h2>
<h3>Des titre de 3ème niveaux sont possibles</h3>
<h2>Un deuxième sous-titre</h2>


La balise P pour les paragraphes

Pour vos paragraphes, je ne suis pas forcément le mieux placer pour donner des cours de français. Mais essayez d’avoir un idée principale par paragraphe et de ne pas faire des paragraphes trop longs qui découragent souvent les lecteurs (surtout sur internet). De plus, des paragraphes courts permettent d’aérer votre contenu. En terme de code rien de bien compliquer un paragraphe est entouré par des balises P ouvrante et fermante.

<p>Un paragraphe !</p>


Mettre en avant un point à l’aide de balises HTML

Pour les points importants dans un paragraphe (ou ailleurs), la balise STRONG permet d’insister sur une phrase ou un groupe de mots. Cette balise est utilisé par les robots pour repérer le contenu d’une page.

<p>La balise STRONG met en avant
<strong>un point important</strong>
au milieu de texte.</p>


Donner la signification d’une abbréviation en HTML

Pour les abréviations, la balise ABBR permet de mettre en attribut TITLE la signification de votre abréviation. Cette balise est très utile, elle vous permet d’utiliser les deux formes d’une même expression et d’avoir ainsi les deux mots clefs dans votre page. Et surtout elle permet au lecteur de savoir ce que signifie votre abréviation sans chercher ailleurs.

<abbr title=”HyperText Markup Language”>HTML</abbr>

La citation en HTML

Pour les citations, la balise BLOCKQUOTE vous permet d’entourer des paragraphes pour les noter comme des citations. On peut donner l’URL de la source grâce à l’attribut CITE.

<blockquote cite="http://www.ciseur.net">
Ciseur.net est super !
</blockquote>


Lister des éléments avec les bonnes balises HTML

Pour les listes, les balises UL et OL permettent de créer des listes. La différence entre les deux est bien sémantique. L’une correspond aux listes ordonnées (OL) et l’autre aux listes sans ordres particuliers (UL). Elles doivent toutes deux contenir des objets de liste (LI).

<ol>
<li>élément 1 de la liste ordonnée</li>
<li>élément 2 de la liste ordonnée</li>
<li>élément 3 de la liste ordonnée</li>
</ol>