Guía detallada

Alt Text Seo Optimization Guide

22 de marzo de 20266 min de lectura

Ver contenido

Guía de Optimización de Texto Alt para SEO: Escribiendo Descripciones que Posicionan

Introducción

La optimización de texto alt se encuentra en la intersección del SEO, la accesibilidad y la experiencia de usuario. Bien ejecutada, genera tráfico de búsqueda de imágenes, mejora las señales de relevancia de la página y hace tu sitio accesible para todos. Mal ejecutada—o no ejecutada—estás dejando tráfico significativo sobre la mesa.

Esta guía cubre estrategias avanzadas de texto alt: técnicas de escritura para diferentes tipos de imágenes, optimización de e-commerce, manejo de imágenes complejas, soluciones automatizadas y medición del impacto SEO de tus mejoras de texto alt.

El Marco de Decisión de Texto Alt

Antes de escribir texto alt, determina qué tipo de imagen estás manejando. El W3C proporciona un árbol de decisión que hemos adaptado para propósitos de SEO:

¿Es la imagen puramente decorativa?
├─ SÍ → Usa alt=""
└─ NO → ¿Contiene texto?
         ├─ SÍ → Incluye ese texto en alt
         └─ NO → ¿Es una imagen funcional (enlace/botón)?
                  ├─ SÍ → Describe la función, no la imagen
                  └─ NO → ¿Es informacional?
                           ├─ SÍ → Describe la información transmitida
                           └─ NO → ¿Es compleja (gráfico/diagrama)?
                                    ├─ SÍ → Alt breve + descripción detallada
                                    └─ NO → Describe el contenido de la imagen

Escribiendo Texto Alt por Categoría de Imagen

Imágenes de Productos (E-commerce)

Las imágenes de productos son activos SEO de alto valor. Tu texto alt debe incluir:

Nombre del producto y marca
Características distintivas clave
Color/tamaño/variante si es visible
Material o especificación clave (cuando sea relevante)

Progresión de ejemplo de básico a optimizado:

<!-- Nivel 1: Básico (insuficiente) -->
<img alt="zapatos">

<!-- Nivel 2: Mejor (incluye tipo de producto) -->
<img alt="zapatillas de running">

<!-- Nivel 3: Bueno (incluye marca y tipo) -->
<img alt="Zapatillas de running Nike Air Max">

<!-- Nivel 4: Excelente (optimización completa) -->
<img alt="Zapatillas de running Nike Air Max 270 para hombre en combinación negro y blanco">

Plantilla de Texto Alt para E-commerce:

[Marca] [Nombre del Producto] [Tipo] [Característica Clave] [Color/Tamaño]

Imágenes Informacionales (Gráficos, Tablas, Infografías)

Para imágenes que transmiten datos, tu texto alt necesita resumir la conclusión clave:

<!-- Gráfico mostrando crecimiento de ventas -->
<img
  src="grafico-ventas.png"
  alt="Gráfico de líneas mostrando ventas de la empresa aumentando de $1M en 2020 a $5M en 2024, con crecimiento del 400%"
>

<!-- Diagrama de proceso -->
<img
  src="flujo-checkout.png"
  alt="Proceso de checkout en 4 pasos: Carrito → Envío → Pago → Confirmación"
>

Para imágenes complejas, usa tanto texto alt como una descripción detallada:

<figure>
  <img
    src="analisis-mercado.png"
    alt="Comparación de cuota de mercado mostrando Empresa A liderando con 45%"
    aria-describedby="detalle-mercado"
  >
  <figcaption id="detalle-mercado">
    Desglose detallado: Empresa A (45%), Empresa B (30%), Empresa C (15%), Otros (10%).
    Datos recolectados Q3 2024 entre 5,000 encuestados en Norteamérica.
  </figcaption>
</figure>

Capturas de Pantalla e Imágenes de UI

Para capturas de pantalla de software, describe lo que el usuario vería y aprendería:

<!-- Bueno: Describe la información visible -->
<img
  src="panel-analytics.png"
  alt="Panel de Google Analytics mostrando 50,000 visitantes mensuales con 65% tráfico móvil"
>

<!-- Mejor: Incluye contexto para el lector -->
<img
  src="panel-configuracion.png"
  alt="Panel de configuración de WordPress con pestaña SEO seleccionada mostrando campo de meta descripción"
>

Imágenes Editoriales y de Blog

Las imágenes de blog deben apoyar el tema del contenido e incluir keywords relevantes naturalmente:

<!-- Post de blog de viajes sobre París -->
<img
  src="torre-eiffel.jpg"
  alt="Torre Eiffel iluminada al atardecer con cielo rosa y naranja sobre París"
>

