Alt

¿Qué es el alt?

El alt de las imágenes, conocido como atributo alt o texto alternativo, es un elemento HTML que se utiliza para describir el contenido de una imagen en una página web.

Este atributo se incluye en el código HTML mediante la etiqueta <img> y proporciona una descripción textual de la imagen para que pueda ser interpretada tanto por los motores de búsqueda como por los usuarios con discapacidades visuales que utilizan lectores de pantalla.

El texto alternativo es una práctica fundamental tanto para la accesibilidad como para el SEO, ya que mejora la comprensión del contenido visual por parte de los buscadores y permite a más personas interactuar con el sitio web de manera inclusiva.

Ejemplo de uso del atributo alt

Código HTML sin alt:

Código HTML con alt:

En este caso, el atributo alt describe el contenido de la imagen como un paisaje de montaña con cielo despejado.

¿Por qué es importante el atributo alt?

1. Accesibilidad:

   • Ayuda a los usuarios con discapacidades visuales a entender el contenido de las imágenes mediante lectores de pantalla.

2. Optimización para motores de búsqueda:

   • Los motores de búsqueda utilizan el texto alternativo para comprender el contenido de las imágenes, lo que puede mejorar el posicionamiento en las SERPs.

3. Carga de imágenes fallida:

   • Si la imagen no se carga correctamente, el atributo alt se muestra en su lugar para indicar al usuario lo que representa la imagen.

4. Posicionamiento en búsquedas de imágenes:

   • El texto alternativo optimizado aumenta las posibilidades de que las imágenes aparezcan en Google Imágenes y otras plataformas de búsqueda visual.

Buenas prácticas para redactar el atributo alt

1. Ser descriptivo y relevante:

   • Describe el contenido de la imagen de manera clara y específica.

2. Usar palabras clave de forma natural:

   • Incluye palabras clave relacionadas con el contenido, pero evita el uso excesivo de términos (keyword stuffing).

3. Evitar descripciones genéricas:

   • En lugar de escribir «imagen1.jpg» o «foto bonita», proporciona un contexto significativo.

4. No repetir información redundante:

   • Si la imagen ya está explicada en el texto cercano, evita duplicar la información en el atributo alt.

5. No incluir palabras como «imagen de» o «foto de»:

   • El atributo alt ya se interpreta como una descripción de la imagen, por lo que no es necesario incluir esas palabras.

Ejemplos prácticos de atributos alt bien redactados

1. Imagen de producto:

   html

   Copiar código

   <img src="zapatillas-rojas.jpg" alt="Zapatillas deportivas rojas para correr">


2. Fotografía de una receta:

   html

   Copiar código

   <img src="pastel-chocolate.jpg" alt="Pastel de chocolate decorado con fresas frescas">


3. Logo de una empresa:

   html

   Copiar código

   <img src="logo-empresa.jpg" alt="Logotipo de la empresa ABC Corp">


Errores comunes al usar el atributo alt

1. Dejar el atributo alt vacío en imágenes importantes:

   • Esto impide que los motores de búsqueda y los usuarios con discapacidades visuales entiendan el contenido.

2. Sobrecargar con palabras clave:

   • Añadir demasiadas palabras clave puede ser considerado spam por los motores de búsqueda.

3. Usar alt para imágenes decorativas:

   • En el caso de imágenes que no aportan información (como fondos o líneas divisoras), es mejor dejar el atributo alt vacío: alt="".

4. No incluir el atributo alt:

   • Esto representa una oportunidad perdida para optimizar la página y mejorar la accesibilidad.

Herramientas para analizar el uso del atributo alt

1. Google Lighthouse:

   • Permite auditar la accesibilidad de un sitio web, incluyendo la implementación del atributo alt.

2. Screaming Frog:

   • Detecta imágenes sin texto alternativo o con descripciones incompletas.

3. Wave Accessibility Tool:

   • Evalúa la accesibilidad de un sitio y destaca problemas relacionados con las imágenes.

4. Ahrefs / SEMrush:

   • Identifican problemas de SEO técnico, incluyendo la falta de atributos alt en las imágenes.

Diferencia entre el atributo alt y el título de la imagen

El atributo alt de las imágenes es un elemento esencial para la accesibilidad y la optimización SEO.

Redactar descripciones claras, relevantes y bien estructuradas no solo mejora la experiencia de los usuarios, sino que también aumenta la visibilidad del contenido en los motores de búsqueda.

Incorporar el texto alternativo como parte de una estrategia integral asegura que tu sitio sea inclusivo, eficiente y competitivo en el entorno digital.