Etiqueta Alt: ¿qué es y cómo usarla?

Los motores de búsqueda no pueden interpretar las imágenes como lo hacen con el texto. Para entender su contenido, dependen de elementos como el atributo Alt o texto alternativo, que describe la imagen en palabras.

Este atributo cumple una doble función: por un lado, mejora la accesibilidad al permitir que los lectores de pantalla transmitan la información visual a personas con discapacidad visual. Por otro, ayuda a los buscadores a indexar correctamente las imágenes, lo que puede influir en el SEO.

En este artículo, nos centraremos en qué es la etiqueta Alt, por qué es importante y cómo escribir un texto alternativo efectivo. Si buscas una guía más general sobre la optimización de imágenes para SEO, te recomiendo leer mi otro artículo sobre SEO para imágenes.

¿Qué es la etiqueta Alt?

La etiqueta Alt o atributo Alt es un texto alternativo que se añade a las imágenes en una página web para describir su contenido. Su función principal es proporcionar información cuando la imagen no puede mostrarse, ya sea por un error de carga o porque el usuario utiliza un lector de pantalla. Aunque se le llama “etiqueta”, en realidad es un atributo del elemento <img> en HTML.

Su uso no solo facilita la accesibilidad, sino que también ayuda a los motores de búsqueda a comprender el contexto de la imagen. A diferencia del contenido visible en una web, los buscadores no pueden interpretar directamente una imagen, por lo que dependen de atributos como el Alt Text para determinar su relevancia en una búsqueda.

Es importante no confundir el atributo Alt con el atributo title. Mientras que el Alt Text describe el contenido de la imagen con fines de accesibilidad y SEO, el title es un texto emergente que aparece al pasar el cursor sobre la imagen en algunos navegadores. Aunque ambos pueden coexistir, el Alt es el más relevante en términos de optimización y accesibilidad.

Aquí puedes ver un ejemplo de uso de la etiqueta Alt en HTML:

<img src="producto-zapatillas.jpg" alt="Zapatillas deportivas blancas con detalles azules" />

Este texto, que podría encontrarse dentro de un e-commerce de ropa deportiva, describe claramente la imagen y permite que los motores de búsqueda y los usuarios con discapacidad visual entiendan su contenido.

¿Por qué es importante el texto Alt para el SEO?

El atributo Alt desempeña un papel clave en la optimización para buscadores, ya que ayuda a los motores de búsqueda a interpretar el contenido de las imágenes. Aunque Google ha mejorado su capacidad para reconocer elementos visuales, sigue dependiendo de descripciones textuales para indexarlas correctamente. Un buen Alt Text facilita esta tarea y puede mejorar la visibilidad de la web en los resultados de búsqueda de imágenes.

Además de la indexación, el texto alternativo influye en la experiencia del usuario. Google prioriza sitios accesibles y bien estructurados, y el uso adecuado del Alt contribuye a una mejor usabilidad. Una página que ofrece descripciones precisas en sus imágenes es más inclusiva y puede retener mejor a los visitantes, lo que se traduce en una menor tasa de rebote y una mayor interacción.

Otro aspecto clave es el tráfico de Google Imágenes. Si una imagen tiene un Alt Text relevante y optimizado, es más probable que aparezca en los resultados de búsqueda de imágenes, generando visitas adicionales a la web. Esto es especialmente útil para negocios de e-commerce, blogs de contenido visual y cualquier sitio que dependa del tráfico orgánico para captar usuarios.

Importancia del atributo Alt en accesibilidad y usabilidad

El atributo Alt no solo es importante para el SEO, sino que también desempeña un papel fundamental en la accesibilidad web. Su función principal es proporcionar una descripción textual de las imágenes para que los lectores de pantalla puedan transmitir esa información a usuarios con discapacidad visual. Sin un texto alternativo adecuado, estos usuarios perderían una parte del contenido, lo que afectaría su experiencia de navegación.

Desde el punto de vista de la usabilidad, el Alt Text también mejora la experiencia general del usuario. Si una imagen no se carga correctamente debido a un error en el servidor o a una conexión lenta, el texto alternativo se mostrará en su lugar, brindando contexto sobre lo que debería estar allí. Esto es especialmente útil en páginas donde las imágenes tienen un propósito informativo o funcional, como botones, diagramas o infografías.

En términos de SEO, la accesibilidad es un factor cada vez más relevante. Google ha insistido en la importancia de la experiencia del usuario como criterio de posicionamiento, y una web accesible suele tener mejores métricas de interacción. Optimizar el Alt Text no solo ayuda a los buscadores a entender el contenido, sino que también hace que la web sea más inclusiva y fácil de usar para todos los visitantes.

