Cómo escribir alt text para SEO y accesibilidad (con ejemplos)

Qué hace en realidad el alt text

El alt text es una descripción corta de una imagen. Vive en el atributo alt de la etiqueta <img>. Lo leen dos audiencias.

La primera es gente que no puede ver la imagen. Los lectores de pantalla leen el alt text en voz alta. Si una persona ciega entra en tu ficha de producto, el alt text es la foto del producto para ella.

La segunda es Google. Los bots ya intuyen lo que hay en una imagen, pero siguen apoyándose en el alt text como etiqueta de confianza. El alt text es lo que decide qué es la imagen, si aparece en búsqueda de imágenes, y si la página de alrededor trata de lo que tú dices que trata.

El mismo texto, dos trabajos. Escríbelo bien para la persona y la máquina también queda servida.

Los dos casos: decorativa vs informativa

Cada imagen de tu página cae en uno de dos cubos. El cubo decide cómo debe ser el alt text.

Imágenes decorativas

Una línea separadora. Un patrón de fondo. Un icono al lado de un título que ya tiene texto. Un adorno que no aporta significado.

Estas imágenes deben llevar el alt vacío: alt="". No ausente, vacío.

<img src="/divider.svg" alt="" />

El alt vacío le dice al lector de pantalla “salta esto, es decorativo”. El usuario sigue sin oír “imagen, divisor punto S V G”. Eso está bien. Le ahorras ruido.

Si dejas el atributo alt fuera del todo, los lectores de pantalla se desorientan. Algunos leen el nombre de archivo en voz alta. La persona oye “imagen, D S C 0 4 8 2 7 punto J P G”. Eso está mal.

Entonces: imágenes decorativas, alt="". Siempre presente, siempre vacío.

Imágenes informativas

Una foto de producto. Un gráfico. Una captura de UI. Una foto de una persona en un artículo sobre esa persona. Cualquier cosa que aporte un significado que el texto de alrededor no cubre ya.

Estas llevan una descripción de verdad.

<img src="/team-maria.jpg" alt="Maria sonriendo en una cafetería, con el portátil abierto" />

Y ya. Sin keyword stuffing, sin nombre de archivo, sin “haz clic aquí”.

Cómo escribir un buen alt text

Describe el contenido y el propósito, no la apariencia. El objetivo es: si alguien cerrara los ojos, qué necesitaría saber de esta imagen para seguir la página.

Bien:

• “Maria sonriendo en una cafetería, con el portátil abierto”
• “Gráfico de barras: ingresos del Q3 suben 18% sobre el Q2”
• “Panel de ajustes con el toggle de modo oscuro resaltado”

No tan bien:

• “Fotografía de una mujer con camisa roja” (describe píxeles, no significado)
• “image1.jpg” (el nombre del archivo, inútil)
• “logo” (qué logo, dónde, para qué)
• “haz clic aquí” (eso es un enlace, no una descripción)

Escribe lo que le dirías a un amigo por teléfono si te preguntase “qué se ve en la foto”. Esa es la voz correcta.

No metas keywords con calzador

Un mal hábito común: rellenar el alt text con todas las keywords por las que quieres posicionar.

<!-- mal -->
<img alt="mejores zapatillas running 2026 zapatillas running baratas comprar zapatillas online" />

Google ve esto y lo trata como spam. Peor aún, el usuario de lector de pantalla lo oye todo. Has hecho la página más difícil de usar y más difícil de posicionar, en una sola línea.

Una frase clara gana a seis keywords. Siempre.

Width y height: el tema del CLS

Pon width y height en cada <img>. Esto no es negociable si te importa el layout shift.

<img src="/photo.jpg" alt="..." width="800" height="600" />

Cuando el navegador ve la etiqueta, todavía no tiene la imagen. Si no le dices el tamaño, reserva cero espacio, pinta la página, y luego llega la imagen y empuja todo 600 píxeles hacia abajo. La persona hace clic en el botón equivocado. El Cumulative Layout Shift sube. Las Core Web Vitals bajan. Mira Core Web Vitals y RUM para el contexto.

