¿Qué es una etiqueta Alt y cómo debe usarla?

¿Qué es una etiqueta alternativa?

Las etiquetas alt se agregan a las imágenes en HTML para describir su contenido y contexto en la página web. La etiqueta alt también aparece dentro del contenedor de la imagen cuando el archivo multimedia no se puede cargar o mostrar correctamente:

Las etiquetas alt ayudan a las personas que usan lectores de pantalla, como aquellas con discapacidad visual, a comprender el contenido de su sitio web. Además, los bots de los motores de búsqueda los utilizan para interpretar sus imágenes al rastrear, indexar y clasificar su sitio. 

Agregada dentro de la etiqueta de la imagen, una etiqueta alt de calidad es una breve descripción que explica no solo lo que presenta la imagen, sino también su propósito en la página. Cuando se usa en código HTML, la etiqueta de imagen completa se parece a esto:

Las etiquetas alt de imagen a veces se confunden con títulos o leyendas de imágenes. Sin embargo, los títulos de las imágenes son un tipo diferente de atributo. Se muestran como texto emergente cuando una persona pasa el mouse sobre una imagen. Por otro lado, los subtítulos aparecen con una imagen, generalmente debajo de ella, y brindan información adicional o detalles al respecto. En circunstancias normales, los visitantes nunca verán las etiquetas alternativas de sus imágenes.

¿Por qué usar etiquetas Alt en las imágenes?

Las etiquetas alt sirven para múltiples propósitos. Si bien no está obligado a usarlos, hay algunos beneficios importantes al hacerlo. Dado que los utilizan tanto los rastreadores de motores de búsqueda como las herramientas de lectura de pantalla, son un componente crítico de la accesibilidad web y la optimización de motores de búsqueda (SEO).

Mejoran la accesibilidad web

Las etiquetas alt ayudan a garantizar que los visitantes puedan acceder y disfrutar del contenido de su sitio web, incluso cuando utilizan tecnología de asistencia o navegadores de solo texto. Cuando alguien con una discapacidad visual visita su sitio web, su lector de pantalla le leerá el texto de la página. Cuando llega a una imagen, utilizará la etiqueta alt para describir qué es esa imagen.

Si falta la etiqueta alt, el lector de pantalla puede leer el nombre del archivo de imagen en su lugar. Esto no solo suele ser ineficaz para explicar correctamente la imagen, sino que también puede ser confuso y perturbador, especialmente si el nombre del archivo no estaba optimizado para SEO.

En algunos casos, como cuando dejas el campo de etiqueta alt de una imagen vacío en WordPress, el lector de pantalla omitirá esa imagen por completo. Suponiendo que las imágenes que incluye en sus páginas web tienen un propósito, esta ausencia significa que el visitante no está obteniendo el valor completo o la experiencia que pretendía al consumir su contenido.

Pueden impulsar su clasificación en los motores de búsqueda

Las etiquetas alternativas de imagen pueden facilitarle la clasificación de las palabras clave que está tratando de orientar. Los robots de los motores de búsqueda son inteligentes, pero no pueden interpretar ni comprender los aspectos visuales de una imagen de la misma manera que los humanos.

Los atributos Alt ofrecen una alternativa basada en texto para traducir imágenes y, más específicamente, para incorporar palabras clave relevantes. Las descripciones textuales que contienen palabras clave de destino pueden aumentar sus posibilidades de obtener una clasificación alta en las búsquedas de imágenes.

Para enfatizar el importante papel que juegan las imágenes (y, a su vez, las etiquetas alt) en el SEO, considere la página de resultados del motor de búsqueda ( SERP ) para «ropa de cama tamaño king»:

La primera página no solo produce resultados basados ​​en texto; también hay muchos resultados de imágenes. Cuando se optimizan y se usan correctamente, las etiquetas alt pueden ayudar a impulsar su SEO y generar imágenes con hipervínculos en las que se puede hacer clic para que aparezcan en búsquedas como estas. Esto es particularmente beneficioso para los sitios de comercio electrónico y las páginas de destino.

Cómo agregar una etiqueta alternativa de imagen en WordPress

Una vez que comprenda los beneficios de usar atributos alternativos de imagen en su sitio web, es hora de aprender cómo hacerlo. Afortunadamente, WordPress hace que esta tarea sea increíblemente sencilla y sencilla.