Consejos para redactar el texto de la etiqueta Alt

Escribir un Alt Text efectivo no se trata solo de agregar palabras clave, sino de describir la imagen de manera clara y útil. Un buen texto alternativo debe ser conciso, relevante y aportar contexto sin ser excesivamente largo. A continuación, te muestro algunos consejos para redactarlo correctamente:

• Describe la imagen con precisión: Piensa en cómo explicarías la imagen a alguien que no puede verla. Por ejemplo, en lugar de escribir “perro”, un mejor Alt Text sería “Perro labrador jugando con una pelota en el parque”.
• Sé breve pero informativo: No es necesario escribir una descripción extensa. En la mayoría de los casos, una frase corta es suficiente.
• Incluye palabras clave de forma natural: Si la imagen es relevante para una búsqueda específica, es útil incluir una palabra clave, pero sin forzarla. Un mal ejemplo sería: “Zapatos deportivos Nike running oferta baratos tienda online”.
• Usa Alt Text solo cuando sea necesario: No todas las imágenes necesitan texto alternativo. Si la imagen es meramente decorativa, lo mejor es dejar el atributo vacío (alt=””) para que los lectores de pantalla la ignoren.
• Evita comenzar con “Imagen de…” o “Foto de…”: Google y los lectores de pantalla ya saben que es una imagen, así que no es necesario repetirlo.
• Relleno de palabras clave: Incluir demasiadas palabras clave puede hacer que el Alt Text parezca forzado y poco útil, además de ser penalizado por los motores de búsqueda.
• Evitar Alt Text demasiado genérico: Usar términos vagos como “imagen bonita”, “logo”, o “producto” no aporta valor ni contexto.

Siguiendo estas recomendaciones, puedes mejorar la accesibilidad de tu web y optimizar el posicionamiento de tus imágenes en buscadores.

¿Cómo añadir la etiqueta Alt a una imagen correctamente?

El atributo Alt se puede añadir a una imagen de distintas maneras, dependiendo del sistema que utilices para gestionar tu contenido. A continuación, te muestro cómo hacerlo en HTML, WordPress y otras plataformas comunes.

Añadir Alt Text en HTML

Si trabajas directamente con el código HTML de tu página, puedes incluir la etiqueta Alt de manera manual en la etiqueta <img>. Esto se hace agregando el atributo alt dentro del código de la imagen, lo que permite a los motores de búsqueda y a los usuarios con discapacidad visual comprender de qué trata la imagen.

Ejemplo de código HTML:

<img src="galeria-montaña.jpg" alt="Vista panorámica de la montaña durante el amanecer, con niebla en el valle" />

En este caso, la descripción de la imagen es clara y ofrece un contexto visual relevante. Recuerda que el texto alternativo debe ser específico y describir de manera precisa lo que muestra la imagen, evitando incluir palabras clave de manera artificial. Además, no es necesario hacer una descripción extremadamente detallada, pero sí lo suficiente como para que el usuario que no pueda ver la imagen tenga una idea clara de su contenido.

Añadir Alt Text en WordPress

Si usas WordPress, añadir texto alternativo es un proceso sencillo que se realiza desde la Biblioteca de medios. Cuando subes una imagen, WordPress te permite ingresar un texto alternativo directamente en el panel de edición de la imagen. Esto asegura que, al insertar la imagen en cualquier entrada o página, el Alt Text se añada de manera automática al código HTML.

Pasos para agregar Alt en WordPress:

1. Ve a Medios y selecciona o sube una nueva imagen.
2. En la sección de detalles de la imagen, verás un campo llamado Texto alternativo.
3. Escribe una descripción clara de lo que aparece en la imagen.
4. Haz clic en Actualizar para guardar la descripción.

Este proceso es útil porque garantiza que todas las imágenes en tu sitio estén correctamente optimizadas sin tener que intervenir directamente en el código HTML.

Añadir Alt Text en otras plataformas o CMS

Las principales plataformas de comercio electrónico y CMS también permiten añadir fácilmente el atributo Alt a las imágenes, lo cual es crucial para el SEO y la accesibilidad. A continuación, te muestro cómo hacerlo en algunas de las plataformas más populares.

