¿Qué es el atributo ALT y por qué es necesario?

¿Qué es el atributo ALT y para qué sirve?

La etiqueta o atributo ALT es un atributo del lenguaje de marcado HTML que se utiliza para añadir un texto descriptivo a una imagen. Este atributo se utiliza dentro de la etiqueta imagen (<img>) para que se muestre en caso de que la imagen no pueda ser mostrada por el navegador.

El atributo ALT también es conocido como atributo “alt text”, “texto alternativo” o “descripción alt”.

¿Cuáles son las funciones del atributo ALT?

El atributo de imagen ALT se utiliza para incluir un texto descriptivo sobre una imagen, aportando información sobre su apariencia, función o temática. Esta descripción debe ser corta y sencilla, ya que su función es informativa y se mostrará como “alternativa” en caso de que la imagen no pueda cargarse.

Las dos funciones principales del atributo ALT son:

1. Mostrar texto alternativo

Si el navegador web no puede mostrar la imagen al usuario, mostrará el texto incluido en el atributo ALT.

Esta función de mostrar el texto alternativo era muy importante al comienzo de internet, donde las conexiones no tenían la calidad y capacidad actual por lo que era habitual que al navegar por una página web las imágenes, o bien tardaban mucho en cargar, o directamente no las mostraba el navegador. Ante este tipo de situaciones el texto ALT era muy útil para saber que en ese lugar de la página debería cargar una imagen que mostraba algo concreto.

Hoy en día, esta función del atributo ALT ha dejado casi de tener utilidad debido al alto nivel de calidad y capacidad de las conexiones a internet (ADSL, fibra óptica, redes 4G).

2. Informar a Google

El principal valor de utilizar el atributo ALT en las imágenes actualmente, se encuentra en la optimización para motores de búsqueda o SEO. Google y otros motores de búsqueda utilizan la información proporcionada en el atributo ALT para conocer y contextualizar las imágenes, y así poderlas indexar en su base de datos.

Cuando un usuario realiza una búsqueda en Google, puede acceder a los resultados de la misma en imágenes, obteniendo una lista de imágenes relacionadas con las palabras clave de la búsqueda realizada.

Para clasificar y mostrar por orden esas imágenes en las páginas de resultados, Google utiliza el texto disponible en el atributo ALT. Utilizando de forma apropiada este atributo y añadiendo las keywords apropiadas, un sitio web puede posicionarse en Google con sus imágenes e incrementar su visibilidad.

3. Mejorar la accesibilidad

Es un elemento para mejorar la accesibilidad web, como indica el propio soporte de Google, ya que permite a personas que no pueden ver imágenes y utilizan lectores de pantalla a conocer el contenido de las imágenes y disfrutar de una mejor experiencia de usuario.

¿Cómo se añade este atributo a una imagen?

El atributo ALT imagen corresponde a una etiqueta HTML. Para añadir el texto ALT se debe editar o añadir el atributo a la etiqueta de imagen o <img>. Veamos un ejemplo sobre cómo utilizar el atributo ALT en una imagen:

<img src = “nombre_imagen.png” alt = “Texto descriptivo del contenido de la imagen”>

Al tratarse de un atributo, alt va dentro de la propia etiqueta de imagen, y el texto que lo define se incluye dentro de comillas.

¿Cómo añadir el atributo alt en WordPress?

WordPress es el CMS más utilizado para crear páginas web y blogs, e incluso para el diseño de tiendas online con WooCommerce. Cuando se añade una imagen con WordPress a una entrada, página o ficha de producto hay una serie de campos que se pueden rellenar, siendo uno de ellos el atributo ALT (Texto alternativo). De esta manera se añade automáticamente al código HTML el atributo alt con su contenido, sin necesidad de estar editando código por parte del administrador del sitio.

Consejos para elaborar el atributo de imagen ALT

