Cómo optimizar imágenes para los buscadores

El tema de las imágenes optimizadas para buscadores es un tema realmente sencillo y solo requiere conocer tres atributos básicos dentro de un IMG o tag de imagen.

Las entradas a mi sitio desde el servicio de imágenes de google representan el 20% al 30% de mis visitas. No puedo decir que tanto influye en los resultados provenientes de buscadores de textos (Google, Yahoo, Live, etc), pero sin duda, te generan muchas visitas y nos permiten aumentar el número de palabras claves de nuestros artículos sin caer en SPAM.

Es necesario establecer el perfil de las imágenes, esto es; qué sentido desempeña en tu página en términos de contenido, apoyo al contenido o como parte del diseño de tu plantilla web.

A partir de la orientación de la imagen sabremos si es o no conveniente optimizarla para su búsqueda en los motores o excluirla como un recurso que no tiene otra función que el diseño.

La optimización de una web es un tema relacionado con motores de búsqueda, la usabilidad y la accesibilidad del sitio.

Empecemos pues:

Para saber como optimizar debemos tener en cuenta que función tiene cada imagen en nuestra Web, en una Web existen tres clases de imágenes y en función de las mismas podemos o no optimizarlas:

1. Las que pertenecen a la plantilla o diseño de nuestra Web.
2. Las que complementan los artículos o información de nuestro sitio.
3. Las que tienen una función distinta a complementar, o sea que sirven como vínculos internos o externos.

La sintaxis de una imagen optimizada en código estaría estructurada de esta forma:

<img src="http://misitio/titulo.jgp" title="descripción no esencial" alt="texto alternativo, obligatorio" />

Esto es:

1. Atributo TITLE.
2. Atributo ALT.
3. Nombre de la imagen.

1.-El atributo TITLE

El atributo TITLE no es un atributo con una función específica, se le podría definir como Tool tip, su característica es que al usarse en una imagen muestre un pequeño recuadro con la información de la imagen, por ejemplo: Mantenga el puntero del ratón sobre el osito hasta que aparezca el mensaje.
Se agrega dentro de la etiqueta IMG como title="descripción", si no queremos poner ninguna descripción (ni en ALT), no es necesario agregar este atributo vacío.

Si damos clic derecho en Firefox sobre la imagen y luego en propiedades en Título de la imagen aparecerá:
TITLE puede tener un máximo de 30 palabras. y no menos de 3, salvo que se tratase de menúes de navegación.

2.-El atributo ALT.
Se mostrará cuando una imagen no sea encontrada o para ayudar a la accesibilidad para personas discapacitadas. Según el estándar HTML es un atributo obligatorio, si no ponemos ningún contenido por lo general se agrega alt="" esto es igual a vacío.

En el caso de Internet Explorer, actuará como si se tratase de Title, para evitar que aparezca la descripción de ALT en Internet Explorer deberán incluir title="" vacío, ver ejemplo (Use internet Explorer)
En Firefox en propiedades de la imagen aparece en Texto alternativo.El texto alternativo no debe ser muy extenso, en los casos con title definido, debe ser una descripción concisa y sintetizada de la imagen.

3.-Título de la Imagen
Por último el nombre de la imagen deberá estar estructurado de la siguiente forma:

palabra1-palabra2-palabra3

o bien:

palabra1_palabra2_palabra3

En vez de usar espacios vacios es mejor usar guión bajo (_) o guión medio (-)

Ejemplo: para el oso de peluche, que es una imagen en formato jpg ponemos:

soy_un_osito_de_peluche.jpg

*Nunca usar comas o puntuación, ni mayúsculas, ni acentos, no juntar las palabras en los nombres de los archivos de imagen.

Robots.txt para excluir las imágenes del diseño.

Se recomienda bloquear a los buscadores la carpeta que contenga las imágenes del diseño de nuestro sitio, mediante el archivo robots.txt, por ejemplo, si nuestra carpeta con imágenes de plantilla se llamara imgplantilla entonces en robots.txt agregamos:

User-agent: *
Disallow: /imgplantilla

Evitando así que sean indexadas.

Si tiene un Sitemap

Una vez hecho esto les recomiendo que participen en el programa de Google: Búsqueda mejorada de imágenes (en Herramientas para Webmaster), que se encuentra al acceder al panel de configuración de su sitio (Dando clic en el nombre del mismo) y en el apartado de Herramientas pulse en Búsqueda mejorada de imágenes.

Marque la casilla: Me gustaría habilitar la búsqueda mejorada de imágenes en mi sitio... y pulse en Aceptar.

Esto le permitirá que Google etiquete sus imágenes mejorando la indexación de su contenido en general [Ver nota de Google].

Imágenes optimizadas que forman parte de la navegación.

Por lo general cualquier imagen que forme parte del diseño de nuestra web o plantilla, no debiera tener un nombre muy descriptivo de lo que hace, existen dos excepciones:

1.-La cabecera de nuestra web, si esta es una imagen:
La cabecera de nuestra Web debe tener una descripción ALT de nuestro sitio y el nombre de la imagen deberá ser igual al nombre del sitio, ejemplo; si mi cabecera fuera un archivo en formato PNG:

<img src="http://cgnauta.blogspot.com/cgnauta-blog.png" title="" alt="Sitio web de CGnauta blog, diseño web al alcance de todos" />

2.-Menú a base de imágenes:

Es recomendable poner ALT y TITLE si nuestras imágenes operan como vínculos donde no hay un texto que describa el vínculo. (Podemos usar el atributo TITLE dentro de la tag de los vínculos).

Ejemplo:

<a href="siguientepagina.htm" title="Siguiente página"> <img src="http://cgnauta.blogspot.com/siguiente-pagina.png" title="Siguiente página" alt="Vinculo a la sección B" /> </a>

He repetido el atributo TITLE en los enlaces, no hace ninguna diferencia el ponerlo.

Por último

Ya por último debemos tomar en cuenta estas recomendaciones:

• No abuse de las palabras clave incluidas en ALT y TITLE deben usarse de cara al usuario, no al buscador.
• Nunca ponga el mismo contenido en el atributo ALT y TITLE.
• Tampoco abuse de las palabras en el nombre del archivo, máximo 6
• Internet Explorer mostrará el contenido de ALT como TITLE si no esta presente esta última, si desea que no aparezca ninguna descripción ponga title="" además de la ALT.
• No se preocupe mucho del robo de banda ancha (Hotlink), generalmente vendrá de Google y Google images, o de Feeds que usted sube completos a otros sitios, en vez de bloquear sus imágenes intente bloquear los sitios que chupen tráfico si tiene una web de paga, si es gratuito entonces ¿de qué se preocupa?
• Como se explicó además de las imágenes los vínculos se pueden optimizar.
  
• Si la imagen no apareciera y está envuelta en A HREF el texto alternativo se mostrará como un vínculo de texto.

Este Artículo forma parte de ¿Cómo iniciar un blog?: Análisis »

Este artículo continua en Optimizar vínculos y posteriormente concluiremos en optimizar textos y títulos.