La etiqueta ALT (también llamada alt text o texto alternativo) es un atributo HTML que describe el contenido de una imagen y es un elemento fundamental de la accesibilidad web. En caso de que la imagen esté rota, no cargue correctamente o no se pueda ver (como en el caso de los invidentes) la etiqueta ALT proporciona la información sobre qué se representa en la imagen.

Pero la importancia de la etiqueta ALT va mucho más allá: puede darle un empujón importante a tu SEO (posicionamiento en buscadores). En este post veremos:

Qué es la etiqueta ALT

La etiqueta ALT es un atributo HTML que permite especificar un contenido en formato texto escrito (alternativo) en caso de que la imagen no se muestre. Es decir, es un atributo que ofrece información sobre la imagen. Esto texto alternativo, a priori, no es visible para el usuario; solo lo sería en caso de que la imagen no se cargue correctamente, pero sí lo es para los lectores de pantalla (en el caso de los invidentes) y para los bots, entre los que encontramos a Google.

El formato de la etiqueta ALT de una imagen es el siguiente:

<img src=”imagen.jpg” alt=”aquí ponemos el texto altenativo”>

Por qué el texto ALT es importante para SEO

Mejora la experiencia de usuario

El atributo alt ofrece un texto alternativo a la imagen cuando esta no puede ser leída (bien por error en la carga o bien porque el usuario tiene discapacidad visual). En un entorno en el que Google da cada vez más importancia a la experiencia de usuario, el texto alternativo es un factor importante a tener en cuenta si queremos posicionarnos.

Ofrece información contextual a Google

Google revisa todo el contenido de la página y los atributos alt le ofrecen una ayuda para comprender el contenido visual de la página. Esto es importante porque Google cada vez le da más importancia a todo tipo de material visual (imágenes y videos) ya que considera que enriquecen el contenido y le da dinamismo. De hecho, a menudo las páginas bien posicionadas en las SERPS suelen contener imágenes y videos.

Ayuda a posicionar imágenes

Obviar la importancia de las imágenes en las SERPS sería un error. Tanto en Google imágenes como el buscador las imágenes son una fuente importante de captación de tráfico y el texto alt es una etiqueta de optimización imprescindible para que aparezcan posicionadas (no lo digo yo, lo dice el propio John Müller).

Alt text is extremely helpful for Google Images — if you want your images to rank there. Even if you use lazy-loading, you know which image will be loaded, so get that information in there as early as possible & test what it renders as.

— ?〈link href=//johnmu.com rel=canonical 〉? (@JohnMu) September 4, 2018

Enlazado

¿Pondrías un enlace con el anchor text vacío? Pues, ¿por qué lo vas a hacer en las imágenes? Cuando insertas un enlace en una imagen, el texto alt actúa como lo haría en texto ancla en los textos. Desde el punto de vista SEO, tanto uno como otro actúan como una ayuda para que Google conozca qué es lo que encontrará en la página de destino.

Cómo añadir la etiqueta ALT a una imagen

Añadir etiqueta ALT mediante HTML

Si no estás demasiado familiarizad@ con el lenguaje HTML, ¡tranquil@! existen alternativas sencillas para insertar el texto Alt en los diferentes CMS (a continuación te decimos cómo hacerlo) pero es bueno que conozcas cuál es la sintaxis del código que se insertará, sea cual sea el método que elijas para agregar la etiqueta Alt. El formato es el siguiente:

<img src="url-de-la-imagen"  alt="texto altenativo" style="aquí puedes poner especificaciones de tamaño">

• <img> es la etiqueta HTML que se utiliza para incrustar una imagen en la página.
• src: es la etiqeta que se utiliza para especificar la ruta (URL) de dicha imagen
• alt: a estas alturas ya deberías saber qué es: es el texto alternativo que metemos en una imagen y que se mostrará únicamente como alternativa a la imagen cuando ésta no cargue.
• style: esta etiqueta sirve para especificar estilos de la imagen, como el ancho y el largo; aunque puedes utilizar directamente width: y height: para darle un tamaño específico.

Ejemplo:

<img src="https://onlinezebra.com/wp-content/uploads/2022/09/alt-imagen-wordpress.jpg" alt="como poner etiqueta alt mediante html" width="1100" height="332">

Añadir etiqueta ALT en WordPress

Añadir una etiqueta ALT es fácil, sencillo y para toda la familia. Tan solo tendrás que rellenar el campo «Texto alternativo» que te aparece al subir la imagen. En caso de que quieras hacerlo a posteriori (porque sabemos que aún no te has puesto las pilas con la optimización de imágenes), puedes hacerlo entrando en «Medios» y pinchando sobre la imagen en la que quieras añadir al ALT. Te aparecerá una serie de cuadros que puedes optimizar. Además de el texto alternativo, puedes añadir una leyenda y una descripción a la imagen para terminar de optimizarla.

