Así que sabe que los motores de búsqueda como Google, Yahoo y MSN buscan principalmente la contenido del texto de sus páginas para indexarlas y determinar su relevancia para las búsquedas. También sabe que usar etiquetas de encabezado como <h1> en su HTML es importante porque los motores de búsqueda valoran el contenido organizado y seccionado. Pero, ¿qué pasa si simplemente no quiere encabezados de sección de texto grandes y feos en su sitio? ¿No preferirías usar tu propio gráfico personalizado? Seguro que lo harías, pero no querrás saltarte tu <h1> por <img> y perder toda esa simpatía del motor de búsqueda. ¡No tienes que hacerlo!
Uno de los trucos más modernos en este momento es usar una clase para reemplazar el texto del encabezado con una imagen. Use sus etiquetas de encabezado como de costumbre, solo asígnele un nombre de clase único: <h1 class="headerReplacement">Section Header</h1> En su CSS, defina la clase como tal:
.headerReplacement {
text-indent: -9999px;
width: 600px;
height: 100px;
background: url(/path/to/your/image.jpg) #cccccc no-repeat;
}Esto debería colocar su nueva y agradable imagen personalizada justo donde estaba el viejo y feo encabezado de texto sin perder ni un ápice de legibilidad del motor de búsqueda. Esta técnica también permite que su página se degrade bien, para personas que usan lectores de pantalla o personas que navegan por la web con imágenes y/o CSS desactivados.