web-dev-qa-db-fra.com

SEO: images et texte descriptif

J'ai un site qui utilise intensément la fonctionnalité d'image d'arrière-plan pour remplacer le texte par un graphique contenant ce texte sous une forme stylisée.

Pour des raisons d'accessibilité et de référencement, le texte actuel est inclus dans le code HTML, mais je ne souhaite pas qu'il soit affiché pour la plupart des utilisateurs.

Quelle est la meilleure approche pour y parvenir? Il existe des recommandations pour utiliser le placement hors écran, mais d'autres mettent en garde contre le fait que ce soit un chapeau noir. Ensuite, il y a la possibilité d'utiliser quelque chose comme

@media all {
  .mybox{visibility:visible;}
}
@media not speech {
  .mybox{visibility:hidden;}
}

mais je n'ai jamais vu cela utilisé ou recommandé.

Quelle est la meilleure pratique actuelle pour cela?

Mon HTML ressemble à ceci:

<div class="SFM_TextBox" id="SFM_Block_4_3_B">
  <div class="SFM_Tooltip">Your strategy will be tuned to your business.</div>
</div>

Et mon CSS ressemble à ceci:

#SFM_Block_4_3_B {
  background-image: url(images/strategy.png);
  background-repeat: no-repeat;
  background-size: 80% 80%;
  background-position: center; }

La classe SFM_Tooltip est celle que je veux masquer. Cela s'appelle tooltip parce que je jouais avec cette option au début, mais c'est juste gênant visuellement d'avoir une info-bulle avec le même texte qui est déjà dans l'image.

seoaccessibility
2
Sebastian Meine

Quelle est la raison pour placer du texte dans une image plutôt que de le charger dans le code HTML? Vous voulez généralement que tout votre texte analysé soit utilisé par les visiteurs et les robots d'exploration. Examinez le cache propre de la page et utilisez l'outil "Fetch as Google" dans GWT pour voir ce que Googlebot voit. Voici à quoi ressemble actuellement votre page à Googlebot: http://webcache.googleusercontent.com/search?q=cache:http://simplefastmarketing.com/&hl=fr&strip=1

En regardant votre page, je vous recommande fortement d'afficher tout le texte dans le code HTML de la page plutôt que les zones de texte que vous avez lorsque vous survolez les images. Si vous avez absolument besoin de le faire de cette façon, utilisez simplement l'attribut image alt text pour charger votre texte. Le texte alternatif de l'image est explorable et est en place au cas où vos images se briseraient et seraient illisibles. Ceci est également utilisé comme facteur de classement bien que ce soit une deuxième option moins idéale.

2
David Garcia

Ce qui n'est pas visible (jamais) par les utilisateurs n'est pas pris en compte par Google pour le classement. Hidding SFM_Tooltip n'est pas une solution.

Une option dans votre cas est de mettre des mots-clés dans le nom de fichier de votre image. Google recherche des informations dans les noms de fichiers.

Une autre solution consiste à afficher du texte si quelqu'un clique sur l'image. Ce texte sera réduit pour les classements car il n'est pas immédiatement visible pour les utilisateurs, mais il comptera quand même.

2
Jérôme Verstrynge