Con este artículo atacaremos directamente la semántica para mejorar la gráfica de nuestro sitio. O sea, no la atacaremos, trabajaremos en conjunto con ella. Si, así queda mejor. La idea de esto, es (en este caso) reemplazar el tag H1 (pueden ser otros, tienes hasta el H6) que sería el título de nuestro sitio (eso es un H1, el título más importante. Así lo entiende Google) por una imagen más atractiva, que destaque más nuestro sitio y que no pierda la importancia o significado del H1. Además de eso, no dejaremos de lado el texto que sería la descripción del H1, así los buscadores sabrán:

1. Es un titulo importante.
2. El nombre de este título es el que está escrito ahi.

El punto es que el nombre del H1 estará escondido, y será reemplazado por la imagen más bonita que cada uno diseñará para su sitio. Comencemos:

El código HTML es muy simple y conocido por todos:

CSSLab – otro laboratorio de ideas, pero en español.

Y la imagen que utilizaremos para reemplazar ese texto es la siguiente:

Bien, lo que haremos serán principalmente 2 cosas: primero, le daremos ancho, alto y un background-image (con por supuesto nuestra composición) linkeando adonde esté nuestra imagen. Luego, esconderemos el texto que contiene H1, dándole text-indent de -9999px (text-indent mueve nuestro texto, en este caso negativo llevándolo más allá de nuestros márgenes) y luego escondiéndolo con overflow: hidden; (esto esconde cualquier elemento que no está suscrito dentro de nuestros márgenes, evitando un scrollbar horizontal gigante). Sigue el código CSS:

h1 {
background-image: url(header_csslab.gif);
background-repeat: no-repeat;
text-indent: -9999px;
width: 500px;
height: 130px;
overflow: hidden;
}

Ver ejemplo final

Bastante simple, no? Embellecemos nuestro sitio y aún así lo hacemos relevante para los buscadores.