En Alt-Tagmás conocido como texto alternativo (abreviatura de texto alternativo), es una breve descripción que se añade a una imagen en el HTML de tu sitio web. Sirve para dos propósitos importantes: accesibilidad y SEO.

Esto es lo que parece en el código:

 <img src="team-photo.jpg" alt="Equipo de desarrollo web en una reunión">

En pocas palabras: cuando una imagen no se puede ver -ya sea porque no se carga o porque el usuario tiene problemas de visión-, el texto alternativo indica a la gente (y a los motores de búsqueda) de qué trata la imagen.

Es uno de esos elementos entre bastidores que la mayoría de los usuarios no perciben, pero desempeña un papel importante para que tu sitio web sea más inclusivo, comprensible y visible en las búsquedas.

Por qué el texto alternativo es importante para tu sitio web

1. Accesibilidad Los lectores de pantalla utilizan el texto alternativo para describir las imágenes a los usuarios con deficiencias visuales. Sin él, esos usuarios se pierden información esencial o contexto. Si quieres que tu sitio web sea accesible -y cumpla las normas WCAG- el texto alternativo no es negociable.
2. SEO Los motores de búsqueda no pueden "ver" las imágenes como los humanos. El texto alternativo les da una forma de entender lo que muestra la imagen, lo que ayuda a la clasificación en la búsqueda de imágenes y a la relevancia general de la página.
3. Contenido alternativo Si una imagen no se carga (conexión lenta, error técnico, etc.), el texto alternativo aparece en su lugar para que el mensaje no se pierda por completo.
4. Claridad del contenido Un buen texto alternativo realza el significado de tu contenido, especialmente si la imagen es fundamental para tu mensaje.

¿Qué es un buen texto alternativo?

• Sé específico y descriptivo Di lo que muestra realmente la imagen, incluyendo detalles relevantes. Por ejemplo:
  • ✅ Panel de control del cliente que muestra las métricas de rendimiento mensuales
  • ❌ Imagen o Foto
• Sé conciso Procura que tenga entre 5 y 15 palabras. Evita rellenarlo con palabras clave o que suene poco natural.
• No digas "imagen de..." o "foto de...". Los lectores de pantalla ya lo anuncian como una imagen.
• Utiliza el contexto El texto alternativo debe coincidir con el propósito de la imagen en su ubicación. Una foto puede tener una finalidad distinta en tu página de inicio que en una entrada de blog.

Cuando el texto alternativo no es necesario

• Imágenes puramente decorativas (como una forma o línea de fondo) puede tener una etiqueta alt vacía: alt="". Esto indica a los lectores de pantalla que lo omitan, para que los usuarios no tengan que escuchar contenido sin sentido.
• Iconos que ya están etiquetadas (como un icono de papelera junto a la palabra "Eliminar") no siempre necesitan texto alternativo si la etiqueta es lo suficientemente clara.

Cómo añadir etiquetas alt en la práctica

• En WordPresspuedes introducir el texto alternativo directamente al subir una imagen a la Biblioteca Multimedia.
• En HTMLel atributo alt tiene este aspecto <img src="example.jpg" alt="Un sitio web responsivo que se visualiza en el portátil y en el teléfono">
• En constructores como Bricks o ElementorLos campos alt suelen estar integrados en la configuración de la imagen.

Conclusión

Las etiquetas Alt son pequeñas pero poderosas. Hacen que tu sitio sea más inclusivo, mejoran el SEO y mejoran la experiencia del usuario, a menudo sin ningún cambio visible. Si añades imágenes a tu sitio, escribir un buen texto alternativo es una de las formas más sencillas de mejorar el rendimiento general de tu contenido.