Texto alternativo: cómo escribir el alt text para SEO

Casi todo lo que se escribe sobre el texto alternativo empieza por «rellénalo con tu palabra clave». Es la parte menos importante y la más peligrosa: Google lo desaconseja de forma expresa, y quien depende del alt para entender una página no necesita tu keyword, necesita saber qué hace esa imagen ahí.

Aquí separo tres cosas que las guías mezclan: lo que Google documenta sobre el alt, lo que exige la accesibilidad (WCAG y las guías del W3C) y lo que repite el sector sin fuente. Termino con una revisión de los alt de mi propia web, con lo que está bien y con lo que tengo que corregir.

Qué es el texto alternativo y para quién se escribe

El atributo alt de <img> es el texto que sustituye a la imagen cuando no se puede ver: lectores de pantalla, imagen que no carga, navegadores solo de texto. Desde el punto de vista de la accesibilidad es un requisito del criterio 1.1.1 de WCAG, «Contenido no textual», de nivel A: todo contenido no textual debe tener una alternativa en texto que cumpla el mismo propósito, salvo excepciones como la decoración pura.

Google lo recoge desde otro ángulo. En su documentación sobre imágenes escribe que el atributo más importante para dar metadatos a una imagen es el texto alternativo, y que lo utiliza junto con algoritmos de visión computacional y el contenido de la página. Dos lectores distintos, el usuario que no ve la imagen y el buscador que la clasifica, con una misma regla de oro: describir lo que aporta la imagen en ese contexto.

Por eso el alt no se escribe «para SEO» ni «para accesibilidad» por separado. Un buen alt cumple las dos cosas a la vez y un mal alt falla en las dos.

Qué dice Google del alt y qué no dice

Esto es lo que recoge la documentación de Google sobre imágenes, que he releído para este artículo:

• El alt es el atributo más importante para dar metadatos a una imagen.
• Google lo combina con visión computacional y con el contenido de la página.
• El tema de la imagen también se deduce del contexto, incluidos los pies de foto y los títulos de imagen.
• Si la imagen es un enlace, el alt hace de anchor text.
• El relleno de palabras clave da mala experiencia y puede hacer que el sitio se vea como spam.
• Para SVG en línea, recomienda el elemento <title>.

Y esto es lo que esa página no dice, que conviene saber antes de creerse cifras de terceros: no fija una longitud máxima, ni en caracteres ni en palabras; no da ningún peso del alt en el ranking; no menciona el alt en los sitemaps de imágenes; y no habla del atributo title de la imagen.

Hay un detalle más que afecta al diseño de tus páginas: Google indica que encuentra imágenes en el atributo src de <img>, incluso dentro de <picture>, y que no indexa imágenes CSS. Si una imagen debe poder aparecer en Google Imágenes, tiene que ser un <img>, y entonces necesita su alt. Para el resto del enfoque de imágenes (formatos, peso, sitemaps), tienes la guía de optimización de imágenes para SEO. El marcado de datos estructurados también puede citar las imágenes de un artículo, pero no sustituye al alt: es otro camino, el de los datos estructurados con JSON-LD.

Tipos de imagen y qué alt lleva cada una

El W3C lo resuelve con un árbol de decisión que funciona mejor que cualquier plantilla de «escribe una frase de ocho palabras». La pregunta no es cuánto, sino qué papel cumple la imagen.

El propio W3C avisa de que decidir si una imagen es decorativa o informativa es un juicio que solo puede hacer el autor. Una foto de equipo puede ser decoración en una página corporativa genérica e información en una página de «quiénes somos».

Imágenes decorativas: alt vacío, no alt ausente

La regla tiene dos mitades. Si la imagen es decorativa, usa alt="": las tecnologías de apoyo la saltan y no meten ruido. Si omites el atributo, el resultado es peor que un alt vacío: según el W3C y MDN, algunos lectores de pantalla anunciarán el nombre del archivo, que casi nunca dice nada útil. La regla image-alt de axe lo refleja: toda imagen necesita alternativa de texto o marcarse como presentación.

