Image SEO

La disciplina del SEO, la optimización de los contenidos web para motores de búsqueda, abarca muchos aspectos: SEO técnico, on page, off page, estructura del sitio, backlinks y mucho más.

Uno de los aspectos quizás más infravalorados es el tratamiento de las imágenes, el llamado image SEO.

Escoger imágenes adecuadas hace que los artículos sean más atractivos y fáciles de leer y añaden contexto tanto para los usuarios como para los motores de búsqueda, sin olvidar que la búsqueda de imágenes es cada vez más común y puede ser una puerta de entrada a visitas que no llegarían de otra manera.

Para mejorar el SEO del propio sitio, un webmaster debe seguir algunas buenas prácticas, también avaladas por Google, tal y como se indica en las directrices de imagen de Google Search Central.

Veamos esas prácticas una por una.

Utilizar un nombre de archivo descriptivo

El SEO relacionado con las imágenes comienza por el nombre de los archivos. El nombre de los archivos de imagen debe reflejar el contenido de la propia imagen. Debes asegurarte de que los nombres de las imágenes son precisos y descriptivos.

Si la imagen que acompaña al texto está relacionada con una de las palabras clave del artículo, debes incluir la palabra clave en el nombre de la imagen. Esto ayudará a los motores de búsqueda a encontrar tu sitio web cuando alguien busque algo relacionado con la imagen.

Por ejemplo, en un artículo sobre motos clásicas japonesas en el que hayas incluido una foto de una Kawasaki 900 Z1, nombra el archivo kawasaki-900-z1.jpg o moto-kawasaki-900-z1.jpg.

Traducir los nombres de los archivos de imagen

En el caso de sitios multilingües, todos los nombres de archivos de imágenes deben estar localizados, es decir, traducidos y adaptados al idioma de la página.

Por ejemplo, si tienes un archivo de imagen que representa un caballo saltando, deberías llamarlo cavallo-che-salta.jpg en la versión italiana del sitio, caballo-que-salta.jpg en la española y jumping-horse.jpg en la inglesa.

Por lo que sabemos, no existe ninguna herramienta para traducir cómodamente los nombres de los archivos de imagen de forma automática o manual. Por eso hemos desarrollado un programa, disponible en Github: sin ser demasiado originales, lo hemos llamado Qabiria’s Image File Translator.

Por el momento es una versión preliminar, escrita en Python y distribuida bajo la licencia GNU GPL v3.0: cualquiera puede utilizar, modificar y distribuir el código, siempre que mantenga la misma licencia.

El programa se ejecuta desde la línea de comandos y asume que Python 3 ya está instalado en el ordenador en el que se ejecuta. Funciona de la siguiente manera:

1. indicamos la lengua de origen;
2. indicamos el idioma al que deben traducirse los nombres de los archivos;
3. indicamos la carpeta raíz en la que se encuentran los archivos de imagen;
4. en ese momento, el programa duplica todos los archivos de imagen, traduciendo automáticamente sus nombres.

Elegir el formato de imagen correcto

Otro factor a tener en cuenta y que influye en el SEO es el formato de los archivos de imagen. Los formatos más comunes para las imágenes son:

• JPEG para imágenes rasterizadas/mapa de bits (fotografías);
• PNG para imágenes en las que se debe conservar la transparencia o con campos de color uniformes;
• SVG para logotipos o iconos.

Recientemente, se han introducido nuevos formatos, como WebP y AVIF, con los que se pueden obtener imágenes más pequeñas y de mayor calidad que JPEG y PNG.

La única desventaja de estos formatos es que no todos los navegadores los soportan. El porcentaje de usuarios que utilizan navegadores sin soporte para WebP es inferior al 5%, como puede verse en CanIuse.com, mientras que para el formato AVIF ese porcentaje sigue siendo superior al 30%.

Si decides no utilizar WebP, debes elegir el formato más adecuado para cada tipo de imagen y, sobre todo, optimizarlas.

Optimizar las imágenes para aumentar la velocidad

Emplear imágenes más grandes de lo necesario tiene un impacto negativo en la velocidad de carga de la página.

