Alt text (texto alternativo): qué es y para qué sirve

Imagen de una montaña con una etiqueta de texto alternativo y ondas de un lector de pantalla

Añadir a fuentes preferidas

El alt text o texto alternativo es el texto del atributo alt de una imagen HTML, que la sustituye cuando no se ve: lo leen los lectores de pantalla y aparece si la imagen no carga. Google usa el texto alternativo, junto con la visión artificial y el contenido de la página, para entender de qué trata la imagen.

«Texto alternativo» también es el nombre de una función en redes sociales y procesadores de texto. Esta entrada trata del atributo alt de HTML, que es el sentido que importa en SEO y accesibilidad web.

Cómo funciona

En HTML, el atributo alt va dentro del elemento <img>. Un ejemplo de la documentación de Google: <img src="puppy.jpg" alt="cachorro de dálmata jugando a traer cosas" />. Según MDN, el atributo es obligatorio: los lectores de pantalla leen su valor para que el usuario sepa qué significa la imagen, y el navegador lo muestra si la imagen no puede cargarse por un error de red, un bloqueo de contenido o un enlace roto.

Qué escribir depende del papel de la imagen en la página. La guía de decisión del W3C (Iniciativa de Accesibilidad Web, actualizada el 2024-05-13) distingue estos casos:

Tipo de imagenQué poner en alt
InformativaDescripción breve de su significado
Funcional (enlace o botón)El destino o la acción
Con textoEl mismo texto de la imagen
Compleja (gráfico)Alt breve, y la información en el texto de la página
Decorativa o repetida en el texto cercanoAtributo vacío: alt=""

Un alt="" vacío indica que la imagen no es parte clave del contenido y que los navegadores no visuales pueden omitirla. Es distinto de no poner el atributo: en ese caso, según MDN, algunos lectores de pantalla pueden leer el nombre del archivo.

Google indexa las imágenes que se insertan con elementos HTML <img> (también dentro de <picture>); no indexa las imágenes CSS. En un SVG insertado en la página, Google propone usar el elemento <title> en lugar de alt.

Cómo se aplica en SEO

  • Describe lo que muestra la imagen y que encaje con la página. Google pide un texto útil y con mucha información, que use palabras clave de manera apropiada y que coincida con el contenido de la página. Su ejemplo de opción óptima es «cachorro de dálmata jugando a traer cosas»; el correcto, pero mejorable, es «cachorro».
  • No rellenes el alt de palabras clave. Google lo pone como opción incorrecta: provoca una mala experiencia de usuario y puede hacer que el sitio se considere spam.
  • Deja el alt vacío en las imágenes decorativas. Es la indicación del W3C y de MDN para las imágenes que no son parte clave del contenido.
  • Si la imagen es un enlace, describe adonde lleva. MDN recomienda que el texto alternativo describa el recurso enlazado, como si fuera un enlace de texto, y, si la imagen activa una acción, que describa esa acción: alt="next page" mejor que alt="arrow right" (ejemplo de MDN, en inglés). Google añade que el texto alternativo puede servir de texto del enlace. Más sobre ese texto en la entrada de anchor text.
  • Léelo junto al texto que precede a la imagen. MDN propone esta prueba de accesibilidad: comprobar si, leídos seguidos, transmiten el mismo significado que la imagen.

Errores comunes

  • Omitir el atributo. Google lo incluye como opción incorrecta, y MDN recuerda que, sin alt, algunos lectores de pantalla leen el nombre del archivo.
  • Acumular palabras clave. Un listado de términos del tipo «cachorro perro bebé perros comida barata» es el ejemplo de Google de exceso de palabras clave.
  • Describir la imagen en sí en lugar de su contenido. MDN desaconseja textos que mencionen la presencia de la imagen («image») o su nombre de archivo, y propone una descripción clara y concisa, como «A Penguin on a beach.» (ejemplo de MDN, en inglés).
  • Usar title como sustituto del alt. MDN señala que el atributo title no es un sustituto aceptable y que conviene no repetir en él el mismo texto, porque algunos lectores de pantalla lo anuncian dos veces. Para un pie de foto, MDN indica figure y figcaption.

Amplía en

Si te interesa el SEO de imágenes con enfoque local, tienes nuestro post sobre geolocalizar imágenes para impulsar el SEO local.

Términos relacionados

Fuentes

Por dónde seguir

¿Quieres revisar cómo están etiquetadas las imágenes de tu web? Te ayudamos con nuestro equipo de agencia SEO. ¡Hablemos de generar negocio!