Con width y height, el navegador reserva el hueco correcto antes de cargar la imagen. La página se pinta una vez y se queda quieta.

No hace falta que estos atributos coincidan con el tamaño renderizado final. El CSS sigue controlando cuánto mide en pantalla. Los atributos solo le dan al navegador la proporción.

Tamaños modernos de imagen

El <img src="..."> básico vale para casos simples. Para trabajo responsive de verdad tienes mejores herramientas.

srcset y sizes

srcset te deja servir un archivo distinto según la pantalla.

<img
  src="/photo-800.jpg"
  srcset="/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="..."
  width="800"
  height="600"
/>

El navegador elige el archivo según el dispositivo. Un móvil recibe la versión 400. Un portátil retina recibe la versión 1600. Dejas de mandar imágenes de escritorio a móviles.

picture con fallback de formato

<picture> te deja servir formatos modernos con un fallback en JPG o PNG.

<picture>
  <source type="image/avif" srcset="/photo.avif" />
  <source type="image/webp" srcset="/photo.webp" />
  <img src="/photo.jpg" alt="..." width="800" height="600" />
</picture>

Los navegadores con AVIF reciben AVIF. Los que no, pero soportan WebP, reciben WebP. Los antiguos caen al JPG. Mira WebP vs PNG vs JPG para elegir formato.

Lazy loading

Para imágenes por debajo del fold, añade loading="lazy". El navegador no las descarga hasta que el usuario se acerca al hacer scroll. Primer pintado más rápido, menos ancho de banda desperdiciado.

<img src="/photo.jpg" alt="..." width="800" height="600" loading="lazy" />

No pongas loading="lazy" en la imagen hero ni en nada que esté en el primer viewport. Eso perjudica al Largest Contentful Paint. El lazy es para lo que está fuera de pantalla.

El nombre de archivo importa

El nombre del archivo es una pequeña señal de SEO y una ayuda al depurar.

• team-photo-2024.jpg se busca, describe y aguanta un copia y pega.
• IMG_5827.jpg es como lo llamó tu móvil. Inútil.

Renombra antes de subir. Minúsculas, guiones, sin espacios. El nombre del archivo también es lo que Google ve en la URL de la imagen, así que merece la pena dedicarle unos segundos.

Errores típicos

Algunos patrones que aparecen una y otra vez:

• Empezar el alt con “imagen de” o “foto de”. El lector de pantalla ya anuncia que es una imagen. Estás diciendo “imagen, imagen de un gato”. Solo escribe “un gato durmiendo al sol”.
• Repetir el pie de foto literal. Si el caption debajo ya dice “Maria en la conferencia”, el alt no debería decir lo mismo. O describes otro aspecto, o pones alt="" y dejas que el caption haga el trabajo.
• Dejar el alt fuera del todo en imágenes decorativas. Escribe alt="". Vacío es un valor real. Ausente es un bug.
• Meter texto importante dentro de la imagen como píxeles. Los logos y los textos decorativos vale, pero si la imagen contiene un párrafo de contenido, ese contenido es invisible para el lector de pantalla y más difícil de leer para Google. Pon el texto en el HTML.
• Usar el mismo alt genérico en todas las imágenes: “foto”, “imagen”, “gráfico”. Cada imagen es distinta. Cada alt debe ser distinto.

Accesibilidad y SEO son el mismo proyecto

Un buen alt text ayuda a una persona ciega a navegar tu sitio. El mismo alt text ayuda a Google a entender la página. Width y height ayudan a una persona con un móvil lento a no sufrir saltos de layout. Los mismos atributos ayudan a tus Core Web Vitals.

No estás haciendo dos trabajos. Estás haciendo uno, y se nota en dos sitios. Lo mismo pasa con el HTML semántico, el código eficiente y los básicos de seguridad. Construye para personas, y los bots vienen de regalo.

Preguntas frecuentes