SEO de imágenes y texto alternativo: optimiza todo el flujo de trabajo

Ejemplo ilustrativo: una página de cafeteras utiliza una imagen grande como fondo CSS, con un nombre de archivo poco útil y sin descripción cercana del modelo. Revise la entrega de imágenes, las alternativas accesibles y el contexto; robots.txt por sí solo no diagnostica estos problemas.

El SEO de imágenes no consiste en colocar palabras clave en un campo alt después de la publicación. Es una cadena de decisiones que abarca la selección, el nombre, el tamaño de exportación, el texto cercano, la incrustación en HTML, la entrega por CDN, los metadatos y los sitemaps. Una buena cadena mejora el descubrimiento de las imágenes y protege la velocidad de la página y la accesibilidad.

Google entiende las imágenes a través de varias señales

El texto alternativo importa, pero no funciona solo. Los sistemas de búsqueda pueden tener en cuenta:

• El contenido y los encabezados de la página de destino.
• Los párrafos, los pies de foto y los títulos cercanos.
• El nombre de archivo y la URL de la imagen.
• El atributo alt.
• Los datos estructurados y los metadatos de Open Graph.
• Los enlaces a la imagen o a la página de destino.
• La visión por ordenador aplicada al archivo.

Una imagen de una «cafetera X200 en la barra de una cafetería» pertenece a una página que hable de verdad de la X200, junto a un texto sobre su diseño o su uso. Colocarla en una galería sin contexto y escribir un atributo alt largo no crea la misma claridad.

Usa elementos HTML que los rastreadores puedan descubrir

Google Search Central recomienda incrustar las imágenes de contenido con un elemento <img> y una URL en src. Los fondos CSS son útiles para la decoración, pero no son el método correcto para una imagen que se pretende encontrar en Google Imágenes.

Un ejemplo básico:

<img
  src="/images/x200-black-coffee-machine.webp"
  alt="Black X200 coffee machine beside a burr grinder"
  width="1200"
  height="800"
>

Las implementaciones responsive pueden usar srcset, sizes o <picture>, conservando un img src válido como elemento central. Inspecciona tanto el código fuente como el HTML renderizado para asegurarte de que la URL no se introduce solo después de una interacción que es poco probable que realicen los rastreadores.

La decoración pura puede quedarse en CSS. No hay razón para enviar a un image sitemap cada textura, icono de fondo y separador solo porque sean archivos gráficos.

Redacta el texto alternativo según la finalidad de la imagen

El texto alternativo ayuda a quien no puede ver una imagen a entender la información o la función que aporta. Una sola fórmula no puede cubrir todos los tipos.

Imágenes informativas

Describe lo necesario para entender la sección circundante:

alt="Chart showing organic clicks rising from 1,200 to 1,850 in three months"

Cuando el párrafo adyacente ya indica todos los valores, el texto alternativo puede ser más corto para evitar que un usuario de lector de pantalla oiga los mismos datos dos veces.

Imágenes de producto

Nombra el producto y una vista o variación útil:

alt="Side view of blue AirFlow running shoe with white rubber sole"

No repitas «comprar zapatillas de running originales baratas» en cada fotografía. Las tomas frontal, trasera, de la suela y del detalle del material necesitan descripciones distintas porque aportan información distinta.

Imágenes funcionales

Cuando una imagen es un botón o un enlace, describe la acción o el destino:

<a href="/cart">
  <img src="/icons/cart.svg" alt="Open shopping cart">
</a>

Imágenes decorativas

Usa alt="" para que la tecnología de apoyo pueda omitirlas:

<img src="/decor/divider.png" alt="">

La ausencia del atributo alt y un alt vacío intencionado no son idénticos para la accesibilidad. El valor vacío dice claramente que la imagen no aporta información.

Imágenes que contienen texto

Siempre que sea posible, pon las palabras importantes en HTML real. El texto dentro de una imagen es difícil de redimensionar, traducir, hacer accesible y actualizar. Los logotipos son una excepción conocida; su alt suele identificar a la organización o la función del enlace cuando el logotipo vuelve a la página de inicio.

Textos alternativos que parecen optimizados pero fallan

