Usamos cookies para mejorar tu experiencia, analizar el tráfico del sitio y personalizar el contenido. Puedes aceptar todas las cookies o elegir qué categorías permitir. Más información
Mejores Prácticas de SEO de Imágenes y Texto Alternativo para Ecommerce (2026) | Ordiko
Guía
Mejores Prácticas de SEO de Imágenes y Texto Alternativo para Ecommerce (2026)
Cómo optimizar las imágenes de productos de ecommerce para SEO y accesibilidad: elección de formato de archivo, tamaños responsivos, patrones de texto alternativo, generación de IA, sitemaps.
PT1H
TL;DR. El SEO de imágenes es crucial para el comercio electrónico. La búsqueda de imágenes es una fuente de tráfico real (15–25% en moda/decoración). Asegúrate de cuatro cosas: formato moderno (AVIF), tamaños responsivos, texto alternativo preciso por localidad y un mapa del sitio de imágenes. La visión AI ahora hace que la generación masiva de texto alternativo sea trivial.
Por qué el SEO de imágenes es más importante para el comercio electrónico
Tráfico de búsqueda de imágenes por categoría (estimaciones de la industria 2025–2026):
Categoría
Participación de búsqueda de imágenes
Moda / Ropa
20–35%
Decoración del hogar
15–25%
Belleza
10–20%
Comida
10–15%
Electrónica
5–10%
B2B / Industrial
< 5%
Más allá de la búsqueda clásica de imágenes, Google Lens, Pinterest y la búsqueda de imágenes de compras utilizan las mismas imágenes y metadatos. Un fuerte SEO de imágenes se multiplica.
Preguntas frecuentes
¿El texto alternativo afecta directamente los rankings?
Indirectamente. El texto alternativo no clasifica páginas; clasifica imágenes en Google Búsqueda de Imágenes. Para ecommerce, eso es comercialmente relevante: la Búsqueda de Imágenes genera entre el 15% y el 25% del tráfico de búsqueda en algunas categorías (moda, decoración).
¿Es aceptable el texto alternativo generado por IA para Google?
Sí, si es preciso y útil. La guía de Google se basa en la calidad del contenido, no en la fuente de creación. El alt generado por IA está bien; el alt basura generado por IA no lo está. Siempre haz una revisión de muestreo de la salida de IA.
¿Cuál es la diferencia entre el texto alternativo y el atributo de título?
El alt es para lectores de pantalla y respaldo en caso de fallo de imagen (y SEO). El título es la herramienta de información al pasar el cursor. Usa siempre el alt; omite el título para imágenes de productos a menos que tengas una razón específica de UX.
¿Cómo maneja Ordiko la generación masiva de alt?
El panel de control de /seo/images de Ordiko lista cada imagen unida a su propietario de entidad y estado de alt por localidad. Selección masiva + 'Generar con IA' llama a gpt-4o-mini visión a través de una cola de Trigger.dev con estimación de costos. La bandera media.aiGeneratedAlt distingue la IA de lo manual.
Lecturas relacionadas
Paso 1: Formato de archivo
Formato
Compresión vs JPEG
Soporte de navegador (2026)
Caso de uso
AVIF
-40% a -50%
95%+ a nivel global
Nuevas imágenes, imágenes principales
WebP
-25% a -35%
99%+ a nivel global
Respaldo para Safari/IE más antiguos
JPEG
base
Universal
Respaldo final
PNG
base + sin pérdida
Universal
Transparencia, logotipos
SVG
vector
Universal
Iconos, logotipos, gráficos simples
El predeterminado para 2026: AVIF con respaldo de WebP. Next.js <Image> hace esto automáticamente.
<Image
src="/products/leather-bag.jpg" // la fuente es JPEG; Next convierte
width={800}
height={800}
alt="Bolso mensajero de cuero marrón, de grano completo, con herrajes de latón"
formats={['image/avif', 'image/webp']}
/>
Paso 2: Tamaños responsivos
Genera múltiples resoluciones y deja que el navegador elija. El par srcset + sizes:
<img
src="/products/leather-bag-800.avif"
srcset="
/products/leather-bag-400.avif 400w,
/products/leather-bag-800.avif 800w,
/products/leather-bag-1200.avif 1200w,
/products/leather-bag-1600.avif 1600w
"
sizes="(max-width: 768px) 100vw, 50vw"
alt="Bolso mensajero de cuero marrón, de grano completo, con herrajes de latón"
width="800"
height="800"
/>
Next.js <Image> maneja srcset + sizes automáticamente cuando proporcionas la propiedad sizes.
Paso 3: Texto alternativo
Reglas para el texto alternativo:
Describe lo que hay en la imagen, en contexto.
Omite "Imagen de..." (el alt es implícitamente una imagen).
Sé específico. "Bolso mensajero de cuero marrón, de grano completo, con herrajes de latón" es mejor que "bolso de cuero".
Coincide con el contexto de la página del producto. El alt de la primera imagen del producto debe centrarse en el atributo principal del producto.
Varía el alt entre las imágenes del producto (el alt de la imagen 1 ≠ el alt de la imagen 2).
≤ 125 caracteres típicamente (los lectores de pantalla cortan los más largos).
Traduce por localidad.
Patrones para el comercio electrónico:
Tipo de imagen
Patrón de alt
Imagen principal del producto
[Nombre del producto], [atributo principal (material/color/tamaño)]
Detalle del producto / primer plano
[Nombre del producto] — [detalle] (por ejemplo, costura, herrajes, etiqueta)
Estilo de vida / modelo
[Nombre del producto] usado por modelo en [entorno]
Variante (color/tamaño)
[Nombre del producto] en [variante]
Miniatura de galería
Igual que la imagen principal que representa
Decorativa
alt="" (alt vacío — explícitamente decorativa)
Logotipo de marca
[Nombre de la marca] o [Logotipo de la marca]
Imagen principal de la página de categoría
[Nombre de la categoría] colección
Malos patrones de alt:
❌ bag.jpg (nombre de archivo, no descripción)
❌ Imagen de un bolso (dice "imagen")
❌ ¡Compra ahora! ¡El mejor bolso de cuero! (promocional)
❌ bag bag bag leather brown (relleno de palabras clave)
❌ Alt vacío en una imagen significativa (fallo de accesibilidad)
Paso 4: Alt consciente de la localidad
Una tienda francesa necesita texto alternativo en francés. Un producto en inglés importado a la localidad francesa sin alt traducido tiene un alt que dice "Bolso mensajero de cuero marrón" en una página francesa — malo para los usuarios con lectores de pantalla en francés y malo para la búsqueda de imágenes en francés.
Es poco realista escribir manualmente texto alternativo para 10,000 imágenes de productos. La visión GPT-4o (o equivalente) genera texto alternativo preciso a partir de imágenes de productos por aproximadamente $0.001–0.005 por imagen.
Plantilla de solicitud:
Estás escribiendo texto alternativo para una imagen de producto de comercio electrónico. Describe el producto de manera clara y específica.
Contexto:
- Nombre del producto: "{product.name}"
- Categoría: "{product.category}"
- Marca: "{product.brand}"
- Localidad: "{locale}"
Imagen:
{image_url}
Restricciones:
- Máximo 125 caracteres.
- Describe el producto, color, material si es visible.
- Lenguaje apropiado para la localidad.
- Sin prefijo "Imagen de...".
- Sin lenguaje promocional.
Salida solo el texto alternativo. Sin explicación.
Ejemplo de costo: 10,000 imágenes × $0.002 cada una = $20.
Siempre revisa una muestra (10–20%) antes de publicar el alt generado por AI.
Biblioteca sharp en Node.js para procesamiento por lotes programático.
Next.js Image maneja esto automáticamente.
Paso 7: Mapa del sitio de imágenes
El mapa del sitio de imágenes indica a Google qué imágenes en tu sitio son imágenes de productos comerciales. Formato:
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>https://example.com/products/leather-bag</loc>
<image:image>
<image:loc>https://example.com/.../leather-bag-main.avif</image:loc>
<image:title>Bolso mensajero de cuero marrón</image:title>
<image:caption>Bolso mensajero de cuero de grano completo con herrajes de latón</image:caption>
<image:license>https://example.com/license</image:license>
</image:image>
<image:image>
<image:loc>https://example.com/.../leather-bag-detail.avif</image:loc>
<image:title>Bolso de cuero marrón — detalle de herrajes</image:title>
</image:image>
</url>
</urlset>
Envía el mapa del sitio de imágenes por separado en Google Search Console.
Cómo Ordiko maneja el SEO de imágenes
AVIF + respaldo de WebP a través de Next.js Image automáticamente.
Tamaños responsivos generados en el momento de la carga.
Texto alternativo por localidad en cada activo multimedia.
Generación masiva de texto alternativo AI en el panel de control /seo/images.
Mapa del sitio de imágenes en /sitemaps/images/route.ts.
<link rel="preload" as="image" fetchpriority="high"> en la imagen principal LCP por página.
FAQ
¿El texto alternativo afecta directamente las clasificaciones? Indirectamente. El texto alternativo no clasifica páginas; clasifica imágenes en Google Image Search. Para el comercio electrónico, eso es comercialmente relevante: la búsqueda de imágenes impulsa el 15–25% del tráfico de búsqueda en algunas categorías (moda, decoración).
¿Es aceptable el texto alternativo generado por AI para Google? Sí, si es preciso y útil. La guía de Google se basa en la calidad del contenido, no en la fuente de creación. El alt generado por AI está bien; el alt basura generado por AI no lo está. Siempre haz una revisión de muestreo de la salida de AI.
¿Cuál es la diferencia entre el texto alternativo y el atributo title? El alt es para lectores de pantalla y respaldo en caso de fallo de imagen (y SEO). El title es la herramienta emergente al pasar el cursor. Usa siempre el alt; omite el title para imágenes de productos a menos que tengas una razón específica de UX.
¿Cómo maneja Ordiko la generación masiva de alt? El panel de control /seo/images de Ordiko lista cada imagen unida a su propietario de entidad y estado de alt por localidad. Selección masiva + 'Generar con AI' llama a gpt-4o-mini vision a través de una cola de Trigger.dev con estimación de costos. La bandera media.aiGeneratedAlt distingue AI de manual.