El W3C añade que, cuando se pueda, las imágenes decorativas se coloquen como fondos CSS. Tiene sentido en doble dirección: el lector de pantalla no se entera y, como Google no indexa imágenes CSS, tampoco ensucias el índice de imágenes con adornos. Para role="presentation", el W3C advierte de que tiene menos soporte que el alt nulo.

Imágenes que son enlaces o botones

Aquí el error clásico es describir el dibujo. Una lupa que abre el buscador no debe llevar «lupa», sino «Buscar». El W3C pone el ejemplo de un icono de impresora: el alt correcto es «Imprimir esta página», no «impresora». Con el logo que enlaza a la home, el ejemplo del W3C usa «W3C home», es decir, el destino.

Si la imagen acompaña a texto que ya dice lo mismo, se deja vacía. Un logo junto al texto «W3C Home» dentro del mismo enlace lleva alt="", porque el texto del enlace ya informa. Y para varias imágenes que juntas transmiten un único dato, como las cinco estrellas de una valoración, una lleva el texto («Valoración: 3,5 de 5 estrellas») y las otras cuatro, alt vacío.

<!-- Enlace formado solo por la imagen: alt = destino -->
<a href="/"><img src="logo.png" alt="Inicio"></a>

<!-- Imagen junto a texto que ya dice lo mismo: alt vacío -->
<a href="/"><img src="logo.png" alt=""> Inicio</a>

<!-- Botón de imagen: alt = acción -->
<input type="image" src="lupa.png" alt="Buscar">

Ejemplos buenos y malos

La propia documentación de Google trae una escalera de ejemplos con un cachorro: sin alt es incorrecto, un alt relleno de palabras como «puppy dog puppies» es incorrecto, alt="puppy" es mejor y alt="Dalmatian puppy playing fetch" es lo mejor. Mi versión para una web de servicios:

La mejora siempre va en la misma dirección: más sujeto, más contexto y cero palabras que no describan la imagen. Una keyword entra en el alt cuando describe de verdad lo que se ve, como en el producto con su modelo, y no se incluye cuando solo busca posicionar.

Longitud del alt: qué documentan y qué no

La cifra de 125 caracteres circula en muchas guías, normalmente con la explicación de que los lectores de pantalla dejan de leer a partir de ahí. No la he encontrado ni en la documentación de Google ni en los tutoriales del W3C, así que la trato como una referencia práctica de terceros y no como una norma. Ahrefs, en su artículo en español sobre el tema, tampoco da un límite y se limita a pedir concisión.

Lo que sí dice el W3C es esto: el alt debe ser la descripción más concisa posible del propósito de la imagen, y cuando hace falta más que una frase corta hay que pasar a un método de descripción larga. Es decir, la longitud no se regula con un número sino con una decisión: si lo que quieres contar no cabe en una frase, no es un alt, es una descripción.

• Pon primero lo más importante, por si el usuario interrumpe la lectura.
• Evita «imagen de», «foto de» o «icono de»: el lector de pantalla ya anuncia que es una imagen.
• No repitas en el alt el texto del párrafo contiguo; si el texto ya lo dice, la imagen puede ser decorativa.
• No uses el nombre del archivo como alt.

Gráficos, infografías y descripciones largas

Un gráfico de barras con doce valores no cabe en un alt razonable. El W3C propone dos piezas: un alt corto que identifique la imagen y señale dónde está la descripción larga, y la descripción larga, que recoge escalas, valores, relaciones y tendencias. Su ejemplo de alt corto es «Gráfico de barras con los visitantes mensuales y totales del primer trimestre de 2025 para los sitios 1 a 3».

