SEO de imagen

Las imágenes son responsables del 40–60% de los bytes descargados de una página de contenido típica, aparecen en Google Image Search, en los resultados enriquecidos de la SERP, en las vistas previas OG y en respuestas de motores de IA con elementos visuales. También son uno de los elementos on-page más consistentemente subutilizados. La razón es aburrida pero solucionable: el SEO de imagen es trabajo mecánico que es fácil de saltarse durante un lanzamiento ocupado y casi nunca se limpia retroactivamente. La buena noticia es que las reglas son simples y la mayor parte del trabajo se puede dejar en plantilla.

“La mayoría de los problemas de SEO de imagen en un sitio no son malas decisiones, son decisiones que faltan. Definir un default para nombre de archivo, formato, alt text y comportamiento de carga resuelve el 90% de los problemas de forma automática.”

Las cinco áreas del SEO de imagen

1. Nombre de archivo. Descriptivo, alineado a la keyword, en kebab-case.
2. Formato. WebP en la mayoría de los casos, AVIF cuando el ancho de banda es crítico, JPEG/PNG solo para navegadores antiguos.
3. Peso de archivo. Imágenes hero por debajo de 200 KB, imágenes de contenido por debajo de 100 KB, miniaturas por debajo de 30 KB.
4. Alt text. Descripción real del contenido de la imagen, con la regla heroAlt = H1 para imágenes hero.
5. Comportamiento de carga. Carga diferida debajo del pliegue, carga inmediata arriba del pliegue, reserva dimensiones para prevenir el desplazamiento de diseño.

Nombres de archivo: la señal más barata que ignoras

IMG_4529.jpg es el default. También es una señal de ranking desperdiciada. La búsqueda de imágenes y los motores de IA leen el nombre de archivo como uno de los indicadores más fuertes de qué muestra la imagen. Renombra a:

• Descriptivo del contenido de la imagen.
• Kebab-case, minúsculas, sin espacios.
• Que contenga la keyword principal de la página cuando la imagen es el hero o un activo clave en línea.
• Libre de sufijos generados (-1, -final-final-v3) cuando se pueda.

Ejemplos: etiquetas-de-titulo-hero.webp, jerarquia-de-headers-prueba-outline.webp, enlaces-internos-hub-and-spoke.webp. El nombre de archivo no necesita ser una oración completa; 3–5 palabras es el punto ideal.

Elección de formato: WebP, AVIF, JPEG, PNG

El default en 2026 es WebP. Recurre a AVIF cuando el LCP sea tu cuello de botella y la CDN maneje el respaldo. Recurre a SVG para cualquier logo o ícono. Recurre a JPEG/PNG solo cuando tengas una razón específica.

Presupuestos de peso de archivo

El peso de archivo afecta el Largest Contentful Paint (LCP), el Core Web Vital más vigilado. Los presupuestos aproximados:

• Hero images: por debajo de 200 KB, idealmente por debajo de 150 KB.
• Imágenes de contenido en línea: por debajo de 100 KB.
• Miniaturas: por debajo de 30 KB.
• Logos e íconos: por debajo de 10 KB (SVG suele lograrlo de forma trivial).

Los presupuestos no son reglas; son puntos de control. Un hero de 350 KB está bien si aterriza en 1.5 s en móvil por caché de borde de la CDN; un hero de 50 KB está mal si aterriza en 4 s por un DNS mal configurado. Mide el LCP primero, después optimiza las imágenes que contribuyen.

Alt text: la regla heroAlt = H1 y más allá

El alt text sirve a tres audiencias: usuarios de lectores de pantalla, rastreadores de motores de búsqueda y motores de IA que leen imágenes. La regla por defecto:

Para imágenes hero: el alt text equivale al H1 de la página palabra por palabra. El hero es la imagen que ancla el tema de la página; su alt refuerza de qué trata la página. Si el H1 es “Etiquetas de título”, el alt del hero es “Etiquetas de título”. Los acentos del H1 pueden escribirse en ASCII sin acento dentro del alt sin penalización (no es violación).

Para imágenes de contenido en línea: describe lo que la imagen muestra de verdad. “Diagrama del patrón hub-and-spoke de enlaces internos”, no “Imagen de enlaces internos”. El alt debe ser el pie de foto que le darías a un oyente de podcast que no ve la imagen.

Para imágenes decorativas: alt text vacío (alt=""), no faltante. Vacío le dice al lector de pantalla que se salte la imagen; faltante hace que lea el nombre de archivo, lo que rara vez sirve.

Anti-patrones de alt text

• Saturado de keywords. “etiquetas de título SEO mejores etiquetas de título 2026 guía” es spam, lo ignora Google y rompe a los lectores de pantalla.
• Idéntico en muchas imágenes. 20 imágenes en línea con alt “gráfica” no pasan información.
• Empezar con “Imagen de...” o “Foto de...”. Los lectores de pantalla ya anuncian la imagen; el prefijo es redundante.
• Pura descripción para gráficas e infografías con datos. Si la imagen transmite datos, el alt debe resumir el dato, no describir el estilo visual.
• Auto-generado por el CMS. El auto-alt casi siempre está mal: descripciones malas o el nombre de archivo palabra por palabra.

Carga diferida y prevención de CLS

