Alt text: conoce qué es y la importancia de optimizar tus imágenes

Imagina que estás accediendo a un sitio web y, por alguna razón, tu internet no carga y no aparecen varios contenidos visuales. En su lugar, sólo hay breves descripciones. ¿Reconoces? Estas descripciones son los alt text.

Cuando hablamos de experiencia de usuario, las imágenes son un punto importante tanto para los motores de búsqueda como para las personas que acceden a una página web. ¡Aprende a continuación sobre la importancia de los textos alternativos!

¿Qué es el Alt text? #

Alt Text, en español, significa Texto Alternativo. Es una característica que nos permite describir contenido visual, optimizando la imagen para SEO y también permitiendo que el sitio sea más accesible para todos los usuarios.

El recurso es parte del código HTML de una imagen y, si no se carga correctamente, es la descripción presente en el código que se presentará al usuario. Se ve así en HTML:

<img src="image.jpg" alt="texto alternativo">

¿Cuál es la importancia del alt text para la optimización de imágenes? #

Es fundamental utilizar texto alternativo cuando el objetivo es optimizar imágenes web, principalmente para SEO. Al fin y al cabo, es a través del alt text que los motores de búsqueda tienen más contexto sobre la página a la que acceden, lo que puede ayudar con su clasificación.

Esto se debe a que el robot no “lee” imágenes. Él lee textos. Entonces, completar el alt text de una imagen significa darle al robot una comprensión de lo que representa esa imagen.

¿Qué tan importante es el texto alternativo para el comercio electrónico? #

Hay innumerables formas de buscar un producto, pero una de las más familiares es a través de imágenes, ¿verdad? Incluso es muy común que, al buscar un producto con intención de compra, datos estructurados con la imagen del producto, descripción y precio de compra.

Por tanto, podemos considerar que las imágenes son un gran diferencial para los ecommerce. ¡Cuanto más, mejor! 

Sin embargo, ¿cómo se asegura de que los usuarios encuentren las imágenes de los productos? Haciendo SEO para imágenes, por supuesto. En este sentido, completar el alt text es solo una de las mejores prácticas, pero es lo que permitirá que la imagen (y la página de la que forma parte) se encuentre más fácilmente en Google, por ejemplo.

¿Cómo se relaciona el texto alternativo con la accesibilidad en SEO?#

La experiencia del usuario es uno de los factores de clasificación que más ha mejorado Google. Así, además de ser importante para Google, el texto alternativo permite a cualquier usuario comprender los recursos visuales presentes en una página, incluidos los usuarios que no pueden ver y utilizar lectores de pantalla. De esta forma, convirtiéndola en una página más accesible.

Si una imagen no carga en la página, lo que aparecerá es precisamente el texto alternativo, para que el usuario entienda qué recurso visual debe estar en esa ubicación.

Es decir, los textos alternativos también son indispensables por cuestiones de accesibilidad en la Web. 

¿Cuál es tu recomendación para crear un buen texto alternativo? #

Según las pautas de Google, debemos centrarnos en escribir texto alternativo que sea útil, informativo y que tenga palabras clave utilizadas de manera adecuada y con contexto. Además, es interesante que el texto alternativo contenga pocas palabras.

Mira el siguiente ejemplo:

• Malo (sin texto alternativo): img src=camiseta.jpg
• Malo (demasiadas palabras clave): img src=camiseta / alt=camiseta camisa ropa camisas camisas camisetas
• Bueno: img src=camiseta / alt=camiseta
• Mejor: img src=camiseta / alt=camisa verde con detalles azules

El contenido visual de un sitio debe tener texto alternativo, incluidos vectores o logotipos. 

Sé claro y objetivo#

Ahora bien, si la imagen es un referente para el contenido, intenta que todo sea claro y objetivo. Por ejemplo, en un sitio de noticias hay un artículo que habla de una ONG que ayudó a una comunidad necesitada con ropa y alimentos. Dentro de este contenido tenemos una imagen que muestra a personas de la ONG entregando donaciones a la comunidad, en este caso creamos un alt text con la siguiente descripción: “Responsable de la ONG X entregando donaciones a la comunidad necesitada”.