Añadir etiqueta ALT en Prestashop

En Prestashop no existe un apartado en el que podamos acceder a la galería de medios ni existe un campo «texto alternativo» como en WordPress. ¿Y entonces? No te asustes, se puede hacer. Cuando subas una imagen, puedes rellenar el campo «Leyenda», que coincidirá con el texto Alt.

Entra en cualquier producto y pincha sobre la imagen de portada asociada. Ahí tendrás el campo «Leyenda» ¿A qué esperas para optimizar las imágenes de tus productos? Por si aún no te has decidido a hacer este trabajo, tenemos que decirte que aunque sea tedioso, es fundamental para mejorar el SEO de tu ecommerce: piensa que muchas personas buscan productos a través de imágenes. Y aunque hay otras muchas optimizaciones que debes tener en cuenta, desde luego el texto Alt es una de ellas.

No obstante, si eres de l@s que hace pereza o tienes un ecommerce muy grande, tranquil@, los desarrolladores de módulos de Prestashop están en todo y existen módulos que rellenan automáticamente los Alt de las imágenes.

Cómo ver el ALT de una imagen

Inspector Chrome / Firefox

Una manera sencilla de ver el atl de una imagen concreta es mediante el inspector de Chrome. Sitúa el ratón sobre la imagen, pulsa botón derecho > Inspeccionar. Te aparecerá una ventana en la que podrás ver el código HTML completo del elemento seleccionado (en este caso, la imagen). Dentro de este texto seleccionado (te aparecerá en un color más oscuro), busca el campo at=”…” y ahí lo tienes. Ese es el texto alternativo para esa imagen.

¡Ojo! Si aparece vacío es que la imagen no tiene texto alternativo. En ese caso, ya sabes: ponte manos a la obra y empieza a optimizar.

Extensiones Chrome para ver el el ALT de imágenes

Web Developer

Es, quizá, una de las extensiones de Chrome más completas y útiles para los consultores SEO. Entre las muchas opciones que tiene, encontrarás la de desplegar los atributos de las imágenes. En el menú, entra en “Images”, pulsa en “Display Alt Attributes” y ¡voilà! Se te desplegará un cuadro rojo mostrándote el texto alternativo encima de cada imagen de la página por la que estés navegando.

SEO Meta in 1 Click

Con esta extensión de Chrome podrás ver en una sala pantalla todas los textos alt de las imágenes. En este caso, no se te mostrarán en la página, encima de cada imagen como en Web Developer, sino en una página de la propia extensión.

Cómo optimizar el ALT de una imagen en SEO

Si estás más o menos familiarizad@ con el SEO, sabrás que Google cada vez hace más hincapié en que el contenido sea relevante, descriptivo y útil. Pues bien, en el caso de las imágenes no iba a cambiar de parecer. El texto alt debe ser conciso, descriptivo y relevante. Bla, bla, bla… ¿y eso cómo se consigue?

1. Evita el relleno de palabras clave: las etiquetas alt te ayudan a optimizar la imagen y la página, pero eso no quiere decir que utilices tus alt para poner todas las keywords que quieres posicionar (podría considerarlo keyword stuffing). Inserta las palabras clave relevantes encajadas en el texto de la imagen de manera natural, siempre pensando en que éste debe describir qué muestra la imagen para enriquecer el contenido y ofrecer una buena experiencia al usuario.
2. Sé coherente: en relación con lo anterior, el texto alternativo debe ser coherente con la imagen. Aunque quieras poner una palabra clave, si la imagen no tiene relación con ella ¡no lo hagas! El texto alternativo se mostrará cuando la imagen no se cargue y ayuda a los invidentes a conocer su contenido, por lo que si pones un texto alt, sé honesto.
3. Sé conciso y breve: no uses los atributos alt para escribir un manuscrito. Piensa que hay usuarios invidentes que deben escucharlo y, seguro, que no quieres aburrirlos (y a Google tampoco). Sé breve y evita añadir palabras que no aporten valor como “imagen de”, “foto de”, etc.

Ejemplos de Alt text optimizados

Ejemplo texto alt mal optimizado
Torre Eiffel

Ejemplo texto alt bien optimizado
Torre Eiffel de París vista desde el Trocadero atardeciendo

Ejemplo texto alt mal optimizado
Flores

Ejemplo texto alt bien optimizado
Ramo de rosas blancas para novia

Y tú ¿ya conocías la importancia de de la etiquetas alt para la experiencia de usuario y para SEO? ¿Qué otras etiquetas consideras fundamentales para la optimización de imágenes? ¡Cuéntanoslo en comentarios!