diegogaspar.com

“left: -9999px;” o “display: none;” como usar el h1 para el título

Posted by Diego Gaspar - 17/10/09 at 06:10:48 pm

Dentro de la etiqueta H1 debemos poner el título de nuestra página. Solo hay que usarlo una vez por página ya que Google considera que las palabras que hay dentro como keywords relevantes en las búsquedas de interntet, poner más de un H1 perjudicaría al contenido que hubiera dentro.

Pero hay veces que no quieres  tener un título  ya que no encaja con el diseño de nuestro site, pero no queremos que este título se pierda y sus keywords dejen de dar fuerza a la hora de hacer SEO.

Una opción es ocultar la capa con “display:none”, pero se supone que si ocultamos de esta manera,  los buscadores consideran el contenido que hay dento de esta capa de menor importancia  ya que se abusó en su momento de esta propiedad, asi que  en este caso no nos valdría de mucho la etiqueta H1 . Para esto es mejor utilizar un SPAN dentro de la etiqueta H1 y mediante CSS posicionar ese span a una distancia que ningún navegador lo apreciará.

Veamos un ejemplo. La web del Centro Terapéutico Gaztambide 17. Si miramos el código:

<h1><a href="/"><span>Centro terapéutico Gaztambide 17</span></a></h1>

La secuencia recomendable sería una capa con el logo, el titulo con una etiqueta H1 y luego el menu.

.skip {
position: absolute;
left: -9999px;
}

Si miramos las CSS vemos como el H1 tiene dentro un SPAN y este se posiciona muy a la derecha de modo que nigún navegador lo apreciará. Yo mejoraría esto un poco ya que las capas deben tener un nombre relacionado con el contenido, por supuesto en inglés. Utilizaría algo como “logo” o “title”

Search