web-dev-qa-db-fra.com

Meilleure structure sémantique et approche optimisée pour le référencement pour le remplacement des badges?

Dans le passé, j’avais beaucoup utilisé les techniques de remplacement d’image CSS pour le référencement et la séparation du contenu.

Mais à partir de ma lecture des Google Webmaster directives et autres commentaires récemment, je commence à me demander s'il vaut mieux utiliser <img> avec les attributs alt dans la plupart des cas, réservant le remplacement de l'image CSS pour les cas où il n'y a pas d'alternative.

Par exemple, j'essaie d'afficher une image de "badge" illustrant la certification ISO9001 d'un client. Ai-je raison de conclure que la meilleure approche serait de baliser quelque chose comme ...

HTML: 

<div class="accreditationItem">
  <h4>ISO9001 Accreditation</h4>
  <p>Quality ISO 9001 Certified System</p>
  <p>FM 999999</p>
  <img alt="Quality ISO 9001 Certification - FM 999999"
       src="iso9001-badge.jpg"/>
</div>

CSS: 

div.accreditationItem h4, div.accreditationItem p {
    display: none;
}
seogooglecssimages
6
Prembo

Je ne comprends pas vraiment pourquoi vous utiliseriez le remplacement d'image CSS dans ce cas où l'image ALt Tag suffirait? Je suis un SEO et je ne recommanderais pas cette approche à un client.

S'il est vrai que nous ne savons pas vraiment à quel point Googlebot peut analyser JS ou CSS, je ne l'excluerais pas (mais je ne dirais pas non plus catégoriquement que Googlebot les comprend tous les deux). C'est cette incertitude qui est le problème.

En règle générale, je ne recommanderais pas de cacher un contenu comme celui-ci, sauf obligation de votre part. Cacher du contenu sur une page ne vous posera aucun problème, mais si vous en parcourez plusieurs, il commence à créer des indicateurs avec Google. Lorsque le nombre de ces indicateurs atteint un point critique, il est possible que quelque chose se produise dans votre classement ( surtout s'il y a d'autres choses sur un puits).

C’est une question controversée au sein de la communauté SEO, même si beaucoup de gens disent que c’est bien. SEOmoz est le meilleur forum pour le consensus général sur le référencement ... jetez un coup d'œil aux articles ci-dessous (certains sur le remplacement des images et d'autres contre) et voyez ce que vous en pensez:

http://www.seomoz.org/pages/search_results?q=css+image+replacement

2
Sandy Lee

tilisez l'attribut alt, c'est pour ça.

La seule fois où je pourrais tolérer cette technique est pour:

<style>
input span { display: none; }
input { width: 50px; height: 20px; background-image: url('imgs/your-button.jpg');
</style>

<input type="submit"><span>Text</span></input>

Étant donné que vous ne pouvez pas insérer de code d'image dans l'attribut value de l'entrée dans cette instance.

1
Anonymous

Si j'étais vous, je montrerai le badge au format HTML par défaut.

Lorsque page.load(), utilisez JS pour le masquer.

Pour le problème de contenu caché, vous pouvez concerner:

  • Si vous avez beaucoup d'autres contenus et que seule cette pièce est cachée, ne vous inquiétez pas
  • De plus, si vous avez js pour l'afficher, Googlebot comprend JS, alors ne vous inquiétez pas

Pour une utilisation décente, comme le badge sur les sites Web stackexchange, c'est normal et pas de problème du tout.

0
Eric Yin