Recuerda cambiar el tamaño de las imágenes según su uso: si necesitas una imagen pequeña, de 200 x 200 pixeles por ejemplo, no tiene sentido subir una imagen más grande y luego redimensionarla mediante lenguaje CSS. Sube la imagen de 200 x 200 pixeles directamente.

Para reducir el tiempo de carga de la página, todas las imágenes deben comprimirse, es decir, debemos reducir su peso. Existen diversas herramientas para optimizar las imágenes: sitios web (como TinyPNG), plugins para los CMS más comunes (Smush per WordPress), servicios en la nube que realizan la optimización en un pispás (come Kraken.io) e incluso programas de escritorio (como ImageOptim). Todas estas herramientas comprimen una imagen manteniendo la máxima calidad posible.

Usar imágenes que se adapten al dispositivo del usuario

Todos los expertos en SEO recomiendan crear diferentes versiones de una misma imagen y servirse de la más adecuada en función del dispositivo y, por tanto, de la resolución de pantalla del usuario.

Es contraproducente mostrar una imagen grande en pantallas más pequeñas, ya que desperdicia el ancho de banda y ralentiza la carga de la página. El problema lo sufren especialmente los usuarios de dispositivos móviles.

La solución es utilizar imágenes adaptables (responsive) mediante el atributo srcset del lenguaje HTML. Para más información: “Responsive images” en MDN Web Docs.

No incorporar texto en las imágenes

Todas las directrices de desarrollo de sitios web insisten en no crear imágenes que contengan texto. Este hábito, legado de una determinada forma de formatear los sitios web en boga durante el siglo pasado, no solo impide que los motores de búsqueda detecten automáticamente el texto, sino que los usuarios que utilizan lectores de pantalla reconozcan esas partes del texto.

Cuidado con el texto en las imágenes en los siguientes casos:

• imágenes utilizadas como títulos;
• diagramas;
• infografías;
• capturas de pantalla de los programas.

Si no puedes convertir previamente el texto de la imagen con un sistema de reconocimiento óptico de caracteres (OCR) y separar así el texto de los gráficos, deberías al menos poner el texto en la parte inferior de la imagen.

Añadir el atributo alt

El atributo alt de una iagen (a veces llamado “etiqueta alt”, aunque no es una etiqueta, sino un atributo de la etiqueta img) permite añadir una descripción textual a las imágenes. Esto es especialmente importante tanto para la accesibilidad como para el SEO.

El atributo alt es utilizado por los lectores de pantalla y cualquier herramienta que «lea» automáticamente una página web. Proporcionar una descripción precisa de la imagen favorece la indexación y ayuda a quienes no pueden ver las imágenes por una u otra razón (discapacidad, uso de navegadores o dispositivos obsoletos, visualización de imágenes deshabilitada, etc.)

Utilizar un mapa del sitio para las imágenes

Además del mapa del sitio, que indica qué páginas componen un sitio web, también es posible tener un mapa del sitio de imágenes, que enumera todas las imágenes. Tener un mapa del sitio para las imágenes aumenta la probabilidad de que las imágenes se encuentren en las búsquedas de imágenes de Google.

Al mismo tiempo, le indica a Google qué imágenes debe indexar, incluyendo aquellas que no pueden ser alcanzadas por el bot, por ejemplo, imágenes incrustadas en código Javascript o similares.

Utilizar una estructura de archivos adecuada

Google también sugiere crear una estructura de URL adecuada para los archivos de imagen. Significa que la forma de estructurar y almacenar las imágenes en el sitio debe ser lógica, por ejemplo, mediante creación de una jerarquía de categorías y, una vez más, utilizando nombres descriptivos.

Cuando hablamos de SEO, “todo cuenta”. No hay una sola acción que tenga un impacto sustancial en la clasificación de un sitio, sino que es la suma de muchas pequeñas acciones la que produce -a largo plazo- resultados. Prestar atención a las imágenes es una de esas acciones.

Para mejorar el posicionamiento de tu sitio, sigue las directrices indicadas y, si tienes un sitio en varios idiomas, utiliza el programa que proporcionamos gratuitamente para traducir los nombres de los archivos de imágenes.