<!-- Post de blog de recetas -->
<img
  src="pastel-chocolate.jpg"
  alt="Pastel de tres capas de ganache de chocolate con frambuesas frescas en soporte de pastel blanco"
>

Imágenes Enlazadas

Cuando una imagen es el único contenido dentro de un enlace, el texto alt debe describir el destino del enlace, no la imagen:

<!-- Enlace de imagen a página de producto -->
<a href="/productos/laptop">
  <img src="laptop.jpg" alt="Ver detalles del producto MacBook Pro">
</a>

<!-- Enlace de logo a página de inicio -->
<a href="/">
  <img src="logo.png" alt="Ir a página de inicio">
</a>

<!-- Ícono de redes sociales -->
<a href="https://twitter.com/empresa">
  <img src="icono-twitter.svg" alt="Síguenos en Twitter">
</a>

Estrategias de Optimización de Keywords

Encontrando Keywords para Imágenes

Usa estos métodos para identificar keywords para tus imágenes:

Sugerencias de búsqueda de Google Imágenes - Escribe tu producto/tema y nota las sugerencias de autocompletado
Keywords del paquete de imágenes - Busca tus keywords objetivo y ve qué imágenes aparecen
Análisis de competidores - Revisa el texto alt en imágenes de competidores
Búsqueda de Pinterest - Búsqueda altamente visual con buenos datos de keywords

Mejores Prácticas de Colocación de Keywords

Orden de Prioridad para Keywords en Texto Alt:
┌────────────────────────────────────────────────────────┐
│ 1. Keyword principal cerca del inicio                  │
│ 2. Modificadores descriptivos (color, tamaño, marca)   │
│ 3. Keyword secundaria si es natural                    │
│ 4. Acción o contexto cuando sea relevante              │
└────────────────────────────────────────────────────────┘

Ejemplo de texto alt optimizado para keywords:

Keyword principal: “escritorio de pie”

<!-- Keyword cerca del inicio, descripción natural -->
<img alt="Escritorio de pie con altura ajustable en acabado nogal, mostrado en posición de sentado">

Evitando el Amontonamiento de Keywords

Google advierte explícitamente contra el amontonamiento de keywords en texto alt. Señales de sobre-optimización:

Misma keyword repetida múltiples veces
Lista de keywords sin estructura de oración natural
Texto alt que se lee de manera no natural
Mismo texto alt en múltiples imágenes

<!-- ❌ Amontonamiento de keywords - perjudicará el SEO -->
<img alt="escritorio de pie escritorio ajustable sit stand desk mejor escritorio de pie escritorio oficina">

<!-- ✅ Texto alt natural, rico en keywords -->
<img alt="Escritorio ajustable de pie elevado a altura de trabajo con laptop y monitor">

Manejando Casos Especiales

Imágenes con Texto Superpuesto

Cuando las imágenes contienen texto, ese texto debe estar en el atributo alt:

<img
  src="banner-oferta.jpg"
  alt="Oferta de Verano: 50% de descuento en todos los muebles de exterior hasta el 31 de agosto"
>

Imágenes Decorativas

Las imágenes que no agregan información deben tener texto alt vacío:

<!-- Divisor decorativo -->
<img src="divisor.svg" alt="">

<!-- Patrón de fondo -->
<img src="textura.jpg" alt="" role="presentation">

Usa role="presentation" como señal adicional para lectores de pantalla.

Galerías de Imágenes

En galerías, cada imagen necesita texto alt único y descriptivo:

<div class="galeria-producto">
  <img src="zapato-frente.jpg" alt="Nike Air Max 270 vista frontal mostrando parte superior de malla">
  <img src="zapato-lado.jpg" alt="Nike Air Max 270 perfil lateral mostrando unidad Air">
  <img src="zapato-suela.jpg" alt="Nike Air Max 270 suela mostrando patrón de tracción">
  <img src="zapato-detalle.jpg" alt="Nike Air Max 270 primer plano de amortiguación del talón">
</div>

Imágenes Hero e Imágenes de Fondo

Las imágenes hero son frecuentemente tu elemento LCP—haz que el texto alt cuente:

<!-- Imagen hero con fuerte valor SEO -->
<img
  src="hero-consultoria.jpg"
  alt="Equipo de investigación UX realizando sesión de pruebas de usabilidad con participante"
  class="imagen-hero"
>

Para imágenes de fondo CSS que transmiten información, usa ARIA:

<div
  class="fondo-hero"
  role="img"
  aria-label="Equipo de desarrolladores colaborando en espacio de oficina moderno"
  style="background-image: url('equipo.jpg')"
>
</div>

Soluciones Automatizadas de Texto Alt

Texto Alt Generado por IA

Varias herramientas pueden generar texto alt automáticamente:

