Una de las cuestiones más debatidas en blogs y foros es cómo tenemos que etiquetar un logotipo en HTML teniendo en cuenta el SEO. Lo que voy a contaros no es una ciencia exacta, y me estoy basando en la consulta de varios Blogs que considero de confianza así como los resultados de mi propia experiencia.

Primero debemos separar dos tipos de logotipos a marcar, el logotipo que es texto y el logotipo que es imagen. Lo segundo que debemos tener en cuenta es si el objetivo de la Web es hacer branding  o es mucho más importante el contenido.

Entonces se me ocurren 4 posibilidades:

1. Logotipo texto sin acción de branding.
2. Logotipo texto con acción de branding.
3. Logotipo imagen sin acción de branding.
4. Logotipo imagen con acción de branding.

1. Logotipo texto sin acción de branding

Bueno en este caso, parece sencillo y no hay mucha complicación.

<span id="logo">Mi logotipo</span>

¿Porque ponemos id=”logo”? Porque de esta forma los buscadores identifican que el contenido que marcamos con dicha id es un logotipo. Si no lo ponemos tampoco pasa nada pero el robot no lo tendrá tan fácil para identificarlo, y nuestra labor es hacerle la tarea más sencilla y conducirlo como debe ser. También podemos poner id=”logotipo”.

Si además queremos que sea un vínculo:

<span id=”logo”><a href="http://www.miweb.com" tittle=”Mi logotipo”>Mi logotipo</a></span>

o simplemente:

<a href=”http://www.miweb.com” id=”logo” title=”Ir a Mi Web”>Mi logotipo</a>

Prefiero esta última forma porque soy partidario de utilizar cuanto menos etiquetas para hacer lo mismo mejor.

Recomiendo además poner la ruta completa de la web en el atributo href de un logotipo, el buscador relaciona el enlace con el logotipo mucho mejor. Y además pondría una descripción en el title y no limitarnos a repetir el atributo alt.. En caso del Alt si recomiendo poner el nombre de nuestra marca o poner “Logotipo de Mi empresa”. La razón es porque si en Google Imágenes ponemos, logotipo mi empresa (que es lo que buscaría un usuario), será resultado de la búsqueda.

Debemos escribir para el usuario y no para Google.

2. Logotipo texto con acción de branding

En este caso debemos destacar nuestro logotipo.  Tenemos un par de posibilidades dependiendo del contenido.

<strong id=”logo”>Mi logotipo</strong>

<h1 id=”logo”>Mi logotipo</h1>

En caso de ser vínculo:

<strong id=”logo”><a href=”http://www.miweb.com” alt=”Mi logotipo”>Mi logotipo</a></strong>

<h1 id=”logo”><a href=”http://www.miweb.com” alt=”Logotipo de mi web”>Mi logotipo</a></h1>

Con la etiqueta strong estamos destacando el texto, strong no es bold o negrita. Hacemos uso de ella si el contenido que tenemos es mucho más relevante y hace uso de h1 y h2.

Pero en caso de que no sea así y decidimos hacer uso de los h2 a partes de la página que consideramos en un rango inferior entonces usamos la segunda forma y podemos poner nuestro logotipo en h1.

Yo recomiendo de todas formas, de que en caso de que estemos titulando nuestras páginas, pongamos el h1 en el título de la página. Podemos tener además varios h1, si lo estamos haciendo una jerarquía coherente. El tema es más complicado de lo que parece.

3. Logotipo imagen sin acción de branding

Bueno esto es más complejo y debemos tener en cuenta cómo leen los buscadores nuestra página web. Sin pensar mucho pondríamos:

<div id=”logo”><img src=”logo.png” alt=”Mi logotipo” /></div>

o en caso de ser vínculo:

<div id=”logo”><a href=”http://www.miweb.com” title=”Logotipo de mi web”><img src=”logo.png” alt=”Mi logotipo” /></a></div>

La forma es correcta.

El buscador leerá el atributo alt de la imagen y lo comparará con el atributo title de nuestro enlace, además le estamos diciendo que se encuentra en el contenedor de logotipo. Pero aquí debemos ser cuidadosos con el title que le ponemos porque hay varios hacks que se han intentado hacer, poniendo palabras clave o descripciones engañosas para posicionar mejor la web. Google aprende, por eso si la descripción no coincide con el contenido de la web o el atributo alt de la imagen la web puede ser penalizada.

¿Pero es la mejor forma? Pues parece ser que no,  google indexa bien imágenes pero no con la misma calidad que lo hace con un texto. Además, hay buscadores que no son tan listos y otros programas como analizadores SEO que no detectan el atributo alt de una imagen.

¿Qué alternativa existe?  Poner nuestro logotipo como texto en html y hacer uso de CSS.

HTML:

<div id=”logo”><a href=”http://www.miweb.com” title=”Logotipo de mi web”>Mi logotipo</a></div>

CSS:

#logo a {display: block; width: 150px(ancho de la imagen); height: 50px(alto de la imagen); text-indent: -9999px; background: url(logotipo.png);}

El resultado es un bloque de vínculo con el texto “Mi logotipo” desplazado 9999px a la izquierda, por lo tanto no se vería a no ser que tengas un monitor de 12000px o asi. Y como fondo tendremos el logotipo imagen.

El debate está en si el text-indent es un hack o no, pues Google nos dice que el contenido oculto es penalizado. Aclaramos esto, Google considera texto oculto a texto detrás de imágenes o en capas con los estilos de display: hidden o display: none de CSS. Pero aún así aunque hagamos esto no vamos a ser penalizados o al menos hay menos probabilidad. Lo que si es ilegal para Google y si puede ser penalizado es que el texto que ocultemos detrás de imágenes, o que intentemos ocultar al usuario no tenga nada que ver con el contenido de la web. Por ejemplo si en el alt de la imagen ponemos, logotipo de adiestramiento de perros, y en el title del vínculo ponemos Michael Jackson, entonces seremos sospechosos de hack.

4. Logotipo imagen con acción de branding

Poco más que decir, como el anterior pero teniendo en cuenta las etiquetas strong y h1. Siempre dependiendo del contenido total haremos uso de uno o de otro.

<h1 id=”logo”><img src=”logotipo.png” alt=”Mi logotipo” /></h1>

<strong id=”logo”><img src=”logotipo.png” alt=”Mi logotipo” /></strong>

Con vínculo:

<h1 id=”logo”><a href=”http://www.miweb.com” title=”Logotipo de mi web”><img src=”logotipo.png” alt=”Mi logotipo” /></a></h1>

<strong id=”logo”><a href=”http://www.miweb.com” title=”Logotipo de mi web”><img src=”logotipo.png” alt=”Mi logotipo” /></a></strong>

Yo recomiendo y suelo usar:

HTML:

<h1 id=”logo”><a href=”http://www.miweb.com” title=”Logotipo de mi web”>Mi logotipo</a></h1>

CSS:

#logo a {display: block; width: 150px(ancho de la imagen); height: 50px(alto de la imagen); text-indent: -9999px; background: url(logotipo.png);}

En definitiva, tenemos varias formas de maquetar un logotipo en HTML y que sea semánticamente correcto. Todo dependerá de nuestro propósito.