¿Como usar un h1 con una imagen?
En muchas ocasiones por razones de diseño no podemos, o no nos interesa, poner un titular (H1) de la página. Esto es un problema a la hora de posicionar bien nuestra página con ese título tan importante. Otra forma que he visto es ocultando el texto mediante css “display:none”, este no se cuanto le gustara a Google.
He visto varias formas para conseguir este resultado. El más fácil seria poner el titulo (H1) en alt y el title de la imagen. Pero esto no seria suficiente ya que el (H1) tiene más importancia que los alt o title de las imágenes. La solución es añadiendo texto entre las etiquetas (H1) y superponer la capa de la imagen por encima.
Veamos la [demo] y como podemos conseguirlo..
Ocultando con “display:none;”
Anieto2k
Desplazando el texto con “position:absolute”
20minutos
Desplazando el texto con “text-indent”
Meneame
WordPress
Digg
Utilizando el alt en la imagen
BBC
Reduciendo el tamaño de fuente al H1 < 0,1pt
AOL
Seo rank checker: 
cristina: 
holii: 
anthony: 
andreina:
Hola.
Otra manera sería colocando un span con el texto dentro de H1.
Con CSS ocultas el span y le das un image-background al H1 (hay que decirle el tamaño de H1, igual que el de la imágen)
Saludos!!!
Hola Alex, sería el mismo uso que utiliza Anieto2k. Como ya he dicho en el post, no se si le va a gustar a Google, ya que estas ocultando mediante CSS. Yo creo que es parecido a lo de poner color del texto igual al color de fondo. La demo que he puesto sigue la misma idea de lo que tiene implantado Google en su buscador.
Hola de nuevo, ¿Google puede penalizar por usar text-indent para ocultar el texto?, gracias!
Pues si que lo puede penalizar, pero si no es mal intencionado no hay problema. Solo puedes poner como texto lo que aparece en la imagen. Por ejemplo, si pones el logo de Google, puedes poner “google” como text-indent.
Estas penalizaciones no suelen ser automáticas, siempre son realizadas por el equipo “estanco” de calidad de Google.
Es bueno saberlo, por ejemplo normalmente pongo la descripción del sitio en el text-indent y la imagen es el logotipo de la empresa, así que me busco una penalización, gracias por la info Edgar!
[...] [...]