Para la descripción larga el tutorial ofrece cuatro vías: un enlace de texto visible junto a la imagen, el nombre del encabezado donde está la descripción dentro del propio alt, un <figure> con la descripción completa en el <figcaption>, o aria-describedby para descripciones de solo texto. Insiste en que la descripción sea visible para todos, no solo para quien usa tecnologías de apoyo, y en que el texto de alrededor mencione la imagen y resuma su mensaje.

En SEO esto tiene una ventaja práctica: la descripción larga es texto indexable en la página, mientras que un alt de 300 caracteres es un texto que casi nadie lee. Si el contenido de la infografía importa, ponlo en la página como texto, en una tabla o en una lista. Mi lectura es que ese texto visible también es lo que mejor puede aprovechar una respuesta generada por IA, algo que trato en mi guía de AEO y GEO.

alt, title y figcaption

Son tres textos con funciones distintas y conviene no confundirlos.

Una consecuencia concreta: el pie visible es el mejor sitio para la información que no debe cargar el alt. Si una foto necesita «foto tomada en la jornada de 2025 en Salamanca», eso va al figcaption, donde lo ve todo el mundo y donde Google lo lee como contexto. Sobre el title de la imagen, la documentación de Google no dice nada específico, así que no cuentes con él para el posicionamiento. Con los iframes pasa algo parecido: su atributo title sí importa por accesibilidad, como cuento en mi guía de iframes y SEO.

SVG, imágenes CSS y miniaturas del blog

SVG en línea. Google recomienda usar el elemento <title> dentro del SVG. Si es decorativo, como un icono junto a un texto, se marca con aria-hidden="true". Si es informativo, lleva <title> y, para algo más largo, <desc> enlazados por aria-labelledby.

Imágenes CSS. No llevan alt porque no son contenido. Son la vía correcta para decoración pura y la equivocada para cualquier imagen que quieras que Google indexe.

Miniaturas de listados. Una tarjeta de blog suele tener la miniatura y, justo al lado, el título enlazado a la misma URL. Si la miniatura es un enlace duplicado con su propio alt, el lector de pantalla encuentra dos enlaces idénticos. Lo limpio es dejar la miniatura con alt="" (o fuera del enlace) y que el enlace lo dé el título, que ya describe el destino.

Cómo tengo los alt en mi web