Los problemas habituales incluyen:

• Enumerar palabras clave y ubicaciones que no aparecen en la imagen.
• Dar la misma descripción a todas las tomas de producto.
• Empezar todo con «imagen de» cuando el contexto es evidente.
• Escribir un párrafo de 200 palabras en lugar de usar un pie de foto y el texto del cuerpo.
• Copiar automáticamente en el alt un nombre de archivo sin limpiar.
• Dejar que un modelo de visión identifique objetos sin tener en cuenta el papel de la imagen en el artículo.

Un modelo puede reconocer «una persona junto a una pizarra», pero un editor sabe si ilustra un flujo de auditoría o presenta a un ponente de una conferencia. Un alt útil combina la información visible con la finalidad contextual.

Nombres de archivo y estructura de URL

x200-black-coffee-machine.webp da una pista ligera y es más fácil de gestionar que DSC00991.webp. Las reglas prácticas son:

1. Mantén los nombres cortos pero distinguibles.
2. Usa una descripción veraz en lugar de una lista de palabras clave.
3. Separa las palabras de forma coherente con guiones.
4. Conserva la extensión que coincida con el formato.
5. No cambies las URL de las imágenes en cada despliegue cuando el contenido no cambia.

Con miles de recursos, deriva los nombres del ID de producto, la variante y el ángulo de la cámara: x200-black-front.webp, x200-black-side.webp. Una regla coherente ayuda a los equipos de DAM, CDN y contenido a evitar duplicados.

Cuando las imágenes localizadas contienen texto traducido o información específica de un mercado, pueden tener sentido los nombres de archivo localizados. Cuando una misma imagen neutra en cuanto al idioma se comparte entre locales, una única URL estable mejora la caché; el alt y los pies de foto pueden traducirse igualmente en cada página.

Selecciona con criterio el formato y la compresión

Ningún formato gana en todos los casos de uso:

• JPEG: muy compatible y eficaz para fotografías, sin una transparencia alfa útil.
• PNG: adecuado para la transparencia y los detalles nítidos, a menudo pesado para la fotografía.
• WebP: eficiente para muchos tipos de imagen y ampliamente compatible con los navegadores modernos.
• AVIF: puede producir archivos más pequeños con una calidad visual comparable, con el tiempo de codificación y el flujo de fallback a tener en cuenta.
• SVG: ideal para logotipos, iconos y gráficos vectoriales; sanéalo cuando aceptes subidas de usuarios.

Exporta cerca de las dimensiones reales de visualización. Un original de 5.000 píxeles es innecesario para un hueco de 600 píxeles. Aun así, ofrece una variante de mayor densidad para las pantallas nítidas. Genera varios tamaños en la canalización de medios en lugar de pedir a los navegadores que descarguen el original y lo reduzcan.

La compresión no debería difuminar los bordes del producto, el texto ni los detalles que necesita un comprador. Inspecciona visualmente muestras en varias pantallas en lugar de aprobar solo un porcentaje de ahorro.

Las imágenes responsive reducen más que el tamaño del archivo

srcset permite al navegador seleccionar un recurso según el viewport y la densidad de píxeles:

<img
  src="/images/audit-dashboard-800.webp"
  srcset="/images/audit-dashboard-480.webp 480w,
          /images/audit-dashboard-800.webp 800w,
          /images/audit-dashboard-1280.webp 1280w"
  sizes="(max-width: 720px) 100vw, 720px"
  alt="Dashboard listing SEO issues by priority"
  width="1280"
  height="800"
>

Un valor incorrecto de sizes puede hacer que los navegadores elijan un archivo innecesariamente grande. Inspecciona el panel Network en móvil y en escritorio para ver qué recurso se carga realmente en lugar de comprobar solo que existe srcset.

Usa una URL estable para cada variante de contenido. Las versiones en la query que cambian constantemente pueden debilitar la caché y crear muchas direcciones de imagen en los logs.

Width, height y CLS

width y height permiten al navegador calcular la proporción antes de la descarga. El CSS puede mantener la imagen responsive:

img {
  max-width: 100%;
  height: auto;
}

