Les designers de page web et les développeurs ou consultant SEO ne sont pas toujours d’accord sur la conception d’une page. D’un coté, les premiers privilégient l’aspect visuel, les seconds voulant optimiser le code source pour le référencement naturel. Alors quel est le meilleur compromis ?Cette question est souvent soulevée lors du design de titres pour des blocs d’information. En effet, on souhaite par moment utiliser des typos qui ne sont pas gérer nativement par les navigateurs web mais qui font souvent parties de la charte graphique existante voir même de l’ADN d’une marque.
Pour les référenceurs, les titres de ces blocs sont souvent l’occasion de mettre en place un balisage sémantique efficace. Le fait de remplacer le titre par une image peut avoir en effet négatif bien que l’on peut palier ce dernier en renseignant correctement la balise Alt de l’image.
Selon nous, la meilleure méthode consiste à afficher du texte dans la balise mais de remplacer ce dernier par une image via le fichier CSS. De cette manière, on a bien le texte dans le code source de la page, mais visuellement nous ne sommes pas obligés de modifier la charte graphique du site.
Un exemple de code source pour effectuer cette modifications :
<h3 id= »header »>
<span>Revised Image Replacement</span>
</h3>/* css */
#header {
width: 329px;
height: 25px;
background-image: url(sample-opaque.gif);
}
#header span {
display: none;
}
Connaissez-vous d’autres techniques pour palier ce problème ?
Bonjour,
En effet ça me paraît être un bon compromis parce que je ne suis pas sûr qu’un « alt » puisse combler totalement la présence de texte.
Par contre, je me demande… ça ne reviendrait pas un peu à tromper les moteurs comme si on mettait du texte blanc sur fond blanc ou quelque chose dans ce style là?