Para agregar una etiqueta alternativa de imagen en WordPress, inicie sesión en su panel de administración y navegue a la página o publicación a la que desea agregar su imagen. Dentro del editor de WordPress , haz clic en el ícono más y selecciona el bloque Imagen :

A continuación, cargue su imagen o seleccione una de su biblioteca multimedia. Una vez que inserte la imagen en el bloque, el panel de configuración de la imagen se abrirá en la barra lateral a la derecha. Puede ingresar su descripción en el cuadro de texto Alt :

Cuando haya terminado, guarde los cambios. También puede hacer esto para las imágenes existentes. Por ejemplo, si desea actualizar una imagen en una publicación que ya está publicada en su sitio, simplemente haga clic en la imagen e ingrese su nueva etiqueta alternativa en la barra lateral.

Cómo agregar una etiqueta alternativa de imagen en HTML

Cuando usa WordPress u otro CMS que incluye un módulo para agregar y editar etiquetas alt, automáticamente agregará el código HTML por usted. Sin embargo, si desea agregar el código usted mismo, puede hacerlo fácilmente.

Para agregar una etiqueta alternativa HTML en WordPress , haga clic en el bloque de imagen correspondiente . En la barra de herramientas del bloque, seleccione el botón con los tres puntos verticales y elija Editar como HTML :

El código HTML mostrará la etiqueta de la imagen. Notarás que el atributo alt está vacío. Coloque su texto entre comillas:

Cuando haya terminado, haga clic en el botón Vista previa para volver al editor visual y luego guarde los cambios. Puede usar esta misma sintaxis y formato para editar la etiqueta de imagen HTML de cualquier archivo.

Sugerencias y prácticas recomendadas para escribir etiquetas alternativas de imágenes

Cuando crea sus etiquetas alternativas, hay algunos puntos clave que debe tener en cuenta. Cumplir con estas mejores prácticas ayudará a que sus etiquetas alternativas sean más efectivas:

• Sea específico y descriptivo. El propósito de las etiquetas alt es describir la imagen, por lo que debe ser lo más específico posible. Si no está seguro de si su descripción es suficiente, considere qué imagen visualizaría si solo viera esa línea de texto.
• Que sea breve. Si bien desea ser detallado, tampoco necesita hacer que su etiqueta alt sea un párrafo largo (o incluso una oración completa). Apunta a alrededor de 100 a 125 caracteres como máximo.
• No seas redundante. Para aprovechar al máximo su etiqueta alternativa, no querrá incluir palabras innecesarias. Esto incluye agregar «Imagen de» o «Imagen de» antes de la descripción. Estos elementos son innecesarios porque ya están implícitos.
• Incorpore palabras clave relevantes de forma natural . Considere sus palabras clave objetivo y, cuando sea posible, incorpórelas orgánicamente dentro del contexto de la página. Esto es más fácil cuando utiliza imágenes muy relevantes que se corresponden con el texto.
• Evite el relleno de palabras clave. Si bien el uso de palabras clave en sus etiquetas alternativas puede mejorar el SEO, tenga cuidado de no exagerar. El relleno de palabras clave en realidad puede dañar su SEO y producir una experiencia de usuario deficiente.
• No use imágenes en lugar de texto. El propósito principal de una etiqueta alt es proporcionar contexto textual para máquinas que no pueden procesar e interpretar los elementos visuales de una página. Por lo tanto, no tiene sentido usar texto dentro de las imágenes, particularmente para los encabezados y títulos de las páginas.

Cuando cree etiquetas alternativas para sus imágenes, recuerde siempre que el objetivo es describir la imagen para aquellos que no puedan verla. Si bien tener en cuenta el SEO y las palabras clave es definitivamente una buena idea, escribir sus etiquetas alternativas teniendo en cuenta a los usuarios reales puede ayudar a generar resultados más positivos.

Conclusión

Las imágenes pueden ayudar a mejorar la apariencia de sus páginas web y hacerlas más interesantes, informativas y atractivas. Sin embargo, para maximizar su valor, es mejor complementarlos con etiquetas alt. Estas explicaciones breves pero descriptivas brindan contexto tanto para los usuarios como para los motores de búsqueda. Las etiquetas alternativas de imagen ayudan a mejorar la experiencia del usuario, mejorar la accesibilidad y facilitar la clasificación de palabras clave relevantes.

¿Tiene alguna otra pregunta sobre qué es una etiqueta alt o cómo agregar una en WordPress? ¡Háganos saber en la sección de comentarios!

Imagen destacada de Honza Hruby / shutterstock.com