Aller au contenu | Aller au menu Effectuer une recherche :

Spamdexing ou effet de style

Le remplacement par image, une optimisation au référencement et au graphisme

Nous avons vu que certaines fonctionnalités des CSS pouvaient être utilisées afin d'améliorer votre référencement, afin de jouer sur la pertinence de la page, afin d'améliorer la densité des mots clés utilisés dans votre page sans pour autant qu'ils ne soient visibles et ne gâchent votre mise en page et votre graphisme. Il existe néanmoins des utilisations des règles CSS qui peuvent vraiment être bénéfiques aussi bien pour votre référencement que pour votre graphisme. Découvrons cette fameuse technique qui dispose de nombreuses variables et cherche en même temps à améliorer l'accessibilité.

Pour un meilleur design et un accès au texte préservé

Vous êtes webdesigner et souhaitez tout de même optimiser votre site internet sans pour autant être trop dépendant d'une codification impartiale de votre page : cet article vous concerne. Parallèlement, si vous êtes interessé par le référencement et souhaitez vous donner des chances supplémentaires en terme de graphisme : cet article vous concerne aussi. Vous êtes un curieux de passage : cet article vous concerne certainement ;)

Le principe que nous allons mettre en avant consiste à faire apparaitre une image de fond à la place d'un texte et essentiellement d'un titre en l'occurence. Pourquoi ?
Vous voulez utilisez des polices de caratères dont vous êtes certain que 99.9% des internautes ne verront pas, vous allez donc inclure votre titre avec vos caractères spécifiques dans une image et pourtant conservé un titre textuel que les moteurs de recherche pourront lire et nous le verrons par la même occasion que les malvoyants pourront éventuellement lire selon la technique employée.
Voyons comment mettre ceci en oeuvre, selon la méthode proposée à l'origine : la technique de remplacement par image de Farhner (FIR : Farhner image replacement).

Dans votre page :
<h1 id="header">
   <span>Votre titre, qui ne sera pas visible</span>
</h1>

Dans votre CSS :
h1#header {width: 400px; height: 50px;
   background-image: url(votre-image-titre.jpeg)}
h1#header span {display: none}

Cette technique permet donc de faire apparaitre, dans notre exemple une image de fond de 400px de long par 50px de haut dans votre Header de niveau 1 et de faire figurer le titre en version texte dans un span qui ne sera pas affiché grâce à la règle CSS : display:none
D'autres techniques ont vu le jour rapidemment suite à cette utilisation de CSS afin de permettre une meilleur accèssibilité car la règle CSS display:none, empéche les internautes malvoyants utilisants des navigateurs de type texte de voire le contenu de ce span qui ne sera pas affiché. Un peu plus de détails sur ces autres techniques...


valide frenchseo référencement    Valid XHTML 1.0!    Valid CSS!    [Valid RSS]