Sin un espacio reservado, el contenido inferior se desplaza cuando llega el archivo, lo que contribuye al Cumulative Layout Shift. En los contenedores recortados, define un aspect-ratio estable y un object-fit adecuado.

La guía de optimización de Core Web Vitals explica cómo afectan las imágenes hero al LCP y las dimensiones inestables al CLS.

Aplica el lazy loading en los lugares adecuados

El lazy loading nativo puede retrasar las imágenes situadas por debajo del viewport:

<img src="/images/step-8.webp" alt="..." loading="lazy">

La imagen hero o probable LCP no debería retrasarse sin cuidado. Deja que los navegadores descubran pronto los recursos críticos, plantéate fetchpriority="high" en los casos adecuados y no ocultes la URL detrás de JavaScript.

Una política práctica:

• Carga inmediata para la imagen principal que probablemente sea el LCP.
• Lazy load para las galerías y los medios situados mucho más abajo.
• No añadas un script pesado solo para aplicar lazy load a todo.
• Reserva la proporción correcta del marcador de posición.
• Prueba en redes lentas y en dispositivos reales.

Usa el Page Speed Checker para medir el LCP, el CLS y los bytes de imagen transferidos tras cambiar la canalización de medios.

Pies de foto y texto circundante

No todas las imágenes necesitan un pie de foto. Añade uno cuando el lector necesite una fuente, un resultado, una fecha, una persona, una condición o un detalle concreto en el que fijarse. El pie de un gráfico puede indicar el rango de los datos; una comparación de antes y después debería nombrar sus condiciones.

Coloca una imagen cerca del debate relevante. Una infografía de un flujo de seis pasos situada a tres pantallas de su encabezado tiene un contexto débil e interrumpe la lectura.

Cuando una imagen contiene datos importantes, resume la conclusión en HTML. Ni la accesibilidad ni el SEO deberían depender por completo de los píxeles.

Imágenes destacadas, Open Graph y datos estructurados

Las miniaturas en la búsqueda y al compartir en redes sociales se seleccionan automáticamente a partir de varias señales. Un sitio puede expresar una preferencia con:

• og:image.
• La propiedad image en Article, Product u otro tipo de schema adecuado.
• primaryImageOfPage.
• Una imagen destacada prominente en el contenido.

Elige un recurso relevante, de alta resolución y sin una proporción extrema. Evita usar un logotipo genérico en todos los artículos o ilustraciones con mucho texto cuyas palabras pequeñas desaparecen en una miniatura. Usa el Social Preview Checker para inspeccionar la presentación en redes sociales.

Todas las URL de imágenes en los datos estructurados deben ser accesibles. Si una CDN bloquea a los rastreadores, exige una cookie o emite URL que caducan, un marcado válido no puede hacer que el archivo se pueda recuperar.

Cuándo ayuda un image sitemap

Un image sitemap es útil cuando los medios importantes son difíciles de descubrir en el HTML ordinario, los carga una aplicación compleja o forman una parte principal del valor del sitio. Pueden añadirse entradas de imagen a los sitemaps de páginas existentes sin crear un sistema completamente separado.

Un image sitemap no repara:

• Los recursos bloqueados.
• Las respuestas de error.
• Las imágenes sin relación con sus páginas de destino.
• Los archivos diminutos o de mala calidad.
• Una página de destino con noindex.

Cuando las imágenes están en el dominio de otra CDN, verifica ese dominio en Search Console para que puedan notificarse los problemas de rastreo. Usa URL absolutas y estables con el protocolo correcto.

CDN, caché y control de acceso

Una CDN reduce la latencia pero puede crear problemas de búsqueda cuando:

• La protección contra hotlinking bloquea a Googlebot o las solicitudes sin referer.
• Las URL firmadas caducan en minutos.
• Cada redimensionado genera una dirección inestable.
• Las respuestas llevan un tipo MIME incorrecto.
• La caché devuelve 404 después de que el origen ya tenga el archivo.
• El robots.txt de la CDN bloquea los directorios de imágenes.

Prueba sin cookies y, si es posible, desde varios user agents y regiones. Revisa los logs de la CDN para confirmar que los rastreadores reciben 200, un tipo de contenido exacto y el tamaño en bytes esperado.

