html - ¿Es text-indent:-9999px una mala técnica para reemplazar texto con imágenes, y cuáles son las alternativas?

css seo

Question

Este artículo dice que debemos evitar el uso de esta técnica. Este dice que es increíble. ¿Es cierto que Google busca en los archivos CSS text-indent: -9999px; de text-indent: -9999px; y te castiga? : |

Estoy usando esa propiedad mucho para ocultar el texto. Por ejemplo, tengo un botón que está representado por un icono:

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

El CSS:

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

No veo ninguna alternativa a mi código. Si sustituyo eso con una imagen, automáticamente obtengo +20 solicitudes HTTP para cada imagen de botón.

Si hago el enlace vacío, es menos accesible porque los lectores de pantalla no sabrán qué es eso. Y los enlaces vacíos parecen raros, probablemente a Google tampoco le guste eso ...

Entonces, ¿cuál es la mejor manera de manejar tales situaciones?

Answer 1

Bueno, hay una alternativa (que uso con bastante frecuencia).

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

Puedes cambiar span a strong / h1 etc. según el contexto.

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

Answer 2

El truco de sangría de texto debe estar bien para los botones de acción, y tal vez no tan bien si desea que los motores de búsqueda consideren el texto del enlace mientras ponderan el rango de la página de destino.

Por cierto, creo firmemente que Google usará múltiples heurísticas antes de considerar tu marca como SPAM, por lo que deberías usar las sangrías de texto de manera informal.

Answer 3

He leído que Google no promueve el concepto de usar una sangría de text-indent negativa en las etiquetas de anclaje - http://maileohye.com/html-text-indent-not-messing-up-your-rankings/ . Idealmente, debería usar etiquetas de título y atributos rel para informar a los motores de búsqueda sobre los enlaces.

Además, es posible que desee leer estos hilos:

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

• http://websitedesigningtips.com/5-tips-web-designers-developers-optimize-site-search-engines/ (el último punto)

Los mapas de sitio, los robots, las etiquetas de anclaje que usan etiquetas rel y title siempre que sea posible y la aplicación de etiquetas alt a sus imágenes deberían ayudar a mejorar el SEO.

Google también atraviesa contenido impulsado por AJAX ahora usando el operador shebang (#!), Así que quizás sea algo que quieras leer en - http://www.seomoz.org/blog/how-to-allow-google-to-crawl-ajax-content

Al usar HTML5 y JQuery, hay una serie de complementos que permiten marcadores y enlaces profundos de enlaces Ajax.

Espero que esto ayude.

Answer 4

No tengo idea de si Google tiene problemas (aunque el artículo que vinculó con enlaces a http://maileohye.com/html-text-indent-not-messing-up-your-rankings/ , por lo que tiene cierto peso), pero creo que la alternativa es usar una etiqueta <img> con un GIF transparente , y tu sprite como 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;
}

Las imágenes de fondo en las etiquetas <img> funcionan de manera confiable, incluso en IE 6.

Por supuesto, lo que Google está tratando de hacer es evitar la indexación de texto que no es visible, y el texto alt tampoco es visible. Pero tal vez evite el riesgo de que su página sea marcada como spam por un algoritmo de Google.

Y este método al menos da como resultado que se muestre el texto si el usuario deshabilita las imágenes en su navegador, text-indent no lo hace.

Answer 5

Una buena razón para no usar el método de -9999px es que el navegador tiene que dibujar un cuadro de 9999px para cada elemento al que se aplica. Obviamente, eso potencialmente crea un gran impacto en el rendimiento, especialmente si lo estás aplicando a múltiples elementos.

Los métodos alternativos incluyen este (de zeldman.com ):

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

... o alternativamente (desde here ):

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

(donde ''padding-top'' es la altura que desea que tenga el elemento).

Creo que el primer método es más limpio, ya que te permite configurar la altura de la manera normal, pero el segundo funciona mejor en IE7.