He revisado las plantillas de includes/, las páginas de servicios y las 15 piezas del blog que hay hoy en blog/*/content.html. Lo que sale:

Lo que está bien

• Figuras del blog: 129 imágenes en 15 artículos, ninguna sin alt ni con alt vacío. Describen lo que muestra la figura, como esta de mi artículo sobre caché: «Cuatro bloques en fila: navegador, CDN o proxy, servidor de origen y Googlebot, cada uno con la regla de caché que le afecta».
• Portada del artículo: alt="". La portada lleva dibujado el título, que ya está como texto en el H1 justo al lado. Es el caso de «imagen de texto con el mismo texto en la página» del árbol del W3C.
• Miniaturas del listado: alt="" y el contenedor con aria-hidden="true"; el enlace lo da el título de la tarjeta.
• Avatar de la firma (junto al nombre enlazado) y flechas de marca: alt="", decorativos.
• Logo de cabecera y pie: enlace a la home con aria-label="Cristofer Cruz — Inicio" y alt="Cristofer Cruz". Funciona; el aria-label manda y el alt queda redundante.
• Iconos SVG de menú y compartir: con aria-hidden y el nombre accesible en el enlace o botón (aria-label). El mapa de provincias lleva <title> y <desc>.

Lo que tengo que corregir

• La misma foto con tres criterios. auditoria-hero.webp sale con alt="" en 9 páginas de servicio y con «Cristofer Cruz, consultor SEO» en otras 3 (marketing de contenidos, formación SEO y SEO para LLMs). En Sobre mí lleva un alt propio. Si la foto de mi cara es decorativa, debería serlo en todas; si no lo es, ninguna debería ir vacía.
• Alt de la home con afirmaciones. El retrato principal dice «Consultor SEO con más de 8 años de experiencia, especialista en posicionamiento orgánico para pymes y grandes marcas». Eso no se ve en la foto: es posicionamiento metido en un alt. Debería ser una descripción de la foto y dejar esas afirmaciones al texto de la página.
• Avatar del bloque de autor. Lleva alt="Cristofer Cruz" pegado a un encabezado enlazado que dice «Cristofer Cruz». Por la lógica del W3C del logo junto a texto, debería ir vacío.
• og:image:alt fijo. En header.php tiene un texto único para todo el sitio, aunque en los artículos la imagen social sea la portada de cada uno (el resto de etiquetas Open Graph las reviso en otra guía).
• Alt largos en figuras. De los 129, 96 superan los 125 caracteres, con una mediana de 142 y un máximo de 247. Son infografías con mucho texto, así que son más una descripción que una etiqueta. Cada figura se explica en el cuerpo del artículo, pero formalmente tengo alts largos sin una descripción larga enlazada. Es una decisión consciente que hoy no sigue el modelo de dos textos del W3C.
• Enlace de ampliación. Cada figura va dentro de un enlace a la imagen grande. Ahí el alt hace de nombre del enlace y el texto «Ampliar imagen» solo está en el title. No lo he probado con un lector de pantalla, así que no puedo decir cómo se anuncia.

Cómo auditar el texto alternativo

Ninguna herramienta automática te dirá si un alt es bueno; solo si existe. Combina cuatro pasos:

1. Lighthouse o axe. La regla image-alt de axe marca como crítica toda imagen sin alternativa de texto, y la asocia al criterio 1.1.1 de WCAG (nivel A). Es el filtro grueso.
2. El código fuente. Busca <img sin alt, alts que sean nombres de archivo («IMG_2034.jpg»), alts con «imagen de» y alts repetidos en imágenes distintas.
3. Un rastreo de todo el sitio. Un rastreador como Screaming Frog puede listar imágenes sin alt o con alt vacío. Sirve para escalar la revisión a miles de URLs; el criterio de si el vacío es correcto lo sigues poniendo tú.
4. Un lector de pantalla. VoiceOver o NVDA recorriendo la página 5 minutos te enseñan lo que ninguna herramienta ve: enlaces con el mismo nombre, ruido de imágenes decorativas, alts que no dicen nada.

Por dónde empezar

1. Lanza axe o Lighthouse sobre tus tres plantillas principales y arregla todo lo que no tenga alt.
2. Clasifica cada imagen recurrente (logos, retratos, iconos, miniaturas) como informativa, decorativa o funcional, y aplica el mismo criterio en todas las páginas.
3. Pasa a alt="" lo decorativo y quita de los alt cualquier afirmación o keyword que no se vea en la imagen.
4. En gráficos e infografías, deja un alt corto y pasa el contenido a texto visible en la página.
5. Repite la revisión con un lector de pantalla y, si tienes muchas URLs, con un rastreo. Para encuadrarlo dentro del resto de imágenes de tu web, sigue con la guía de optimización de imágenes.

Si publicas mucho contenido con imágenes y quieres fijar este criterio dentro del proceso editorial, es parte de lo que trabajo en marketing de contenidos.

Preguntas frecuentes

Referencias y fuentes

1. Prácticas recomendadas para imágenes (Google Imágenes) Google Search Central
2. Images Tutorial: Decision tree W3C WAI
3. Images Tutorial: Decorative images W3C WAI
4. Images Tutorial: Functional images W3C WAI
5. Images Tutorial: Complex images W3C WAI
6. Images Tutorial: Tips and tricks W3C WAI
7. Images Tutorial: Groups of images W3C WAI
8. Understanding SC 1.1.1: Non-text Content W3C WAI
9. The Image Embed element (img) MDN Web Docs
10. Images must have alternate text (image-alt) Deque University
11. Qué es el texto alternativo y cómo escribirlo Ahrefs