¿Es correcto usar imágenes dentro de etiquetas de encabezado?

Question

He hecho un poco de google sobre esto, pero no han sido capaces de obtener una respuesta directa.

En términos de SEO, ¿qué tan malo es usar imágenes para sus encabezados? La razón para hacer esto, por supuesto, sería poder mostrar fuentes no estándar. Sé que es malo para usar imágenes en lugar de las cabeceras, pero me pregunto si este tipo de sintaxis haría cualquier cosa para que sea más amigable para los buscadores:

<h1><img src="header.jpg" alt="Level 1 Header" /></h1>

¿Cuenta con el mismo efecto que esto ?:

<h1>Level 1 Header</h1>

sospecho que la respuesta a esto es no. Creo que a los motores de búsqueda probablemente no les gustaría porque podría poner cualquier texto en el atributo alt sin que realmente se muestre en la página. Entonces, en ese caso, ¿cuál es la mejor manera de usar imágenes para encabezados sin sacrificar el SEO?

Answer 1

Un viejo truco es poner el texto real en el cuadro <h1>, pero luego usa CSS para hacer que el texto sea invisible y poner tu imagen en segundo plano.

Así que haría algo como:

h1 { 
    color: transparent; 
    background-image: url(your/cool/image.png); 
    width:400px; height: 300px; 
} 

Astute Stackoverflow miembro de K Ivanov señala que probablemente sería mejor para hacer que el texto invisible al colocarla lejos de la página con el "texto-guión: - 5000px "o algo.

Answer 2

Otra posible solución al problema de las fuentes no estándar en los encabezados sería usar el Google Fonts API, suponiendo que las fuentes que tienen disponibles satisfagan sus necesidades.

También podría echar un vistazo a las hojas de estilo que generan e intentar generarlas usted mismo (suponiendo que lo necesite).

Answer 3

Es una práctica reconocida (ni buena ni mala) utilizar text-indent:-9999px; junto con overflow:hidden; para los títulos.

Esto desplaza el texto en una cantidad masiva y luego utiliza el desbordamiento para ocultarlo.

Eso significa que puede tener una gran descripción/título grande en su <header> y tener una imagen con la descripción/título de la forma que desee que aparezca, de esa manera usted obtiene lo mejor de ambos mundos.

Un ejemplo perfecto de esto es: http://www.sohtanaka.com/web-design-blog/

La sección "LatestWord" es una imagen, pero si nos fijamos en el CSS para la sección verá esta técnica empleada.