La etiqueta ALT es fundamental para mejorar el SEO de las imágenes en tu web.
La etiqueta ALT o texto alternativo es un atributo HTML que se coloca en la etiqueta de la imagen.
Veamos cómo usarla, por qué es importante y cómo puedes añadirla a tus fotografías.
¿Qué es la etiqueta ALT en imágenes?
La etiqueta ALT o «alt text» es un tipo de atributo HTML de texto que describe una imagen en concreto.
Cuando una imagen no se muestra o algo falla, se muestra el texto alternativo o etiqueta ALT.
Además, Google puede leer esta etiqueta para identificar mejor el contenido de la imagen.
Es esencial colocar la etiqueta ALT para que aquellos usuarios con problemas visuales puedan identificar el propósito de la imagen.
En HTML se ve así:
<Img src =“carpeta/título.jpg” alt=“texto alternativo”>
- img src: origen de la imagen
- alt: texto alternativo que describe la imagen
Esto sería una imagen básica, luego podrías añadir o modificar el tamaño, la alineación y otros atributos en HTML.
¿Cómo afecta la etiqueta ALT al SEO?
Desde el punto de vista SEO, la etiqueta ALT es un punto clave para optimizar las imágenes.
Junto al propio título, es un buen lugar donde añadir las palabras clave que mejoren tu SEO.
Un buen uso de esta etiqueta permite al crawler de Google interpretar la imagen, ya que aún no es capaz de analizarla.
Además, la mayoría de URLs usan contenido visual como las imágenes, por lo que es conveniente cuidar todos los elementos de las fotografías.
Para ciertas búsquedas una imagen optimizada podrá aparecer en los resultados de búsqueda (SERPs) o bien directamente en la pestaña imágenes de Google.
En cualquier caso, debemos optimizar dicho texto alternativo tanto para los motores de búsqueda como para el usuario.
No es conveniente abusar ni incluir palabras clave poco naturales que no describan la imagen.
Otra cosa muy importante respecto a dicha etiqueta es que al enlazar una imagen, el texto alt actúa como texto ancla.
Esto hace que la navegación del robot de Google sea más ágil y entienda qué va a encontrar en la página de destino al hacer clic en la imagen.
Recomendaciones para añadir la etiqueta alt a una imagen
A la hora de elegir un texto alternativo para tu imagen, debes considerar:
- Que sea detallado y descriptivo
- Que incluya palabras clave relacionadas
- Que sea menor a 125 caracteres, a menos que sea estrictamente necesario para describir la imagen
- Ser natural
El texto alternativo debe describir el propósito de la imagen y si encaja con la descripción, pon la palabra o palabras clave, si no, olvídate de añadirlas.
Personalmente, me gusta detallar el contexto de la imagen e incluir una palabra clave relacionada con la página principal:
- «Guitarrista tocando en un concierto de noche»
- «Músico sosteniendo una guitarra en un concierto de rock»
- «Guitarrero junto a su guitarra en una función nocturna»
Como ves, hay mil formas de describir una misma imagen, así que échale imaginación y sé natural.
Por cierto, puedes incluir comas y mayúsculas en tu etiqueta ALT.
¿Cómo añadir la etiqueta ALT en HTML?
Añadir la etiqueta ALT en HTML es muy sencillo.
En el propio código de la imagen, debes añadir tras el título de la imagen lo siguiente:
- alt= «descripción de la imagen»
No olvides las comillas y puedes dejar espacios dentro de la etiqueta.
Por ejemplo, en la siguiente imagen el código fuente sería:
<img decoding=»async» class=»alignnone wp-image-8373 size-full» src=»https://edumoreno.es/wp-content/uploads/Astronauta-PC-cohete.png» alt=»Astronauta sentado en un cohete con un portátil» width=»975″ height=»250″ srcset=»https://edumoreno.es/wp-content/uploads/Astronauta-PC-cohete.png 975w, https://edumoreno.es/wp-content/uploads/Astronauta-PC-cohete-300×77.png 300w, https://edumoreno.es/wp-content/uploads/Astronauta-PC-cohete-768×197.png 768w» sizes=»(max-width: 975px) 100vw, 975px»>
Al usar WordPress se genera ese código, pero lo que importa es el nombre del archivo:
- src=»https://edumoreno.es/wp-content/uploads/Astronauta-PC-cohete.png«
y la etiqueta alt:
- alt=»Astronauta sentado en un cohete con un portátil«
¿Cómo se pone la etiqueta alt en WordPress?
Para poner la etiqueta ALT en WordPress deberás hacer clic en «editar la imagen» y rellenar el apartado «texto alternativo».
¿Cómo se pone la etiqueta alt en PrestaShop?
Poner la etiqueta alt en PrestaShop también es sencillo, aunque si lo tienes en español, el texto alternativo corresponde a «Leyenda».
Rellena el campo leyenda de la imagen y tu imagen ya tendrá texto alternativo.
¿Es lo mismo la etiqueta alt que el atributo alt?
Para poder rellenar el campo «etiqueta alt» la imagen deberá tener «atributo alt«, así que aunque parecen lo mismo, en realidad no lo son.
Digamos que el atributo alt es el elemento y la etiqueta alt el texto que va dentro del elemento.
Una imagen sin atributo alt no puede tener etiqueta alt, pero una imagen con atributo alt puede no tener etiqueta alt.
¿Cómo sé si una imagen tiene un alt text?
La forma más rápida de comprobar si una imagen tiene alt text es revisar el código fuente.
- Haz clic derecho en la imagen que quieres revisar su texto alternativo y vuelve a hacer clic en Inspeccionar. Ahora a la derecha, mira donde pone alt y lo que viene después del igual es la etiqueta alt.
- De otro modo también es posible hacer clic derecho en cualquier lugar de la página, clic en Ver código fuente de la página y ve al código de la imagen. Busca alt=» con CTRL+F y ve desplazándote hasta dar con la imagen que buscas. Si aparece alt=“”, es que está vacío y no tiene texto alternativo.
Por otro lado, la extensión SEO META 1 clic permite ver el nombre de archivo, título y ALT de cualquier imagen.
Cuando la instales, accede a la pestaña «Images» y baja hasta ver la imagen que buscas.
¿Qué diferencia hay entre la etiqueta ALT y el título?
El título suele coincidir con el nombre que le pongas al archivo de la imagen, aunque se puede modificar y el texto alternativo se rellena después para describir mejor la imagen.
El título de la imagen debe contener la palabra clave y la etiqueta alt palabras relacionadas o sinónimos y ser más detallada.
- Título: coche-rojo
- Alt: Vehículo deportivo rojo descapotable con el capó levantado
La combinación de ambos elementos hará que los usuarios entiendan mejor la imagen y que los buscadores lean fácilmente la información de la fotografía.
