Guía SEO para imágenes

Una imagen vale más que mil palabras, o eso dicen.

Y es cierto, una buena imagen, relevante para el texto que acompaña, ayuda y da más fuerza a ese contenido.

Digamos que procesamos más fácil toda esa información, sobre todo cuando el texto suele ser más complejo. Es una manera de reducir la carga cognitiva.

Lo malo es que muchas veces se convierten en las grandes olvidadas, al menos desde el punto de vista SEO.

Por eso hoy quiero compartir los aspectos que son un must cuando queremos que nuestras imágenes no solo ayuden visualmente, sino que también sean nuestras aliadas para optimizar la carga de las páginas en las que están incluidas.

Bautizando imágenes

Porque lo primero que tenemos que pensar es en poner un nombre correcto a nuestras imágenes.

Olvídate de guardarlas con algo como IMG240911 o DSC4285. ¿Tú sabrías decirme de qué va esa imagen solo leyendo el nombre del archivo?

Por tu salud, para que no te vuelvas loco o loca abriendo miles de archivos para encontrar la imagen que estás buscando, usa nombres de archivo que describan de forma clara y concisa lo que incluye esa imagen.

Y no solo lo hagas con imágenes, puedes aplicar esto mismo a los vídeos. Te hará la vida más fácil. Algo como: nino-gato-negro-panza-arriba.jpeg. Y usa guiones medios para separar las palabras.

Ventajas de usar el Texto alternativo o Alt Text

No se trata de un texto que va de guay, rollo alternativo. Se trata de un texto que describe la imagen que estás usando de una forma más completa que el nombre del archivo. Podríamos decir que es una descripción algo más detallada.

Y es muy importante que la uses. ¿Por qué?

• Accesibilidad para personas con discapacidades: los usuarios que usan lectores de pantalla dependen del alt text para entender el contenido de las imágenes. Incluir un texto alternativo bien escrito mejora la experiencia de navegación para estos usuarios, y los motores de búsqueda valoran una web que cuida la accesibilidad.
• Los motores de búsqueda no pueden "ver" imágenes: para saber de qué trata la imagen, añadimos esa etiqueta para ayudarles a indexarlas de forma correcta. Esto puede impactar de forma positiva en el tráfico desde Google Images.
• Aporta contexto semántico: si lo usas bien, estarás dándole más contexto al contenido de la página, ayudando así a los motores de búsqueda a entender mejor la temática.
• Lugar idóneo para usar palabras clave: inclúyelas de forma natural, aprovecha para usar palabras clave secundarias. Ojo siempre con el keyword stuffing, no saturemos.
• Es lo que se ve cuando las imágenes no se muestran: si algo pasa con tus imágenes, aparecerá este alt text que al menos dará algo más de información al usuario.

Título de la imagen

No lo confundamos con el nombre del archivo. En este caso es una etiqueta que solo se mostrará si el usuario posa el cursor del ratón sobre la imagen.

Si no la rellenas, no pasa nada a nivel SEO porque no es algo que te ayude a posicionar. En este caso lo que estamos haciendo es ayudar a enriquecer la experiencia de usuario.

Usa el formato más adecuado

Hay muchos tipos de formato para las imágenes, y cada uno es interesante para un determinado fin.

• WebP: formato de imagen de nueva generación. Es el tipo de formato más interesante si quieres que tus imágenes pesen poco ya que se comprimen mucho mejor que un JPEG o PNG. Obtenemos imágenes de buen tamaño en dimensiones pero con menor peso, sin perder calidad.
• JPEG o JPG: el típico formato al que estamos acostumbrados para imágenes con colores, detalles, que no necesitan transparencias.
• PNG: el formato ideal para imágenes con transparencias.
• SVG: si hablamos de gráficos vectoriales como logos o iconos, este es el formato ideal. Se pueden escalar y no pierden calidad.
• AVIF: uno de los formatos más recientes. Ofrece una compresión de alta calidad a un tamaño de archivo extremadamente reducido. Excelente opción para cualquier sitio web.