Dos atributos de desempeño que afectan el SEO directo:

• Carga diferida: loading="lazy" en imágenes debajo del pliegue. El navegador difiere la carga hasta que el usuario se desplaza cerca. Ahorra ancho de banda, mejora LCP del contenido arriba del pliegue. No difieras la carga del hero: el elemento LCP debe cargarse de inmediato.
• Atributos width y height: Configurar width y height en cada imagen le permite al navegador reservar el espacio del diseño antes de que cargue la imagen. Sin ellos, el contenido salta cuando la imagen llega y dispara penalizaciones de Cumulative Layout Shift (CLS).

Los dos son mecánicos de implementar. Los frameworks modernos los configuran automáticamente cuando usas el componente de imagen del framework (next/image en Next.js, astro:assets en Astro). Las etiquetas <img> hechas a mano son donde estos atributos se olvidan.

Imágenes responsive con srcset

Un hero de 1600 px cargado en un teléfono de 360 px desperdicia ancho de banda y desacelera el LCP. La solución es srcset:

<img src="hero-1600.webp" srcset="hero-360.webp 360w, hero-768.webp 768w, hero-1200.webp 1200w, hero-1600.webp 1600w" sizes="100vw" alt="Etiquetas de título">

El navegador elige el tamaño correcto según el ancho del viewport y la densidad de píxeles. La mayoría de los frameworks generan las variantes de forma automática; si lo haces a mano, construye las variantes una vez al subir, no en cada solicitud.

Schema de imagen (ImageObject)

Para imágenes que son centrales al tema de una página — fotos de producto, imágenes de gráfica, fotos de receta, imágenes hero en artículos insignia — los datos estructurados con ImageObject pueden producir vistas previas más ricas en la SERP. No agregues schema ImageObject a cada imagen del sitio; es ruidoso y diluye la señal. Resérvalo para:

• Imágenes de producto (ya cubiertas por Product schema).
• Fotos de receta (cubiertas por Recipe schema).
• Imágenes hero de artículo (cubiertas por la propiedad image del schema Article).
• Infografías independientes donde la imagen es el contenido principal.

Para la mayoría de las páginas, la imagen la referencia el schema padre (Article, Product, Recipe) y un ImageObject separado es innecesario.

Cómo leen los motores de IA las imágenes de forma directa

Los motores de IA modernos (ChatGPT, Gemini, Claude) incluyen modelos de visión que leen el contenido de la imagen de forma directa. Es un cambio significativo respecto a hace pocos años, cuando el alt text y el nombre de archivo eran las únicas señales de imagen que los motores de IA podían usar. Ahora:

• Las gráficas se analizan visualmente. Una gráfica de barras con etiquetas de eje y valores la lee el modelo de visión, y los puntos de dato se extraen al entendimiento que el motor tiene de la página.
• Las capturas de pantalla se transcriben. El texto dentro de una captura de pantalla — etiquetas de interfaz, código, mensajes de error — se lee y se agrega al contenido de la página desde el punto de vista de la IA.
• Los diagramas se interpretan semánticamente. Un diagrama de flujo de un proceso lo describe el modelo de visión en lenguaje natural, no solo lo etiqueta con el alt text.
• Las imágenes hero contribuyen señal de tema. Una imagen hero que muestra de qué trata el artículo refuerza el tema para el motor de IA antes de leer el cuerpo.

Implicaciones:

• No pongas información crítica solo en texto de imagen. Repítela en el cuerpo para que sea inequívoca.
• Las gráficas e infografías se ganan su lugar más que antes: los datos dentro ya son parte del entendimiento de la IA.
• Una imagen hero limpia y enfocada en el tema es una pequeña pero real señal que los motores de IA pesan en la recuperación.

Errores comunes de SEO de imagen

• Nombres de archivo IMG_XXXX en producción. El default que nadie renombra.
• JPEG/PNG cuando WebP serviría. 25–35% de penalización de tamaño sin beneficio.
• Atributo alt faltante. Rompe lectores de pantalla; se lee el nombre de archivo.
• Carga diferida del hero. Hunde LCP porque el elemento LCP espera para cargar.
• Sin atributos width/height. Causa desplazamiento de diseño, daña el CLS.
• Cargar la imagen de escritorio en móvil. Desperdicia ancho de banda, desacelera LCP. Usa srcset.
• Alojar imágenes en otro dominio sin CDN. Agrega una resolución de DNS, desacelera todo.
• Alt text idéntico en todo un artículo. No pasa información; tanto los motores de IA como los lectores de pantalla lo penalizan.

El veredicto

El SEO de imagen es mecánico, repetitivo y las reglas no cambian mucho año tras año. Usa nombres de archivo descriptivos en kebab-case que coincidan con la keyword de la página. Lanza WebP por default y AVIF cuando el ancho de banda importe más. Mantén las imágenes hero por debajo de 200 KB. Escribe alt text que describa la imagen a alguien que no la ve, con la regla heroAlt = H1 para el hero de la página. Configura width y height. Carga diferida debajo del pliegue. Usa srcset para el tamaño responsive. Los motores de IA ahora leen el contenido de la imagen de forma directa, lo que sube el valor de las gráficas y de un hero claro y baja el costo de hacer bien lo básico. Hazlo bien.