📖 Nota sobre la fuente: este artículo fue elaborado a partir de conceptos discutidos en la publicación Image SEO: 12 Actionable Tips, publicada originalmente por Ahrefs. El contenido aquí fue reescrito, ampliado y adaptado al contexto en español, con ejemplos, herramientas y referencias relevantes.
Mucha gente cree que el SEO de imágenes es solo poner una palabra clave en el atributo alt. En la práctica, existen al menos doce factores que influyen en cómo Google encuentra, entiende y posiciona las imágenes de tu sitio. Ignorar estos factores significa perder tráfico que podría conseguirse fácilmente — incluido el proveniente de Google Imágenes, que representa una parte significativa de las búsquedas globales.
El propio Google avanza en el reconocimiento de imágenes mediante aprendizaje automático. Pero eso no vuelve obsoleto el SEO de imágenes — al contrario, Google sigue usando todas las señales disponibles (nombre del archivo, alt text, contexto de la página, velocidad de carga) para interpretar y posicionar las imágenes con precisión.
1. Nombra los archivos de forma descriptiva
El nombre del archivo es una de las primeras señales que usa Google para entender el tema de una imagen. Las cámaras y los celulares generan nombres genéricos como IMG_0023.JPG o DSC_4817.jpg — que no comunican absolutamente nada al buscador.
El propio Google declara en sus directrices oficiales que el nombre del archivo es una pista sobre el contenido de la imagen. La recomendación es simple: usa palabras clave descriptivas, separadas por guiones, sin exagerar:
- Bueno:
pastel-de-chocolate.jpg - Malo:
IMG_2947.jpg - También malo:
pastel-chocolate-receta-postre-dulce.jpg(keyword stuffing)
Renombrar las imágenes antes de subirlas es un hábito simple que marca la diferencia — especialmente para e-commerces, blogs de cocina, portafolios y cualquier sitio que dependa del tráfico proveniente de la búsqueda de imágenes.
2. Escribe textos alternativos (alt text) útiles
El atributo alt describe una imagen para el navegador. Se muestra cuando la imagen no carga, lo leen los lectores de pantalla para personas con discapacidad visual y lo usa Google para comprender el contenido visual de la página.
La sintaxis es simple:
<img src="cachorro-dalmata.jpg" alt="Cachorro dálmata jugando en el parque">
Google usa el alt text junto con algoritmos de visión artificial y el contexto de la página para comprender el tema de la imagen. La orientación es crear descripciones útiles y ricas en información, usando palabras clave de forma contextual — nunca acumulando palabras sin sentido (keyword stuffing).
Un atajo que funciona bien: completa la frase "Esta es una foto de ___". El resultado del espacio en blanco, ligeramente ajustado, suele ser un buen alt text. Ejemplos:
- "Esta es una foto de un cheesecake de chocolate con salsa de fresa." →
alt="Cheesecake de chocolate con salsa de fresa" - "Esta es una foto de una laptop con la pantalla rota sobre una mesa." →
alt="Laptop con la pantalla rota sobre un escritorio"
Para imágenes de producto, incluir el número de modelo o el código SKU en el alt text puede ayudar a aparecer en búsquedas técnicas específicas. No olvides tampoco los pies de foto — Google extrae información sobre el tema de la imagen a partir del texto que la rodea, incluyendo los pies de foto visibles en la página.
3. Elige el formato de archivo correcto
La elección del formato impacta directamente en el tamaño del archivo — y, en consecuencia, en la velocidad de carga de la página. Los tres formatos más comunes en la web son JPG, PNG y WebP, cada uno con características distintas:
| Formato | Mejor para | Transparencia | Tamaño típico |
|---|---|---|---|
| JPG | Fotografías, imágenes con degradados | No | Pequeño a mediano |
| PNG | Logos, íconos, capturas con texto | Sí | Mediano a grande |
| WebP | Cualquier uso en la web moderna | Sí | 25–35% más pequeño que JPG/PNG |
| GIF | Animaciones simples | Parcial | Variable |
| SVG | Logos, íconos, ilustraciones vectoriales | Sí | Muy pequeño |
La regla general: usa JPG para fotografías, PNG para imágenes que necesitan fondo transparente y texto nítido, y WebP siempre que sea posible para la web — el formato ofrece una compresión superior con calidad equivalente. Usa el Conversor de Imagen de ImageTools para convertir entre formatos antes de subirlas.
4. Redimensiona las imágenes a las dimensiones reales de visualización
Subir una foto de 4000px de ancho para un sitio que muestra imágenes en 800px es un desperdicio de ancho de banda. El navegador descarga la imagen completa y luego descarta los píxeles sobrantes — el usuario espera más, sin ninguna ganancia visual.
Identifica el ancho máximo de visualización de las imágenes en tu diseño (normalmente entre 800px y 1440px, según el tipo de imagen y el sitio) y redimensiona antes de subirlas. Para cubrir pantallas Retina (HiDPI), usa el doble del ancho de visualización. Usa el Redimensionador de Imagen de ImageTools para ajustar las dimensiones con precisión.
Redimensiona y comprime tus imágenes ahora
Ajusta las dimensiones y reduce el peso de las imágenes de tu sitio gratis, sin enviar archivos a servidores externos.
5. Comprime las imágenes sin perder calidad visible
La compresión es el proceso de reducir el tamaño del archivo sin alterar las dimensiones de la imagen. Para fotos JPG, reducir la calidad de 100% a 80% puede disminuir el archivo de 5 a 10 veces con una diferencia imperceptible en pantalla.
La velocidad de carga es un factor de posicionamiento confirmado por Google — tanto en escritorio como en móvil. Las imágenes suelen ser el componente más pesado de una página web. Comprimir todas las imágenes antes de subirlas es la optimización de SEO técnico con mayor retorno por esfuerzo.
Metas prácticas de peso por tipo de imagen:
- Banner / hero a ancho completo: por debajo de 200 KB
- Foto de producto o imagen de blog: 60–150 KB
- Miniatura o thumbnail: 15–40 KB
- Logo en PNG/WebP: por debajo de 30 KB
Usa el Compresor de Imagen de ImageTools para reducir JPG, PNG y WebP directamente en el navegador — sin enviarlos a servidores externos.
6. Crea un sitemap de imágenes
El sitemap de imágenes informa a Google de la existencia de imágenes que quizás no descubra por sí solo — especialmente imágenes cargadas mediante JavaScript o incorporadas en galerías complejas. A diferencia del sitemap normal, el sitemap de imágenes puede incluir URLs de otros dominios (como CDNs).
Si tu sitio usa WordPress con el plugin Yoast SEO, las imágenes ya se añaden automáticamente al sitemap. Para sitios personalizados, el sitemap de imágenes se puede añadir manualmente siguiendo la documentación oficial de Google. Las principales etiquetas disponibles son image:loc (URL de la imagen), image:title e image:caption.
7. Usa datos estructurados para imágenes de productos
Google admite datos estructurados (Schema.org) para imágenes en varios contextos — recetas, productos, artículos, eventos. Cuando se implementan correctamente, estos datos permiten que las imágenes aparezcan en resultados enriquecidos (rich results) en Google, con un destaque visual adicional que aumenta la tasa de clics.
Para e-commerces, el marcado de producto con imagen es especialmente valioso: los productos con imagen marcada correctamente pueden aparecer en Google Shopping y en las fichas de producto del panel de conocimiento de Google.
8. Implementa lazy loading
El lazy loading es la técnica de cargar imágenes solo cuando están a punto de entrar en el área visible de la pantalla, en lugar de descargarlas todas de una vez en la carga inicial. En páginas con muchas imágenes (blogs largos, listados de productos), el lazy loading puede reducir el peso inicial de la página en un 60–80%.
La implementación más simple es nativa en HTML:
<img src="producto.webp" alt="Tenis azules" loading="lazy">
Importante: nunca apliques loading="lazy" a la imagen principal por encima del pliegue (la primera imagen visible sin desplazar la página). Esto retrasa el LCP — Largest Contentful Paint, una de las métricas Core Web Vitals — y perjudica directamente el posicionamiento.
9. Define width y height en todas las etiquetas de imagen
Cuando el navegador no sabe el tamaño de una imagen antes de cargarla, no reserva el espacio correcto en el diseño — y cuando la imagen carga, el contenido de la página "salta". Este fenómeno es lo que Google mide como CLS (Cumulative Layout Shift), otro Core Web Vital.
La solución es declarar siempre width y height en las etiquetas de imagen:
<img src="producto.webp" alt="Tenis azules" width="800" height="800" loading="lazy">
Los valores no necesitan corresponder al tamaño visual mostrado — solo definen la proporción para que el navegador reserve el espacio correcto antes de cargar la imagen.
10. Usa imágenes responsivas con srcset
El atributo srcset permite ofrecer diferentes versiones de una misma imagen para distintos tamaños de pantalla. El navegador elige automáticamente la versión más adecuada — sirviendo una imagen más pequeña para celulares y más grande para escritorio. En sitios con mucho tráfico móvil, esto puede reducir el volumen de datos transferidos en un 40–60%.
<img
src="produto-800.webp"
srcset="produto-400.webp 400w,
produto-800.webp 800w,
produto-1200.webp 1200w"
sizes="(max-width: 600px) 400px, 800px"
alt="Zapatillas azules"
width="800" height="800"
loading="lazy"
>11. Optimiza la imagen destacada para Open Graph y redes sociales
Cuando alguien comparte una URL en WhatsApp, Instagram, LinkedIn o cualquier otra plataforma, la imagen mostrada en la vista previa proviene de las meta tags Open Graph. Si estas etiquetas no están configuradas, la plataforma elige cualquier imagen de la página — a menudo con un resultado deficiente.
Configura siempre la etiqueta og:image con una imagen de 1200×630px en cada página importante de tu sitio:
<meta property="og:image" content="https://tusitio.com/imagenes/articulo-preview.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">Una imagen de vista previa bien construida — con título legible, identidad visual de la marca e imagen relevante — aumenta significativamente la tasa de clics en los compartidos.
12. Considera el contexto de toda la página
Google no evalúa las imágenes de forma aislada. Analiza el conjunto: el texto alrededor de la imagen, el título de la página, el contexto semántico, los demás elementos visuales, el pie de foto debajo de la imagen e incluso el texto de los enlaces que apuntan a la página. Una imagen de un zapato rojo en una página sobre moda femenina tiene un contexto completamente distinto al de la misma imagen en una página de cocina.
Buenas prácticas de contexto:
- Coloca las imágenes cerca del texto que las describe o al que hacen referencia
- Usa pies de foto visibles debajo de las imágenes siempre que sea posible
- Asegúrate de que el tema de la imagen sea relevante para el tema de la página
- Usa títulos de página y encabezados que refuercen el tema de las imágenes principales
🔍 Auditoría rápida: usa Google Search Console para verificar qué imágenes de tu sitio se están indexando. Ve a Índice → Páginas y filtra por "imágenes" para ver el estado de indexación y posibles problemas.
Checklist de SEO de imágenes
- ☑ Nombre de archivo descriptivo con palabras clave (con guiones, sin keyword stuffing)
- ☑ Atributo
altdescriptivo y contextual en todas las imágenes - ☑ Formato correcto para cada tipo: WebP o JPG para fotos, PNG/SVG para logos e íconos
- ☑ Dimensiones ajustadas al tamaño real de visualización (máx. 2× para Retina)
- ☑ Compresión aplicada — peso por debajo de las metas por tipo
- ☑
widthyheightdeclarados en todas las etiquetas<img> - ☑
loading="lazy"en imágenes por debajo del pliegue - ☑ Imagen LCP sin lazy loading, con
fetchpriority="high"si es posible - ☑ Sitemap de imágenes configurado (o verificado si el plugin ya lo hace)
- ☑ Meta etiqueta
og:imageconfigurada en todas las páginas principales - ☑ Datos estructurados para imágenes de producto donde corresponda
- ☑ Imágenes contextualizadas con texto, pies de foto y encabezados relevantes