Une nouvelle catégorie sur le référencement fait son apparition et c’est moi qui ai l’honneur de l’inaugurer. Comme son nom l’indique, elle a pour but de vous faire découvrir ou de vous rappeler des astuces pour le référencement naturel.
On commence par une des choses les plus importantes pour le référencement naturel : la sémantique. Cette astuce sur le référencement concerne les développeurs mais également les rédacteurs.
La sémantique en référencement consiste à donner du sens à votre code. Il faut donc utiliser les balises HTML appropriées en fonction du contenu de celles ci. En effet, les balises qui composent vos pages doivent aider les robots de Google et des autres moteurs de recherche à comprendre ce que contiennent ces balises. Comme j’en parlais lors de la sortie de youtube HTML5, la version 5 d’HTML est doté d’encore plus de balises pleines de sens. Mais je ne traiterai que de HTML4 dans ce billet.
Structurer le contenu avec les bonnes balises HTML (développeurs et rédacteurs)
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.
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.
Le titre de votre page
Un premier sous-titre
Des titre de 3ème niveaux sont possibles
Un deuxième sous-titre
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.
Un paragraphe !
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.
La balise STRONG met en avant
un point important
au milieu de texte.
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.
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.
Le blog fuegin.com est super !
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).
- élément 1 de la liste ordonnée
- élément 2 de la liste ordonnée
- élément 3 de la liste ordonnée
Penser sémantique et non graphique pour les classes et identifiant (développeurs)
Ce point n’est pas vraiment (à ma connaissance) pris en compte par les moteurs de recherche mais reste très important pour la sémantique. Lorsqu’on fait de l’intégration HTML/CSS à partir d’une maquette, on peut vite se laisser tenter par des classes du type : « bleu », « petit » (ou « blue », « small » pour d’autres)… Où sinon les fameux identifiants : « gauche » ou « left_column » et tout ce genre de chose. Ce type de code soulève plusieurs problèmes :
- Le jour où vous ou quelqu’un d’autre (si si c’est possible) retouche le code pour, par exemple, changer le design. Votre page va se retrouver avec une classe « bleu » qui peut afficher du jaune. Ou une colonne qui s’appelle « left_column » qui se retrouve à droite…
- Ça n’a aucun sens ! Les classes et les id existent pour différencier des éléments qui ont la même balise de base. Alors si la balise ne donne pas de sens autant que votre classe ou votre identifiant en donne.
Il faut donc passer par le sens et non par l’apparence pour nommer vos différentes parties. Par exemple, notre division « left_column » peut devenir « sidebar » ou « secondary » en fonction de la logique employée. Pour l’exemple du bleu essayez de savoir pourquoi ce texte est bleu et donnez lui le nom qui correspond.
Vérifier si le code HTML est bien optimisé pour le référencement au niveau sémantique
Un bon moyen de voir si votre page est optimisée pour le référencement naturel est de vous mettre à la place d’un robot.
Commencez par désactiver les styles CSS sur votre page. Vous aurez un bon aperçu de ce que les robots voient. Désactivez également les images et les scripts et là vous verrez presque comme le robot. (Enfin pas vraiment, le robot, lui, voit le code, mais vous, vous verrez l’interprétation du code par votre navigateur ce qui est à peu près équivalent.) Si votre page est toujours lisible, que le sens est tout à fait compréhensible et que les points importants ressortent bien, alors bravo : vous avez utilisé les bonnes balises niveau sémantique et vous avez optimisé votre code HTML pour le référencement.
Suivez nous sur
twitter et facebook