Remplacer le texte d’un titre H1 avec une image
Il existe un petit truc pour continuer à employer la balise H1 et ses effets bénéfiques, au niveau du positionnement avec les moteurs de recherche et sa valeur sémantique dans une page html (désignant le titre d’un article), mais tout en affichant une image afin d’avoir un titre graphiquement plus riche, ou une police de caractère plus variée que les polices de bases pour une page web.
Ce truc se situe pas mal dans la région grise entre les deux types de pratique pour le référencement et le positionnement, souvent nommé white hat ou black hat, la première étant acceptée (blanche) par les moteurs de recherche et l’autre (noire), franchement découragée, souvent, même, pénalisée.
Il vous revient la décision d’utiliser ce truc ou non. Allez savoir si un jour Google pourrait punir un site pour une telle pratique, mais entre temps, je l’ai observée dans un site d’une grosse compagnie majeure américaine, alors cette pratique a tout de même une certaine validité. Personellement, je ne l’utiliserais pas, je suis assez conservateur pour ce genre de choses (je dors mieux la nuit ainsi), mais je l’ai trouvée assez intéressante pour au moin en discuter:
En premier lieu, inscrivez votre titre dans une page html avec sa balise H1 normale, comme dans l’exemple suivant:
<h1>Épicier Bono: fruits et légumes frais</h1>
Ensuite, dans votre fichier de styles CSS ou les headers de votre document, inscrivez le code suivant, en ajustant les dimensions de l’image qui va remplacer le texte avec la votre:
h1 { width: 300px; height: 50px; background-image: url('/images/logo-epicier-bono.jpg'); overflow: hidden; text-indent: -9999px; }
Comme on peut le voir, le texte est envoyé dans un espace qui ne sera jamais vu par les visiteurs, loin vers la gauche (l’attribut overflow: hidden; s’assure que le texte qui dépasse les dimensions du titre H1 ne va pas créer de barre horizontale), et seule votre image, le logo de l’épicier dans ce cas, logo-epicier-bono.jpg, sera perceptible. Les moteurs de recherches, eux, vont considérer le texte comme ayant la valeur d’un titre principal de page, et vous pourrez ainsi viser des mots-clés riches en traffic.
Laisser un commentaire
Vous devez être connecté pour publier un commentaire.
