Bonjour à tous, aujourd’hui je pensais vous parler de référencement, de SEO comme on dit dans les soirées branchées. Le sujet étant très vague, nous nous concentrerons sur les titres. De h1 à h6, je ferais en sorte de faire un petit tour de ce qu’il y a à savoir sur ces éléments dont le contenu et la hiérarchie peuvent faire la différence dans le référencement naturel de votre site.
Il existe plusieurs niveaux de titre pour vos documents HTML, à ne pas confondre avec la balise title qui elle n’est pas visible sur vos pages. Ils sont disponible de h1 qui est le plus important à h6 le moins pertinent. Généralement chaque page contient au moins une balise h1, c’est le titre global de la page, celui qui défini le sujet abordé par le reste du contenu. Ce dernier est ensuite divisé en sections, en articles ou en paragraphes. Chacun de ces éléments aborde un sous-sujet différent qu’il convient de hiérarchiser avec des titres explicites. À l’instar des journaux, les titres aident à la lecture et à la compréhension de vos contenus, tant pour le lecteur que pour les robots.
Voyez plutôt :
Si l’on suit cette logique de hiérarchisation, chaque titre devrait se positionner sous un titre de niveau supérieur. Par exemple :
h1 - Titre principal
- h2 - Sous-titre de premier niveau
--- h3 - Sous-sous-titre
- h2 - Sous-titre de premier niveau
--- h3 - Sous-sous-titre
----- h4 - Encore un sous-niveau
On comprends avec ce type d’exemple qu’il est rare d’avoir besoin de titre de niveau 5 ou 6 (la plupart des sites n’utilisent d’ailleurs que les 3 premiers niveaux). L’un des sites les plus représentatif est sûrement wikipédia où le menu de chaque page découle directement de la structure de ses titres.
Il ne faut pas oublier que le but premier de ces titres est de diffuser l’information, il convient donc de prendre le temps de les rédiger correctement. Il nous faut trouver l’équilibre entre être compris par nos lecteurs et être interprétés (avec des mots clés) par les moteurs de recherche.
Après ce que nous venons de voir, une mauvaise pratique serait bien sûr de n’avoir aucune logique au niveau de l’ordre des titres, comme par exemple :
--- h3
h1
- h2
----- h4
--- h3
Aujourd’hui je tombe sur un certain nombre d’articles qui prônent le contenu en amont du webdesign, et je trouve ça assez logique. Mais si on veut aller plus loin il faut définir les titres avant même d’écrire les paragraphes.
Mettre en place les idées directrices ou les axes de communication que vous souhaitez diffuser passe avant tout par des phrases simples, courtes et aux termes précis. Ensuite vous prenez le temps de trier tous ces éléments par ordre d’importance, vous les associez dans une idée plus directrice que les autres afin de créer une hiérarchie d’informations. Si tout se passe bien vous devriez vous retrouver avec un bel arbre, comme celui d’une page wikipédia que nous avons vu plus haut.
Cet arbre, c’est exactement ce que recherchent vos visiteurs en survolant rapidement les différents titres de vos pages et ce que recherchent les moteurs de recherche en indexant vos titres.
Une autre pratique encore assez répandue et pourtant relativement mauvaise pour notre référencement est l’utilisation du h1 pour contenir le nom de la marque ou même une image avec le logo de votre site. Identiques sur toutes les pages de votre site, ce titre sera très peu en rapport avec le contenu unique de la page que nous visualisons et n’aura donc que très peu de valeur pour les moteurs de recherche.
Il est important d’avoir des titres uniques, tout comme il est important d’avoir des contenus uniques. Les moteurs de recherche prennent la répétition comme de la duplication de contenu, ce qui est très mauvais pour votre référencement.
J’ai eu récemment la mauvaise expérience d’avoir utilisé des styles précis sur des balises de titre. Je vous conseille d’éviter ce genre de pratique et d’utiliser des classes spécifiques. Le problème vient du fait qu’un titre n’aura pas forcément le même niveau sémantique et visuel, et lorsqu’on utilise les balise h1, h2 ou autres pour définir des styles on a vite tendance à oublier que ce sont d’abord des introductions à un contenu et des phrases clés pour les moteurs de recherche.
Il peut être assez pratique de créer des titres pour certaines parties de nos site (sidebar, module twitter, commentaires…) mais bien souvent ils ne seront pas très pertinents en terme de référencement et n’ajoute que du “bruit” pour un robot.
Après tous ces conseils et remarques j’imagine que le mieux est de vous donner un outil pour vérifier toute cette théorie sur vos sites.
Nous pouvons lancer le script qui suit sur n’importe quelle page web grâce à la console de notre navigateur. Nous obtenons ainsi un aperçu de sa hiérarchie en ASCII.
var titles = document.querySelectorAll('h1,h2,h3,h4,h5');
for (var i = 0; i < titles.length; i++) {
var index = titles[i].tagName.split('').pop(),
tab = [];
while(tab.length < index-1){ tab.push("--");}
console.log(tab.join('') + '| ' + titles[i].tagName + ' | ' + titles[i].innerHTML);
}
J’ai été assez surpris de ne pas trouver de ressources précises ou même de la documentation sur le sujet des titres en HTML et leur importance en terme de référencement. Plus souvent j’ai trouvé des articles ou chacun diffuse ses propres expériences, c’est pourquoi j’ai fait de même dans ce billet.
Globalement j’ai l’impression que les règles sont assez proches d’une communication standard, soyons concis et clairs pour que nos messages soient diffusés et compris par tous.
J’espère vous avoir appris 2-3 choses, n’hésitez pas à me partagez vos expériences sur le sujet, à commenter en bas de l’article, je répondrais avec plaisir. À bientôt.
L’équipe Synbioz.
Libres d’être ensemble.
