¿Que es tu logo? ¿Un h1 o una imagen?

palabras / Facebook / Twitter / Enlace / Comentar

Desde que comencé en el desarrollo web siempre me había preguntado el cómo mostrar el logo. ¿Qué es bueno para el SEO? ¿Quién lo hace bien? ¿Quién lo hace mal? Todas estas dudas se aclararon un poco después de leer el artículo de csswizardry, a lo me dí cuenta que siempre ha existido un debate acerca del tema.

Sitios web como Meneame.net, aNieto2k, Wordpress, New York Times, Reddit, etc, lo hacen de forma diferente. En este artículo daré mi punto de vista acerca de cómo debe de mostrarse a base de mi experiencia y de lo que he visto en la www.

Existen varias malas prácticas de las cuales podemos aprender al plantearnos el cómo mostrar un logo en nuestra página web; sin embargo las prácticas más comunes de hacerlo son las siguientes:

La primera opción siempre es una imagen de manera inline:

<img src="logo.png alt="Mi página web" />

La segunda opción, es la que la mayoría de los sitios utiliza:

h1 {
  width: 300px;
  height: 50px;
  background: url('logo.png');
}

<a href="URL" title="Mi página web">
  <h1 class="logo"></h1>
</a>

O bien, como tercera opción (cuidado, pueden sangrar los ojos):

<a href="URL" title="Mi página web">
  <h1 class="logo">
    <img src="logo.png alt="Mi página web" />
  </h1>
</a>

Pero, si estamos hablamos de SEO, por obvias razones habrá que ver qué es lo que está haciendo el buscador más importante (por ahora): Google.

Google penaliza a sitios que abusan del tag <h1>, que abusan de las keywords y que no tienen un "órden" bien estructurado en sus tags. Es aceptado utilizar varias etiquetas <h1>, porque realmente a veces es necesario, pero no se abusa.

Entonces, a partir de esta conclusión, es correcto tanto darle el espacio merecido al logo, como al contenido. Wordpress por ejemplo, en todos sus temas por default utiliza al logo (texto <h1>) en todas sus páginas. ¿Suena bien? Sí, pero tendrás que tener cuidado al momento de escribir todo tu sitio; Verás, el abuso de utilizar el mismo <h1> en todas tus páginas no te traerá problemas con los buscadores, pero simplemente puede que se torne en una práctica estúpida, ya que lo que quieres no es que el nombre de tu página (pepitoescribe.com) sea el centro de atención, si no que tu artículo acerca de "Las semillas de girasol que encontré en mi jardín" sea lo que tenga fuerza al momento de atraer visitantes a través de los buscadores.

Ya una vez dentro de este debate de cómo o no utilizar el tag <h1>, surge a la vista la página web The H1 debate, sitio donde a partir de una encuesta se trata de ver qué es lo que la mayoría de las personas prefieren utilizar al momento de hacer uso del tag entre dos opciones: 1. Utilizarlo como logo, 2. Como título principal. Adivina quien va ganando.

Una de las técnicas más aceptadas para mostrar el logo sin ser considerado spam, como la misma W3C lo hace, es la del reemplazo de imagen dentro del h1 y funciona así:

.logo {
  width: 300px;
  height: 50px;
  letter-spacing: -9999px;
}

<h1 class="logo">
  <a href="URL" title="Mi página web" >
    <img src="logo.png" alt="Mi página web" />
  </a>
  <span>Mi página web</span>
</h1>

Otra opción, recomendada por Elias Sierra, es la que leemos acontinuación:

.logo {
  text-indent:-99999px;
  width: 300px;
  height: 50px;
  background: url(logo.png);
  display: block;
}

<h1>
  <a href="URL" class="logo">Mi página web</a>
</h1>

Aclaro que existe muchísimos métodos para lograr este efecto, pero, ¿Qué es lo que estamos haciendo? Estamos "cumpliendo la regla" de utilizar contenido válido dentro del tag <h1>, sin embargo, existe dentro de ella una imagen que corresponde a nuestro logo. El texto lo estamos "ocultando", repito, existen otras maneras, pero básicamente la técnica es la misma.

Entonces, podríamos decir que el tag <h1> puede utilizarse varias veces (recomiendo dos: Logo y título principal) sin ningún tipo de penalización, o bien, utilizarlo solo una vez para mejor posicionamiento en buscadores logrando una buena jerarquización de tu contenido.

La recomendación que hago por mi parte es: En tu index utiliza la técnica de reemplazo de imagen con <h1> y utiliza el tag h2, h3, etc, para titularizar demás contenido. Utiliza el tag <h1> como título principal de tu contenido en páginas individuales y el logo, muéstralo como una imagen inline.


Comentarios

Copyright © 2012-2013 AbarcaRodriguez.com