Atributo ALT en una imagen: qué es y para que sirve
El texto alternativo (etiqueta ALT HTML) ayuda a nuestro posicionamiento orgánico al mejorar la accesibilidad y comprensión de las imágenes de nuestro sitio web. Pero ¡cuidado! que la podemos liar parda pardísima si los sobre optimizamos y/o los rellenamos cuando no toca.
Para evitar que caigas en esta desgracia tan cruel aquí te explico todo lo que debes saber sobre la etiqueta ALT text y cómo rellenarla correctamente.
Qué significa el atributo ALT en una imagen
El atributo "alt" o texto alternativo en una imagen es una descripción que aparece en el código HTML de nuestros sitios web. Su propósito principal es proporcionar un texto que describa la imagen en caso de que no se cargue o para usuarios con discapacidades visuales que utilizan lectores de pantalla.
A nivel de código HTML, esta etiqueta presenta el siguiente formato:
<Img src ="/ruta-imagen.jpg" alt=“Texto alternativo”>
¿El ALT html para que sirve?
Ya sabemos que el ALT sirve para describir las imágenes pero ¿sabías que también actúa como anchor en caso de que la imagen contenga un enlace? Es más, sabías que es el texto que aparece en los carruseles de imágenes que muestra Google en las SERPs.
Así es, y es que, este atributo HTML cumple varias funciones:
- Accesibilidad para usuarios con discapacidades visuales: como te he comentado al principio, la función principal del texto alternativo es proporcionar una descripción de las imágenes para usuarios que utilizan lectores de pantalla. Esto les permite entender el contenido visual de una página, lo que es fundamental para cumplir con los estándares de accesibilidad web.
- Mejora del SEO: el atributo «alt» ayuda a los motores de búsqueda a entender el contenido de las imágenes, ya que los algoritmos de Google no pueden «ver» las imágenes como los humanos. Un buen texto alternativo permite indexar mejor las imágenes y ayuda a que tu sitio aparezca en resultados de búsqueda de imágenes, lo que incrementa el tráfico.
- Sustitución en caso de que las imágenes no se carguen: si por alguna razón la imagen no se carga (debido a problemas de conexión, errores en la página, etc.), el texto alternativo aparece en su lugar, proporcionando contexto y una mejor experiencia de usuario.
- Mejora de la experiencia en dispositivos de búsqueda por voz: en la búsqueda por voz, los motores de búsqueda a menudo se basan en el texto alternativo para comprender mejor el contexto de la página, lo que puede hacer que el contenido de tu sitio sea más accesible para este tipo de consultas.
- Soporte para imágenes usadas como enlaces: en el caso de imágenes que son enlazadas, el texto alternativo actúa como anchor text. Si optimizamos este texto, ayudaremos a trabajar el Off Page de nuestro sitio web.
Como identificar el atributo ALT
El texto alternativo es un atributo no visible a simple vista en la página que estés navegando. No obstante, existen varias formas con las que podemos ver el contenido de dicha etiqueta.
La más rápida de todas es inspeccionando la imagen con el botón derecho y buscando la etiqueta ALT HTML:
Otras opción es analizar el código fuente y buscar la ruta de nuestra imagen para encontrar el texto alternativo a su lado.
Así mismo, también puedes usar extensiones de chrome para SEO, como Web Developer. Basta con seleccionar la opción "Display ALT Attributes" para que aparezca en rojo dicho campo.
No sé tu, pero si el texto ALT es un factor de posicionamiento que no sé ve de manera directa, lo primero que se me viene a la cabeza es meter palabras clave como un loco para optimizar el contenido de cara a Google. Pero esto no debería ser así (ya no estamos en el año 2017), te cuento el por qué en el siguiente punto.
Cuando usar la etiqueta ALT text
Dado que el texto alternativo es un factor de posicionamiento, cabe pensar que siempre debemos optimizarlo pero lo cierto es que no. Y es que, uno de los puntos que me sorprendió el libro de SEO Avanzado de Fernando Maciá es aquel en el que explica que no debemos rellenar la etiqueta ALT en iconos o cualquier otro elemento gráfico con meros fines estéticos.
Algo que, si lo piensas, tiene su sentido ya que, el texto alternativo debe describir una ilustración. Pero aprovechar este campo en el icono de un tick verde (por ejemplo) para meter keywords no está dentro de la lógica y el objetivo de este campo.
Así pues, debemos rellenar este atributo solo en aquellas imágenes que realmente contengan información visual correspondiente con nuestra web. Es decir, siempre debes incluir un texto alternativo cuando la imagen proporciona información relevante. Por ejemplo, una infografía, un gráfico, o una imagen relacionada con el contenido del artículo.
Así mismo, en sitios de comercio electrónico, es crucial agregar textos alternativos descriptivos a las imágenes de productos. Esto no solo mejora el SEO de la página, sino que también permite a los motores de búsqueda indexar correctamente los productos, haciendo que aparezcan en resultados de búsqueda relevantes.
Te enseño a auditar tu web con Screaming Frog, para que identifiques y soluciones los problemas que están afectando tu SEO.
¡Comienza mi curso de Screaming Frog gratis hoy!
Como poner el atributo ALT a una imagen
Aunque el texto alternativo es una etiqueta HTML no tienes por qué ponerte a picar código para rellenarla. Y es que, los CMSs ya te permiten rellenar este atributo fácilmente. Por ejemplo, en WordPress podemo rellenar este campo al subir una imagen a su biblioteca de medios. Para ello, solo tienes que ir al menu lateral derecho y completar dicho atributo.
Así mismo, desde el propio Gutenberg, seleccionando una imagen puedes rellenar el ALT tag:
Pero esto no es así.
Si tienes una imagen en 2 entradas o más, puedes cambiar el texto alternativo en cada entrada sin que afecte a las demás. Es decir, en cada entrada o página puedes tener esa imagen pero cada una con su texto ALT.
Cómo escribir un buen texto ALT
Llegados a este punto ya sabemos como rellenar la etiqueta ALT en imágenes pero, insisto una vez más, en que no lo uses para meter solo palabras clave robóticas. ¡Ojo! no digo que de vez en cuando alguna "se cuele", digo que aquí el objetivo es describir las imágenes, pensando en la accesibilidad (aunque sin dejar de lado el SEO).
Para ello, aquí te dejo un par de consejos para optimizar el texto ALT de imágenes:
- Sé descriptivo y preciso: debes ser específico sin caer en detalles irrelevantes. Por ejemplo, en lugar de «zapato», un buen texto sería «zapato deportivo azul para correr».
- Mantén el texto breve: los textos ALT deben ser concisos. Lo ideal es que no superen los 125 caracteres, ya que los lectores de pantalla tienden a truncar descripciones más largas.
- Evita frases innecesarias: no es necesario incluir expresiones como «imagen de» o «foto de» en el texto ALT, ya que esto solo añade redundancia. Los motores de búsqueda y los lectores de pantalla ya saben que se trata de una imagen, por mucho que algunos periódicos insistan en ello.
- Adapta el texto al contexto: asegúrate de que el texto ALT esté alineado con el contenido en el que la imagen está inserta. Esto no solo mejora la experiencia del usuario, sino que también ayuda a los motores de búsqueda a comprender mejor la relación entre la imagen y el texto
- Usa palabras clave de manera natural: aunque es recomendable incluir palabras clave relevantes en el texto ALT, esto solo debe hacerse si encajan de manera orgánica en la descripción. Evita el relleno de palabras clave, ya que Google lo penaliza como una mala práctica de SEO.
Vamos a bajar todo esto a tierra con un par de ejemplos buenos y malos.
Tengo un artículo en el que explico cómo optimizar los ingresos de AdSense en WordPress, con la siguiente imagen de abajo.
A través de esta ilustración, explico la manera de encontrar los bloques que mejor funcionan con esta plataforma.
El nombre del informe es "Bloque de anuncios" por lo que podría escribir esto en mi texto alternativo pero se queda un poco escaso. Claramente tenemos que indicar que es un informe, que es de AdSense y si ya metemos la palabra "mejores bloques", mejor que mejor ya que lo optimizamos de cara al SEO.
Así pues, podemos crear el texto alternativo "Informe de mejores bloques de anuncios en AdSense" que cubra tanto la parte de accesibilidad como la del posicionamiento orgánico.
ALT vacíos
Ahora que ya somos conscientes de la importancia del atributo ALT text, tenemos que asegurarnos de que lo tenemos relleno cuando aplique.
Y para ello, bastante con hacer una pequeña auditoría SEO con Screaming Frog de 3 minutos. Solo tenemos que introducir nuestro dominio y una vez escaneado, tenemos que ir a la sección Imágenes y seleccionar el filtro de Falta texto ALT.
Y con esto ya hemos terminado de ver el ALT text, ahora que ya sabes de su importancia y cómo optimizarlo te toca remangarte bien y asegurarte que tu web tiene bien implementada esta etiqueta.
¿Quieres aprender más sobre la optimización de tus fotos? échale un ojo a mi guía de SEO para imágenes y déjalas finas finas.
Si has llegado hasta aquí… ¡Apúntate a mi Newsletter y sigue aprendiendo cada semana sobre SEO!