Compresión de imágenes y buen formato, la pareja perfecta

Además del formato, tenemos que cuidar mucho la compresión de las imágenes, es decir, nos toca reducir su tamaño intentando siempre no sacrificar demasiado la calidad de las mismas.

La herramienta online que uso en mi día a día es squoosh.app. Si no la conoces, te invito a que lo hagas. Fácil, intuitiva, con todos los formatos que necesites.

Hablemos de dimensiones

El tamaño sí importa. Y no lo confundamos con el peso.

Lo que estamos buscando es ofrecer la resolución más optimizada en las imágenes que subamos a la web, siempre intentando sacrificar el mínimo posible de calidad.

No hace falta subir imágenes enormes, por ejemplo, de 2000px de ancho, para que luego se muestren en un espacio de 400px. No tiene sentido impactar de forma tan negativa el tiempo de carga de la página.

Consejo nº 1: asegúrate de conocer el destino de cada imagen

Esto te ayudará para poder elegir las dimensiones más adecuadas: carrusel de imágenes en la galería de un producto, imagen de hero, imagen que acompaña a un texto, imagen de thumbnail. En cada caso necesitarás unas dimensiones especiales.

Consejo nº 2: asegúrate de que la imagen sea responsive

Es decir, cada imagen debe poder verse bien en la pantalla de cualquier dispositivo. En este caso, se recomienda usar la etiqueta srcset que permite que los navegadores muestren la imagen de acuerdo al tamaño de la pantalla del usuario.

<img src="imagen.jpg" srcset="imagen-400px.jpg 400w, imagen-800px.jpg 800w, imagen-1200px.jpg 1200w" sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px" alt="Descripción de la imagen">

Carga diferida de imágenes

En inglés te suena más seguro, el famoso lazy loading.

Si acabas de aterrizar en una página y hay varias imágenes, pero ninguna se ve hasta que haces scroll down, no es necesario que esos recursos se carguen de forma prioritaria.

De esta manera vamos a impactar de forma positiva en el tiempo de carga (fíjate en las métricas FCP y LCP) y en el uso de ancho de banda.

¿Cómo se implementa el lazy loading? Si usas WordPress, él mismo lo está haciendo ya solito. Si puedes acceder al código, añade el atributo loading=lazy dentro de la etiqueta de imagen:

<img src="imagen.jpg" alt="Descripción de la imagen" loading="lazy">

CDN para optimizar la velocidad de carga

Una CDN es una red de servidores distribuidos en diferentes ubicaciones geográficas que nos ayuda a poder servir los contenidos de nuestra web desde el servidor más cercano al usuario.

Gracias a la CDN disminuye el tiempo de latencia o lo que tarda en hacer el viaje la información que el usuario pide desde el servidor hasta su navegador.

No todos los proyectos pueden verse necesitados de implementar esta red de servidores. Si tienes un sitio web con un alto nivel de tráfico y además usuarios que se encuentran en diferentes regiones geográficas, en este caso sí sería necesario o vital implementar una CDN.

Sitemap de imágenes

Si en tu sitio web las imágenes juegan un papel importante, deberías crear un sitemap solo para este tipo de archivos.

Esto te permitirá ayudar a Google a indexarlas y mostrarlas en Google Images, pudiendo así atraer desde allí más tráfico hacia la web.

Y ahora es tu turno para transformar tus imágenes y mejorar el SEO

Hay muchos detalles, pero no es para tanto. La mejor manera de trabajar algo es acostumbrarse a hacerlo bien desde el principio.

Hazte la vida más fácil poniendo nombres descriptivos a tus recursos visuales, sé consciente de dónde van a mostrarse para cuidar dimensiones y pesos, y prioriza o no su carga, dependiendo de cuándo el usuario la vaya a necesitar.

Verás como poco a poco estas buenas prácticas te salen solas, y no tendrás ni que pensarlas.

Así que no lo dejes para mañana. Empieza hoy a optimizar tus imágenes, porque cada detalle cuenta, y a largo plazo, tu web (y tus métricas) te lo agradecerán.