Herramienta	Mejor Para	Precisión
Azure Computer Vision	Descripciones técnicas	Alta
Google Cloud Vision	Detección de objetos	Alta
Cloudinary AI	Imágenes de productos e-commerce	Media-Alta
Plugins de WordPress	Imágenes de blog	Media

Importante: El texto alt generado por IA debe ser revisado. Frecuentemente:

Pierde contexto y propósito
Usa descripciones genéricas
No incluye keywords
Puede ser inexacto para contenido especializado

Implementando Texto Alt de IA con Revisión

// Ejemplo de flujo de trabajo: generación IA + revisión humana
async function generarTextoAlt(urlImagen) {
  const descripcionIA = await visionAPI.describe(urlImagen);

  return {
    generado: descripcionIA,
    estado: 'necesita_revision',
    sugerencias: extraerKeywords(contenidoPagina)
  };
}

Midiendo el Impacto SEO del Texto Alt

Métricas a Rastrear

Tráfico de Google Imágenes (Search Console → Resultados de búsqueda → Imágenes)
Impresiones y clics de imágenes por consulta
Porcentaje de cobertura de texto alt (auditoría automatizada)
Puntuación de accesibilidad (Lighthouse)

Configurando el Seguimiento

En Google Search Console:

Ve a Rendimiento → Resultados de búsqueda
Filtra por Tipo de búsqueda: Imagen
Monitorea impresiones y CTR a lo largo del tiempo
Identifica consultas de imagen de alto rendimiento

Resultados Esperados

Después de implementar optimización adecuada de texto alt:

Plazo	Mejora Esperada
1-2 semanas	Las imágenes comienzan a aparecer en Google Imágenes
1-2 meses	20-50% de aumento en impresiones de imágenes
3-6 meses	Tráfico medible desde Google Imágenes

Hallazgos Comunes en Auditorías de Texto Alt

Al auditar sitios web, estos son los problemas más frecuentes:

1. Atributos Alt Completamente Faltantes

<!-- ❌ Sin atributo alt - violación de accesibilidad -->
<img src="producto.jpg">

<!-- ✅ Corregido -->
<img src="producto.jpg" alt="Auriculares bluetooth inalámbricos en negro mate">

2. Texto Alt de Marcador de Posición

<!-- ❌ Texto de marcador dejado -->
<img alt="imagen" src="hero.jpg">
<img alt="foto" src="equipo.jpg">
<img alt="banner" src="promo.jpg">

<!-- ✅ Corregido con texto descriptivo -->
<img alt="Taller de investigación UX con participantes analizando mapas de viaje del usuario" src="hero.jpg">

3. Texto Alt Duplicado Entre Imágenes

<!-- ❌ Mismo texto alt para diferentes imágenes -->
<img alt="producto" src="producto-1.jpg">
<img alt="producto" src="producto-2.jpg">
<img alt="producto" src="producto-3.jpg">

<!-- ✅ Descripciones únicas para cada una -->
<img alt="Chaqueta de mezclilla azul vista frontal" src="chaqueta-frente.jpg">
<img alt="Chaqueta de mezclilla azul espalda con detalle de bordado" src="chaqueta-espalda.jpg">
<img alt="Chaqueta de mezclilla azul forro interior y bolsillos" src="chaqueta-interior.jpg">

Lista de Verificación de Implementación

Auditoría Inicial

[ ] Exportar todas las imágenes con su texto alt actual
[ ] Identificar imágenes con atributos alt faltantes
[ ] Marcar texto alt de marcador o duplicado
[ ] Categorizar imágenes por tipo (producto, editorial, decorativa)

Fase de Escritura

[ ] Crear plantilla de texto alt para cada categoría de imagen
[ ] Investigar keywords objetivo para imágenes de alto valor
[ ] Escribir texto alt único para cada imagen no decorativa
[ ] Revisar para evitar amontonamiento de keywords
[ ] Asegurar que imágenes decorativas tengan alt=""

Implementación Técnica

[ ] Actualizar atributos alt en HTML/CMS
[ ] Configurar CMS para requerir texto alt al subir
[ ] Configurar pruebas automatizadas de accesibilidad
[ ] Agregar etiquetas ARIA para imágenes de fondo con contenido

Monitoreo

[ ] Rastrear tráfico de Google Imágenes en Search Console
[ ] Configurar auditorías regulares de texto alt
[ ] Monitorear puntuaciones de accesibilidad
[ ] Revisar calidad de texto alt generado por IA

Referencias

Google Search Central - Mejores prácticas de Google Imágenes
Ahrefs - Image SEO: 12 Actionable Tips
MDN Web Docs - Elemento img de HTML
WCAG 2.2 - Contenido No Textual (SC 1.1.1)
W3C WAI - Tutorial de Imágenes y Árbol de Decisión