Cuando lees el título lo primero que te preguntas y ¿por qué deberia cambiar un texto por una imagen mejor inserto directamente una imagen?, viéndolo así parece más práctico pero si lo vemos desde la óptica de SEO (Optimizacion de nuestro sitio para buscadores) nos damos cuenta que es importante hacer nuestra página semánticamente correcta por ejemplo que nuestro logo no sea simplemente una imagen sino un H1 osea el titulo principal eso lo hace más «apetitoso» nuestro contenido para google.
Veamos algunas técnicas para lograr esto
Reemplazo clásico
Aqui lo que hacemos es agregar a nuestro titulo una etiqueta span que ocultaremos usando CSS, lo malo es que aunque el titulo es semanticamente correcta span no lo es.
1 2 3 4 5 6 7 8 | #header { width: 329px; height: 25px; background-image: url(sample-opaque.gif); } #header span { display: none; } |
Usando margen
En este método no hace falta agregar etiquetas HTML adicionales lo que hacemos es enviar nuestro texto muy lejos de tal forma que no sea visible. El problema es que si la imagen faltara no se marcará, bueno tampoco es tan grave de hecho en todos los casos ocurre eso.
1 2 3 4 5 6 7 8 9 10 11 |
Usando indentación
Este método es muy similar al anterior lo que hace es enviar nuestro texto lejos pero no usando un margen sino indentación, el problema es que según parece genera problemas en IE5 si es que aún alguien lo usa claro esta.
1 2 3 4 5 | #header { text-indent: -5000px; background: url(sample-opaque.gif); height: 25px; } |
Existen algunos otros métodos más pero la verdad son sólo ligeras variantes de los anteriores.
Hola
ya he visto trabajar esto al hacer ciertas busquedas,
Escribo una palabra y aparecen ciertas imagenes que te conducen al sitio de origen…
Ese es el proposito, estoy en lo correcto??
frio, frio el objetivo de reemplazar texto por imágenes es que personas con navegadores de texto o con defectos visuales puedan «leer» nuestro sitio igualmente los spiders tampoco «ven» las imágenes sólo leen texto. Para hacer lo que mencionas es importante siempre agregar ALT a nuestras imágenes.
Muchisimas gracias me ayudaste muchisimo con el diseño 2.0 de mi web 😉
Buenas ante todo me gusta el post yo hice uno parecido, pero el tema es el siguiente:
Como diseñador profesional os comento que lo mejor es poner un text-indent: -9999px;
Espero que os sirva de ayuda
Cualquiera de los métodos funciona y el buscador los ve porque los spiders navegan sin usar CSS o javascript. Asi que al deshabilitarlos tendremos una idea muy clara de que será indexado. El problema más bien radica en que ninguno de estos métodos es semánticamente correcto, no muestran tampoco algún error si falla la imagen y detalles asi.
HOla muchas gracias esto me ayudará mucho ya que recien estoy aprendiendo css.
saludos y suerte
Jofret
como hacer el cambio de texto a imagen en un menu de wordpress 3.+ ??? si lo sabes seria una ayuda increible