No renombres toda una biblioteca de imágenes solo para pasar de JPEG a WebP sin considerar las consecuencias. La negociación de contenido o una actualización controlada con redirecciones y cambios de sitemap pueden funcionar, pero ten en cuenta las cachés, los backlinks de imágenes y el nuevo rastreo.

Audita las imágenes por plantilla

Toma muestras de la página de inicio, los artículos, las categorías, los productos, las landing pages y las plantillas localizadas. Para cada una, pregúntate:

1. ¿Las imágenes de contenido están en img src o en fondos CSS?
2. ¿Existe el texto alternativo, se ajusta a la finalidad y varía como corresponde?
3. ¿Los nombres de archivo son descriptivos y las URL estables?
4. ¿Width y height reservan espacio?
5. ¿Qué imagen es el LCP y se retrasa?
6. ¿Cuántos bytes de imagen se cargan en el móvil?
7. ¿Los pies de foto y el texto cercano dan contexto?
8. ¿Las URL de las imágenes devuelven 200 con el tipo MIME correcto?
9. ¿La imagen destacada está representada en OG y en el schema?
10. ¿Las imágenes estratégicamente importantes están incluidas en los sitemaps?

Después prioriza por escala. Un componente de tarjeta sin alt en 20.000 productos requiere una corrección de plantilla. Diez imágenes de blog mal nombradas pueden editarse una a una.

El SEO Checker revisa los atributos básicos de la página, mientras que una auditoría SEO gratuita ayuda a encontrar defectos repetidos antes de cambiar un componente compartido.

Un flujo de traspaso entre equipos

Un SEO de imágenes duradero necesita responsabilidades claras:

• Fotografía/diseño: entregar originales limpios, recortes adecuados y derechos de uso.
• Contenido: elegir los recursos y redactar el texto alternativo y los pies de foto contextuales.
• Frontend: implementar las imágenes HTML, las fuentes responsive, las dimensiones y la carga.
• Backend/DAM: nombrar los archivos, generar variantes, conservar metadatos y mantener URL estables.
• DevOps/CDN: gestionar la caché, los tipos MIME, el acceso de rastreo y la monitorización de errores.
• SEO: definir las landing pages estratégicas, las reglas de sitemap, las pruebas y la medición.

Si el texto alternativo lo añade al final alguien que no sabe dónde aparece un recurso, la coherencia se resiente. Un CMS debería admitir un alt por uso, porque el mismo archivo puede necesitar una descripción distinta en otro contexto.

Mide el resultado

Haz el seguimiento antes y después por grupo de páginas:

• Clics e impresiones en Search Console con el tipo de búsqueda Imagen.
• Entradas a las landing pages desde Google Imágenes.
• LCP, CLS y tamaño total de transferencia de imágenes.
• Porcentaje de imágenes sin alt o que devuelven errores.
• Cobertura de rastreo de las imágenes estratégicas.
• Conversiones de las sesiones que empiezan en la búsqueda de imágenes.

No esperes que editar un alt hoy cambie el tráfico mañana. Las imágenes deben volver a rastrearse y procesarse. Los resultados también dependen de lo visual que sea la consulta; un artículo jurídico puede recibir menos tráfico de imágenes que una receta a pesar de una implementación impecable.

Conclusión

Un SEO de imágenes eficaz empieza con un recurso útil colocado en una página relevante y entregado mediante HTML rastreable. El texto alternativo explica el papel de la imagen; los nombres de archivo, los pies de foto, los metadatos y los sitemaps añaden contexto; el tamaño responsive, la compresión y la carga protegen una experiencia rápida y estable.

No conviertas el alt en un contenedor de palabras clave, no envíes originales enormes a pantallas pequeñas ni ocultes la imagen de contenido principal como un fondo CSS. Cuando los equipos de contenido, frontend y CDN comparten un único flujo de trabajo, las imágenes pueden ser descubribles sin sacrificar la accesibilidad ni los Core Web Vitals.

Referencias: mejores prácticas de SEO de imágenes de Google Search Central, orientaciones sobre imágenes responsive en web.dev y tutoriales de accesibilidad de imágenes del W3C.