El texto debe ser simple y directo acerca de lo que trata la figura, sin embargo, cuando la imagen tiene un objetivo más, como trabajar en la palabra clave: “Barcelona” y “Amigos del bien”. En este ejemplo, la palabra “Barcelona” tendría la intención de que Google indexara las noticias de esta región y la palabra “Amigos del bien” sería otro nombre popular para la ONG, como la gente de la región sabe.

¿Cómo haríamos en este caso? La descripción podría ser: “Amigos del bien (ONG X) entrega donaciones a la comunidad necesitada de Barcelona”.

En este caso, la descripción de la imagen será un poco más larga. Sin embargo, no estará desenfocada en describir a qué se refiere la imagen, además de poder trabajar las palabras clave correctamente.

La única preocupación que debe tener es que sea lo más breve y directo posible, no es necesario escribir otro texto explicando toda la imagen, excepto en los casos en que la imagen es una pintura, y es importante crear una descripción explicando todos los rastros de esa pintura, por lo que una descripción más larga es esencial.

Otro punto importante#

Mira el ejemplo:

<a href=”link” title=”Ir a twitter (enlace externo)” target=”_blank”> <img src=”image” alt=”Twitter icon”></a>

En este caso, tenemos la imagen del icono de Twitter dentro de la etiqueta <a> que, al hacer clic, envía a un “enlace externo”, es decir, a otra pestaña del navegador. Por lo tanto, es importante señalar que vamos a otra pestaña, y en el ejemplo anterior, esta señal se pasa en el título de la etiqueta <a> con el término utilizado: “enlace externo”.

Recuerda: ALT siempre debe estar presente en las imágenes que representan el contenido de la página. El título es un atributo complementario para algunas etiquetas HTML y solo debe usarse en los casos en que el contenido del enlace en sí no sea suficiente para describirlo.

¿Qué no hacer en el texto alternativo de una imagen? #

Para no generar una mala experiencia de usuario, Google recomienda evitar demasiadas palabras clave en el texto alternativo. Eso es porque, sobre todo, el texto alternativo es un recurso centrado en la experiencia del usuario y no solo en el SEO.

Si hace eso, corre el riesgo de que tu sitio sea visto como spam, ¿lo ves?

¿Cómo comprobar si hay problemas en el texto alternativo de las imágenes? #

Para verificar problemas relacionados con el texto alternativo, es necesario realizar una auditoría técnica del sitio. Screaming Frog es una excelente opción para cualquiera que busque un rastreador rentable

A través de la auditoría técnica, es posible encontrar los siguientes errores en las imágenes.

Imágenes rotas#

En este caso, son imágenes que fueron eliminadas del servidor del sitio y no fueron encontradas. Por lo tanto, lo que es visible en las páginas para el usuario es solo el texto alternativo (cuando existe). Al encontrar una imagen rota, lo ideal es reemplazarla por otra para no impactar negativamente en la experiencia del usuario.

Imágenes sin texto alternativo#

En la auditoría técnica también se señalan las imágenes que no tienen el alt text. 

En estos casos, basta con buscar manualmente estas imágenes y escribir el texto alternativo para cada una de ellas. Recuerda que además de contribuir a dar contexto a los robots en la página, el texto alternativo es muy importante para la accesibilidad.

¿Listo para aplicar alt text en tus imágenes?#

El texto alternativo es una de las mejores prácticas de SEO que debería estar en la lista de verificación de cada SEO. Esto se debe a que, además de ser simple y fácil de implementar, el alt text tiene un impacto tanto en la experiencia del usuario como en el SEO.

Y, en los casos de ecommerce que tengan muchas imágenes, el alt text es imprescindible. Al fin y al cabo, completar el atributo le dará al robot más contexto sobre esa página, lo que contribuirá a su relevancia entre los resultados de Google.