Las imágenes son cada vez más importantes para el posicionamiento Web y, sin embargo, todavía hay muchas Webs que no las optimizan.
Dos datos importantes:
– Más del 5% de las búsquedas en Google son de imágenes
– Casi ninguna Web incluye la optimización de imágenes en su estrategia SEO
Teniendo en cuenta esto, existe un filón importante de tráfico que podrías atraer a tu Web poniéndote por delante de tu competencia.
¿Quieres saber cómo optimizar las imágenes de tu Web?
Sigue estos pasos:
SEO ON-PAGE
1. NOMBRE DEL ARCHIVO
Los nombres de archivo de las imágenes deberían tener significado, ya que los buscadores como Google pueden leerlos (y le dan cierta importancia) y además se muestran en el SERP bajo la vista previa de las imágenes, captando la atención de los usuarios.
Los siguientes nombres son incorrectos:
112354_principal.png
Metodo-01-2011-min.jpg
e8b6fb32-6a01-12b0-b46c-00055facb49c.jpeg
Los nombres de archivo de imágenes deberían contener toda la información relevante posible (como la dirección), sin hacer que sea excesivamente largo.
Ejemplo correcto:
hotel-buenavista-velazquez-24-madrid.png
2. ETIQUETAS ALT Y TITLE
La etiqueta ALT es obligatoria para pasar la validación W3C por motivos de accesibilidad para usuarios con deficiencias visuales. La etiqueta TITLE es optativa y sirve para mostrar un texto al pasar el ratón sobre la imagen.
Ejemplo:
<img src="hotel-buenavista-madrid.png" alt="Hotel Buenavista Madrid" title="Hotel en Madrid" >
Tanto el ALT como el TITLE son tenidos en cuenta por los buscadores de cara al SEO, por lo que deberíamos utilizar términos de búsqueda estratégicos para los cuales queramos posicionar las imágenes.
3. SITEMAPS
Google permite crear Sitemaps específicos para imágenes. Para cada imagen que aparece en el sitemap podemos determinar un título, descripción, geolocalización y tipo de licencia. Aquí puedes encontrar las directrices de Google para la creación de Sitemaps de imágenes.
4. ROBOTS.TXT
Hay algunas imágenes que no queremos que sean indexadas por Google, como por ejemplo los sprites, los iconos pequeños y los thumbnails (vistas previas). Si quieres que no se indexen, establece reglas de exclusión en el fichero robots.txt
Por ejemplo, podemos meter todos los sprites, iconos y thumbnails en carpetas específicas y bloquearlas así:
User-agent: *
Disallow: /sprites/
Disallow: /icons/
Disallow: /thumbnails/
RENDIMIENTO WEB
1. SUBDOMINIO SIN COOKIES
Aloja las imágenes en un subdominio sin Cookies. Las Cookies son pequeños ficheros que guardan información sobre el usuario y la Web en tu navegador.
Sin embargo, si se envían con cada imagen ralentizan la descarga de las mismas, y esto es especialmente visible cuando navegas con tu móvil.
Ejemplo: si tu Web está en www.ejemploweb.com aloja las imágenes en el subdominio img.ejemploweb.com
2. CDN (Content Display Network)
Para Webs con mucho tráfico o de ámbito internacional el uso de un CDN para servir imágenes es una buena opción.
3. Compresión
Las imágenes suelen ser los elementos más pesados de una Web y ralentizan notablemente el tiempo de carga. Puedes comprimir las imágenes hasta un 85% de calidad sin que se note en tu Web. En nuestra Guía de Rendimiento Web puedes encontrar algunas herramientas útiles para comprimir imágenes.
Adicionalmente, puedes activar la compresión GZIP de tu servidor modificando el archivo .htaccess tal y como detallamos en nuestra Guía de Rendimiento Web.
Una solución algo más complicada es la entrega dinámica de imágenes. Consiste en implementar un sistema que entregue imágenes al 85% de calidad (habitual) para usuarios de ordenador e imágenes al 60% para usuarios de SmartPhone. Google ya hace crawls de las Webs con distintos agentes de móvil para ver si los contenidos están optimizados para estos dispositivos, por lo que hacer esto mejorará los rankings para búsquedas desde móviles.
4. Cacheado
La manera más fácil para permitir el cacheado de imágenes (y otros contenidos estáticos) es mediante el archivo .htaccess añadiendo las siguientes líneas:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 600 seconds"
ExpiresByType image/x-icon "access plus 604800 seconds"
ExpiresByType image/jpg "access plus 604800 seconds"
ExpiresByType image/jpeg "access plus 604800 seconds"
ExpiresByType image/png "access plus 604800 seconds"
ExpiresByType image/gif "access plus 604800 seconds"
ExpiresByType application/x-shockwave-flash "access plus 604800 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</IfModule>
<IfModule mod_headers.c>
<FilesMatch "\\.(ico|jpeg|jpg|png|gif|swf|css|js)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
<FilesMatch "\\.(x?html?|php)$">
Header set Cache-Control "max-age=600, private, must-revalidate"
</FilesMatch>
</IfModule>