El atributo ALT es normalmente infrautilizado u olvidada en muchos sitios web, aunque también es objeto de prácticas poco éticas como el keyword stuffing (sobrecargar el ALT de palabras clave buscando únicamente su posicionamiento), o el cloaking (utilizar imágenes llamativas y con un alt que no se corresponde con su contenido, sino que utiliza palabras clave con alto nivel de búsquedas, incluso palabras mal escritas).

Para sacar el máximo partido de este atributo de imagen para un sitio web es necesario tener en cuenta las siguientes recomendaciones.

ALT para el usuario

A la hora de redactar el texto alternativo de las imágenes de una web hay que ponerse en el punto de vista del usuario, describiendo correctamente la imagen y poniéndola en su contexto adecuado. No solo hay que poner la palabra clave, sino contextualizarla para aportar la máxima información sobre la imagen en un texto compacto.

Por ejemplo, si incluimos en una entrada de blog una foto de una mujer utilizando un ordenador en una oficina, utilizar el alt = “mujer ordenador” no es tan eficiente como un alt = “mujer utiliza un ordenador en su oficina”. Este segundo texto alternativo contiene la palabra clave «mujer ordenador», pero la contextualiza describiendo de forma apropiada la imagen.

Imágenes decorativas

Muchas veces se utilizan imágenes solamente para decorar el texto y que no aportan valor real al contenido. En este tipo de imágenes los desarrolladores de Google recomiendan dejar el texto ALT en blanco, reservando las descripciones solo para aquellas imágenes importantes para el contenido. De esta manera los bots de Google podrán identificar mejor qué imágenes deben posicionar de un sitio web y cuáles son utilizadas solo para mejorar la experiencia visual, pero que no tienen un valor real para el contenido.

No confundir el title con el atributo ALT

Muchas personas tienden a confundir el atributo title de una imagen con el atributo ALT, utilizando el mismo texto en ambos. El atributo title muestra un título para la imagen que se muestra al usuario cuando pasa el ratón por encima de la imagen (mouse over). El atributo title tiene una gran importancia para la accesibilidad del sitio mientras que el título ALT tiene mayor influencia en el posicionamiento web de las imágenes.

El código HTML de una imagen que utiliza los atributos title y ALT sería:

<img src = “imagen.png” title = “Título de la imagen” alt = “Texto descriptivo del contenido de la imagen”>

No repetir los textos alternativos

Es tentador copiar los textos del atributo ALT entre distintas imágenes porque se ahorra mucho tiempo y esfuerzo. Esta práctica no es nada recomendable, ya que la utilidad que hemos visto para el SEO, hace merecedora a cada imagen de su propio texto alternativo.

Este tipo de prácticas es menos recomendable aún en una tienda online donde se suben muchas imágenes similares, por ejemplo, diferentes imágenes de un mismo artículo. Dedicar tiempo y esfuerzo a crear un texto optimizado para cada una de las imágenes tendrá grandes resultados en cuanto a su posicionamiento web, ayudando de forma significativa a incrementar la visibilidad del e-commerce.

Importancia del atributo ALT para SEO

En una imagen el ALT debe siempre incluirse, a no ser que se trate de una imagen que no aporte valor al contenido y se utilice simplemente como elemento llamativo o decorativo.

En el posicionamiento web se busca optimizar todos los elementos internos y que son controlables (SEO on page) e influir en los elementos externos (SEO off page) para conseguir mejores posiciones en las páginas de resultados o SERP de Google. El atributo ALT es el elemento primordial para optimizar las imágenes de un sitio web para su posicionamiento web, y su optimización se encuentra dentro de las distintas técnicas de SEO on page que se pueden aplicar. Es necesario dedicar tiempo a crear textos optimizados que incluyan la palabra clave y describan de forma contextualizada el contenido de las imágenes. De esta forma, los bots de Google podrán comprender mejor su contenido y así las situarán en mejores posiciones en su ranking de imágenes.