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:

Épicier Bono: fruits et légumes frais

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.

Nouvel ajout à l’article:

Il existe une autre façon d’arriver au même résultat avec les CSS qui est probablement supérieure puisque celle-ci permets de voir le texte si les images sont désactivées. Le principe est similaire, mais au lieu de déplacer le texte de façon à le rendre invisible, on superpose l’image au-dessus pour qu’elle prenne tout l’espace.

Épicier Bono: fruits et légumes frais

h1#titre {
height: 50px;
overflow: hidden;
position: relative;
width: 300px;
}
h1#titre span {
background: url('/images/logo-epicier-bono.jpg') no-repeat;
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

Une autre technique, si vous voulez remplacer un lien texte par une image et créer un effet mouseover. Dans cette situation, il vous faut créer l’image cote à cote avec la deuxième image dans le même fichier pour l’effet mouseover. Si l’image originale fait 200px de largeur, élargissez le fond de l’image vers la droite avec 200px supplémentaire et copier/coller la nouvelle image dans cet espace. Ensuite, il suffit de changer la position du background vers la gauche pour afficher la 2ème image. Cette technique est communément appellée un « sprite ». Pour garder la valeur texte du lien avec sa description, on entoure le texte par une balise span, pour finir par cacher son affichage:

nos fruits et légumes

a#monlien, a#monlien:visited {
	display: block;
	width: 200px;
	height: 50px;
	background-image: url('/images/fruits-legumes.gif');
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

a#monlien:hover {
	background-position: -200px 0px;
}

a#monlien span {
	display: none;
}