Est-ce que Text-Indent: -9999px est une mauvaise technique pour remplacer le texte par des images, et quelles sont les alternatives?

Question

Cet article Disons que nous devons éviter d'utiliser cette technique. Celui-ci dit que c'est génial. Est-il vrai que Google regarde dans les fichiers CSS pour text-indent: -9999px; Et vous punit? : |

J'utilise cette propriété beaucoup pour cacher du texte. Par exemple, j'ai un bouton représenté par une icône:

<a href="#" class="mybutton">do Stuff</a>

Le CSS:

.mybutton{
  text-indent: -9999px;
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
  display: block;
  width: 16px;
  height: 16px;
}

Je ne vois aucune alternative à mon code. Si je le remplace par une image, j'obtiens automatiquement +20 demandes HTTP pour chaque image de bouton.

Si je rend le lien vide, il est moins accessoire car les lecteurs d'écran ne sauront pas ce que c'est. Et les liens vides sont bizarres, probablement Google n'aime pas ça non plus ...

Alors, quelle est la meilleure façon de gérer de telles situations?

Answer 1

Une bonne raison de ne pas utiliser la méthode -9999px est que le navigateur doit dessiner une boîte 9999px pour chaque élément auquel cela est appliqué. De toute évidence, cela crée potentiellement un coup de performance, surtout si vous l'appliquez à plusieurs éléments.

Les méthodes alternatives incluent celle-ci (de zeldman.com):

text-indent: 100%; white-space: nowrap; overflow: hidden;

... ou alternativement (de ici):

height: 0; overflow: hidden; padding-top: 20px;

(où le «padding-top» est la hauteur que vous voulez que l'élément soit).

Je pense que la première méthode est plus nette, car elle vous permet de définir la hauteur de la manière normale, mais j'ai trouvé le deuxième pour mieux fonctionner dans IE7

Answer 2

J'ai lu que Google ne fait pas la promotion du concept d'utilisation d'un négatve text-indent Sur les balises d'ancrage - http://maileohye.com/html-text-indent-not-messing-up-your rankings/. Idéalement, vous devriez utiliser des balises de titre et des attributs REL pour en dire plus sur les moteurs de recherche sur les liens.

De plus, vous voudrez peut-être lire ces fils:

• http://www.google.com/support/forum/p/webmasters/thread?tid=1a51b7310162d1aa&hl=en

• http://websintsesigntips.com/5-tips-web-designers-develovers-optimize-site-search-engines/ (le dernier point)

Sitemaps, robots, balises d'ancrage utilisant des balises REL et de titre dans la mesure du possible et appliquer des balises ALT à vos images devrait aider à mieux le référencement.

Google traverse également le contenu axé sur l'Ajax en utilisant l'opérateur Shebang (#!) Alors c'est peut-être quelque chose que vous voudriez lire - http://www.seomoz.org/blog/how-to-allow-google-to-crawl-ajax-content

En utilisant HTML5 et JQuery, il existe un certain nombre de plugins qui permettent le signet et les liens profonds des liens AJAX.

J'espère que cela t'aides.

Answer 3

L'astuce de retrait du texte devrait être OK pour les boutons d'action, et peut-être pas si OK si vous voulez que les moteurs de recherche considèrent le texte du lien tout en pesant le rang de page de la page cible.

Soit dit en passant, je crois fermement que Google utilisera plusieurs heuristiques avant de considérer votre balisage comme un spam, vous devriez donc vous en sortir avec l'utilisation du texte avec désinvolture.

Answer 4

Je ne sais pas si Google a des problèmes (bien que l'article auquel vous avez lié les liens vers Un article de blog d'un employé de Google, de sorte que cela a du poids), mais je pense que l'alternative est d'utiliser un <img> Tag avec un gif transparent, et votre sprite comme son background-image:

Html

<a href="#" class="mybutton"><img alt="do Stuff" src="1-pixel-spacer-image.gif" width="16" height="16"></a>

CSS

.mybutton,
.mybutton img {
  display: block;
  width: 16px;
  height: 16px;
}

.mybutton img {
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
}

Images d'arrière-plan sur <img> Les tags fonctionnent de manière fiable, même dans IE 6.

Bien sûr, ce que Google essaie de faire, c'est d'éviter d'indexer le texte qui n'est pas visible, et alt Le texte n'est pas non plus visible. Mais peut-être que cela évitera le risque que votre page soit peut-être signalée en tant que spam par un algorithme Google.

Et cette méthode entraîne au moins le texte affiché si l'utilisateur désactive les images dans son navigateur, qui text-indent n'a pas.

Answer 5

Eh bien, il existe une alternative (que j'utilise assez fréquemment).

<a href="#" class="mybutton"><span>do Stuff</span></a>

Vous pouvez changer de portée en fort / h1 etc. en fonction du contexte.

.mybutton{
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
  display: block;
  width: 16px;
  height: 16px;
}
.mybutton span{
    display: none;
}