Oh My Blog

Le text link : un élément fondamental pour le référencement

Chacun sait que le text link (littéralement le « texte du lien ») est un élément clé du référencement. Pour être optimal, les text link de vos liens doivent contenir les mots-clés qui vous sont chers et doivent varier au maximum. Pour augmenter la popularité de vos pages, il est de bon ton de faire des liens dans le corp de vos articles par exemple, lequels pointeront vers d’autres articles de votre site et ainsi de suite, c’est ce que l’on appelle le maillage, Yahoo le fait très bien dans ses articles.

L’astuce suivante va facilement vous permettre d’augmenter le maillage entre vos pages, l’exemple est tiré du guide des restaurants du sud ouest.

Considérons que le Webmaster de ce site souhaite se positionner au mieux sur les moteurs de recherche pour toutes les expressions du type « restaurant + ville » (par exemple « restaurant Arcachon »). La technique va consister ici à isoler l’ensemble des noms de villes contenus dans la base de données de description des restaurants.

Voyez l’exemple de ce restaurant d’Arcachon. Nous retrouvons une seule fois dans sa description le mot-clé « arcachon », l’astuce va donc consister à créer un lien « à la volée » sur le mot-clé « arcachon », ce lien pointera vers le catalogue père, c’est à dire vers la page listant l’ensemble de tous les restaurants situés à Arcachon. Mais comme nous parlons ici d’optimiser les text link des liens, vous conviendrez que le mot-clé « arcachon » n’est peut-être pas optimum et qu’il conviendrait de lui associer idéalement le mot « restaurant ». Problème, si l’on rajoute ce mot-clé, la phrase perd de son sens : « Une authentique maison arcachonnaise et sa terrasse ombragée vous acceuillent au coeur de la ville d’été d’restaurant arcachon« . Comment gérer cette contrainte…? Pas de problème, les propriétés « display=none » et « display=block » vont vous permettre de masquer le mot « restaurant » pour l’afficher seulement sur le rollover du lien, un peu comme l’attribut « alt » des images.

Voici comment procéder :

Considérons le text link optimisé suivant :

<a href="#">restaurant VILLE</a>

L’ajout d’une balise neutre de type <span> va permettre de masquer le mot « restaurant » à l’intérieur du lien grâce à la déclaration CSS suivante :

a span {display:none}

Pour signifier ensuite à l’utilisateur que ce lien le conduira vers le catalogue père « restaurant Arcachon » lorsqu’il le survolera avec sa souris, la propriété CSS « display:block » fera l’affaire :

a:hover span {display:block}

Le problème est que l’affichage du mot clé « restaurant » n’est pas conforme ce qui ne facilite pas du tout la lecture… Il convient donc de positionner ce terme au mieux, c’est-à-dire juste au-dessus du lien, pour cela nous allons utiliser les propriétés de positionnement de l’élément span :

a:hover span {display:block; position:absolute; top:-10px}

N’oublions pas que la propriété de positionnement en absolu ne s’opère que par rapport à un autre élément positionné en relatif, nous souhaitons ici que le span contenant le mot-clé « restaurant » soit positionné juste au-dessus de la balise <a> qui le contient, nous devons donc postionner la balise <a> en relatif, soit :

a {position:relative}

Le code CSS complet pour masquer le mot-clé contenu dans le lien et ne l’afficher qu’au survol est donc le suivant :

a {position:relative}
a span {display:none}
a:hover span {display:block; position:absolute; top:-10px}

Vous pouvez ensuite jouer avec les propriété de couleur pour l’arrière-plan du span.