¿Qué son los atributos alt y los atributos de título?

Esta es una etiqueta de imagen HTML completa:

<img src=“image.jpg” alt=“image description” title=“image tooltip”>

Los atributos alt y title de una imagen se denominan comúnmente etiqueta alt o texto alt y etiqueta de título. Pero técnicamente, no son etiquetas, son atributos. El texto alternativo describe lo que hay en la imagen y la función de la imagen en la página. Por lo tanto, si está utilizando una imagen como botón para comprar el producto X, el texto alternativo debería decir: "botón para comprar el producto X".

La altetiqueta es utilizada por lectores de pantalla, que son navegadores utilizados por personas ciegas y con discapacidad visual. Estos lectores de pantalla les dicen qué hay en la imagen leyendo la altetiqueta.

 El titleatributo se muestra como información sobre herramientas cuando se desplaza sobre el elemento. Entonces, en el caso de un botón de imagen, el título de la imagen podría contener una llamada a la acción adicional. Sin embargo, esta no es una buena práctica.

Cada imagen  debe  tener un texto alternativo. No solo para   fines de SEO , sino también porque las personas ciegas y con discapacidad visual no sabrán de qué se trata la imagen. 

No se  requiere un atributo de título  . Es más, la mayoría de las veces no tiene sentido agregarlo. Solo están disponibles para usuarios de mouse (u otros dispositivos señaladores) y el único caso en el que titlese requiere el atributo para la accesibilidad es en las etiquetas <iframe>y <frame>.

Si la información transmitida por el titleatributo es relevante, considere hacerla disponible en otro lugar, en texto sin formato y si no es relevante, considere eliminar el titleatributo por completo.

¿Qué es el Atributo ALT?

El atributo ALT o etiqueta ALT es un atributo HTML para un texto que describe una imagen. El atributo ALT se coloca directamente en la etiqueta de la imagen. Si una imagen no se puede mostrar por alguna razón, el atributo ALT proporciona texto alternativo para mostrar en su lugar.

¿Para qué sirve el Atributo ALT?

Los motores de búsqueda utilizan este atributo para identificar el contenido de la imagen, ya que los archivos de imagen generalmente no pueden ser leídos por los crawlers de los motores de búsqueda. También es útil proporcionar un texto alternativo para los usuarios y específicamente para los usuarios con discapacidad visual que tienen sitios web leídos por programas de lectura.

Razones por las que las imágenes no se muestran correctamente

Puede haber varias razones por las que las imágenes no se muestran.

• Debido a un navegador antiguo: ciertos tipos de navegadores no pueden interpretar ciertos archivos de imagen.
• Protección de tracking: Algunos navegadores, como Internet Explorer, ofrecen una protección especial de rastreo; cuando se activa, algunas imágenes no se muestran correctamente.
• La visualización de la imagen está desactivada: Los navegadores como Mozilla Firefox ofrecen a los usuarios la opción de no mostrar archivos de imagen.
• Enlace del defecto al archivo de imagen: Si el navegador no puede mostrar una imagen, puede deberse a una URL defectuosa de la fuente de la imagen. Estos errores pueden ocurrir, por ejemplo, si el índice de imagen en el servidor se ha movido o renombrado.

Internet Explorer 7 mostró el atributo ALT como un tool tip. Por lo tanto, a menudo se utilizaba erróneamente en otros navegadores como una herramienta de ayuda. Sin embargo, esa función pertenece a la etiqueta title, asumiendo que se pretende utilizar HTML válido.

Pero, ¿y si una imagen no tiene un propósito?

Si tiene imágenes en su diseño que son  puramente  allí por razones de diseño, lo estás haciendo mal. Esas imágenes deben estar en su CSS y no en su HTML. Si realmente no puede cambiar estas imágenes, déles un altatributo vacío , así:

<img src="image.png" alt="">

El altatributo vacío asegura que los lectores de pantalla omitan la imagen. En WordPress, puede dejar vacío el campo de "Texto alternativo" en la configuración de la imagen.

texto alternativo y SEO

El artículo de Google  sobre imágenes  tiene un título "Use texto alternativo descriptivo". Esto no es una coincidencia: Google otorga un valor relativamente alto al texto alternativo. 

Lo usan para determinar qué hay en la imagen, pero también cómo se relaciona con el texto circundante. Es por eso que, en nuestro   análisis de contenido de Yoast SEO , tenemos una función que verifica específicamente que tenga al menos  una  imagen con una etiqueta alt que contenga su frase clave de enfoque.

¿Qué hace la frase clave en la verificación de atributos alt de la imagen?

La palabra clave en la evaluación de atributos alt de la imagen en Yoast SEO verifica si hay imágenes en su publicación y si estas imágenes tienen un texto alternativo con la frase clave de enfoque. Al agregar un texto alternativo, proporciona a los usuarios de lectores de pantalla y motores de búsqueda una descripción textual de lo que hay en esa imagen. Esto mejora la accesibilidad y sus posibilidades de posicionarse en la búsqueda de imágenes.

Definitivamente no estamos   diciendo que deba enviar spam con su frase clave de enfoque en cada etiqueta alternativa. Necesita imágenes relacionadas, de buena calidad y de alta calidad para sus publicaciones, donde tiene sentido tener la palabra clave de enfoque en el texto alternativo. Estos son los consejos de Google para elegir un buen texto alternativo :

Al elegir texto alternativo, concéntrese en crear contenido útil y rico en información que use palabras clave de manera adecuada y esté en el contexto del contenido de la página. Evite llenar los atributos alt con palabras clave (relleno de palabras clave), ya que da como resultado una experiencia de usuario negativa y puede hacer que su sitio sea visto como spam.

Si su imagen es de un producto específico, incluya tanto el nombre completo del producto como el ID del producto en la etiqueta alt para que se pueda encontrar más fácilmente. 

En general: si una frase clave puede ser útil para encontrar algo  en la imagen , inclúyala en la etiqueta alt si puede. Además, no olvide cambiar el nombre del archivo de imagen para que sea algo que realmente describa lo que contiene.

Puntajes de evaluación

Si su contenido tiene más de 4 imágenes, solo obtendrá una viñeta verde si el porcentaje de imágenes con la frase clave en el texto alternativo se encuentra entre el 30 y el 70%. Cuando usa la frase clave en más del 70% de sus imágenes, su viñeta se volverá naranja para evitar que se llene de palabras clave. Si tiene Yoast SEO Premium, el complemento también tendrá en cuenta los  sinónimos  que haya agregado a su frase clave.