• Shopify: En Shopify, cuando subes una imagen a un producto, puedes acceder a la sección de “Detalles del producto” y agregar el texto alternativo en el campo correspondiente. Este campo se encuentra dentro de las opciones de imagen para cada producto. Es recomendable que cada imagen de producto tenga un Alt Text único que describa el producto de manera precisa.
• Wix: En Wix, puedes agregar el texto alternativo a una imagen seleccionando la imagen en el editor, y luego editando las opciones de imagen. En el panel de configuración, encontrarás el campo Texto alternativo, donde deberás ingresar una descripción clara.
• Prestashop: En Prestashop, puedes asignar texto alternativo a las imágenes de productos desde la ficha de cada producto. Al subir una imagen en la galería de imágenes del producto, se te dará la opción de escribir un Alt Text para mejorar la accesibilidad y el SEO.
• Magento: Al igual que Prestashop, en Magento puedes añadir texto alternativo a las imágenes de productos desde la sección de gestión de productos. Esto se hace en el campo de descripción de cada imagen dentro de la interfaz de administración de Magento.
• Squarespace: En Squarespace, el proceso de añadir Alt Text es automático en muchas ocasiones, pero también puedes personalizarlo desde la configuración de cada imagen, ya sea de productos, galerías o imágenes insertadas en el contenido. Al igual que en otras plataformas, es crucial que las imágenes tengan descripciones claras para mejorar la accesibilidad.

Aunque el proceso varía ligeramente entre plataformas, el objetivo sigue siendo el mismo: proporcionar una descripción útil y relevante de las imágenes para los motores de búsqueda y los usuarios, mejorando la experiencia de navegación para todos.

Herramientas para visualizar y analizar los Alt Text

Existen diversas herramientas que te permiten revisar y optimizar el uso del texto alternativo en tu sitio web. Estas herramientas no solo te ayudarán a asegurarte de que todas las imágenes tengan el atributo Alt correctamente implementado, sino que también pueden ofrecerte recomendaciones sobre cómo mejorar su efectividad en términos de SEO y accesibilidad.

Herramientas enfocadas en SEO

Las herramientas de SEO, como Screaming Frog SEO Spider, Ahrefs, y SEMrush, permiten rastrear todas las páginas de tu sitio web y verificar si las imágenes cuentan con el atributo Alt. Estas herramientas realizan un análisis exhaustivo y te ofrecen un informe detallado sobre las imágenes que faltan en este aspecto, lo que facilita la corrección masiva de posibles errores.

• Screaming Frog SEO Spider: Esta herramienta te permite rastrear las imágenes en tu sitio y revisar los textos alternativos. Puedes exportar los resultados a un archivo CSV para revisar las imágenes que no tienen texto Alt o aquellas que lo tienen pero no son suficientemente descriptivas.
• Ahrefs y SEMrush: Estas herramientas de SEO también realizan auditorías de imágenes y proporcionan recomendaciones sobre cómo mejorar la optimización de las imágenes en tu web, incluyendo la implementación del texto alternativo.

Accesibilidad web: evaluadores y validadores

El aspecto de la accesibilidad es clave cuando hablamos de texto Alt. Existen diversas herramientas orientadas a la validación de accesibilidad que permiten comprobar si tu sitio web es accesible para personas con discapacidades visuales. Estas herramientas te indican si has utilizado correctamente los Alt Texts y otros atributos relacionados con la accesibilidad.

• WAVE (Web Accessibility Evaluation Tool): WAVE es una herramienta gratuita que analiza tu página web y detecta problemas de accesibilidad, incluyendo las imágenes sin texto alternativo. Puedes ingresar la URL de tu página, y WAVE te indicará qué imágenes requieren un texto alternativo.
• axe Accessibility Checker: Este complemento para Google Chrome evalúa la accesibilidad de tu página y proporciona información detallada sobre problemas relacionados con imágenes y otros elementos de la web. Es especialmente útil para desarrolladores y diseñadores web que buscan mejorar la accesibilidad de su sitio.
• Google Lighthouse: Google Lighthouse es una herramienta automatizada que proporciona auditorías de rendimiento, accesibilidad y SEO de tu sitio web. Al ejecutar una auditoría de accesibilidad, te indicará si alguna imagen en tu página web no tiene texto alternativo o si el texto Alt utilizado no es adecuado.

Estas herramientas te permiten gestionar tanto la parte técnica como la de contenido, asegurando que las imágenes en tu página no solo sean accesibles, sino que también estén optimizadas para SEO. Implementar un control adecuado de los Alt Texts es una forma sencilla y efectiva de mejorar tanto la accesibilidad como el posicionamiento en los motores de búsqueda.

En resumen, la etiqueta Alt es esencial para mejorar tanto la accesibilidad como el SEO de tu sitio web. Al utilizar un texto alternativo descriptivo y relevante, no solo ayudas a los motores de búsqueda a comprender mejor el contenido de tus imágenes, sino que también facilitas la navegación a usuarios con discapacidades visuales. Asegúrate de aplicar buenas prácticas y utilizar herramientas que te permitan auditar y optimizar el uso del Alt Text en tu web para obtener los mejores resultados en términos de usabilidad y posicionamiento.