¿Qué es una etiqueta Alt y cómo debes 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 imágenes cuando el archivo multimedia no se puede cargar o mostrar correctamente:

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

Agregada dentro de la etiqueta de la imagen, una etiqueta alternativa 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 ve así:

Las etiquetas alt de imagen a veces se confunden con títulos o subtítulos 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 proporcionan información adicional o detalles al respecto. En circunstancias normales, los visitantes nunca verán las etiquetas alt de sus imágenes.

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

Las etiquetas Alt tienen múltiples propósitos. Si bien no es obligatorio usarlos, existen 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 discapacidad visual visita su sitio web, su lector de pantalla le leerá el texto de la página. Cuando llega a una imagen, usará 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. Esto no solo suele ser ineficaz para explicar adecuadamente la imagen, sino que también puede ser confuso y perjudicial, especialmente si el nombre del archivo no está optimizado para SEO.

En algunos casos, como cuando deja el campo de etiqueta alternativa 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 total o la experiencia que pretendía al consumir su contenido.

Pueden aumentar su ranking 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 y 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 objetivo 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 «camas tamaño king»:

La primera página no solo produce resultados basados ​​en texto; También hay muchos resultados de imagen. Cuando se optimizan y se usan correctamente, las etiquetas alt pueden ayudarlo a impulsar su SEO y generar imágenes con hipervínculos y cliqueables 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 los atributos alt de la imagen en su sitio web, es hora de aprender cómo hacerlo. Afortunadamente, WordPress hace que esta tarea sea increíblemente sencilla y simple.

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 , haga clic en el ícono más y seleccione el bloque Imagen :

A continuación, suba su imagen o seleccione una de su Biblioteca de medios. Una vez que inserte la imagen en el bloque, el panel de configuración de 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 sus cambios. También puede hacer esto para 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 alt en la barra lateral.

Cómo agregar una etiqueta Alt 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 HTML de etiqueta alternativa en WordPress , haga clic en el bloque de imagen correspondiente . En la barra de herramientas de 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.

Consejos y mejores prácticas para escribir etiquetas alternativas de imagen

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

• Sé específico y descriptivo. El propósito de las etiquetas alt es describir la imagen, por lo que desea 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). Apunte alrededor de 100 a 125 caracteres como máximo.
• No seas redundante. Para aprovechar al máximo su etiqueta alt, no desea 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.
• Incorporar 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 usa imágenes altamente relevantes que se corresponden con el texto.
• Evite el relleno de palabras clave. Si bien el uso de palabras clave en sus etiquetas alt puede mejorar el SEO, tenga cuidado de no exagerar. El relleno de palabras clave 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 en una página. Por lo tanto, no tiene sentido usar texto dentro de las imágenes, particularmente para sus títulos y títulos de página.

Al crear etiquetas alt para sus imágenes, recuerde siempre que el objetivo es describir la imagen a aquellos que no puedan verla. Si bien tener en cuenta el SEO y las palabras clave es definitivamente una idea inteligente, escribir sus etiquetas alt con usuarios reales en mente 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 proporcionan contexto tanto para los usuarios como para los motores de búsqueda. Las etiquetas alt 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