Categorías
Tutoriales sobre Screaming Frog

Cómo encontrar el texto alternativo y los atributos de la imagen faltante con Screaming Frog



Cómo ver el texto alternativo y encontrar el texto alternativo que falta

El texto alternativo de la imagen (texto alternativo) se usa dentro del HTML de un sitio web para describir una imagen, principalmente para la accesibilidad web (para ciegos y deficientes visuales) o si la imagen no se puede mostrar por algún motivo, ya que el texto aparecerá en lugar de la imagen. También lo utilizan los motores de búsqueda para comprender el contenido de la imagen.

Los atributos alt de la imagen (a menudo denominados incorrectamente «etiquetas alt») deben especificar un texto alternativo relevante y descriptivo sobre el propósito de una imagen y aparecer en la fuente del HTML como en el siguiente ejemplo.

<img src="https://www.screamingfrog.co.uk/how-to-find-missing-image-alt-text/screamingfrog-logo.jpg" alt="Screaming Frog" />

El atributo alt en sí y/o el texto alt a menudo se olvidan por completo y rastrearlos puede ser una tarea laboriosa sin herramientas automatizadas.

Puedes usar el Screaming Frog gratuita (y de pago) para ver el texto alternativo de su imagen y encontrar los atributos alternativos y el texto alternativo que faltan en su sitio web. A continuación se muestra un tutorial muy rápido y fácil sobre cómo verificar el texto alternativo de las imágenes, encontrar texto alternativo o etiquetas faltantes, imágenes grandes y exportarlas en masa.

En primer lugar, deberá descargar el Screaming Frog que es gratis en formato lite, para rastrear hasta 500 URL. Puede descargar a través de los botones en la barra lateral derecha.

Los próximos pasos para encontrar el texto alternativo faltante dentro de su sitio web se pueden ver en nuestro video y tutorial a continuación.

1) Rastrear el sitio web

Abra Screaming Frog, escriba o copie el sitio web que desea rastrear en el cuadro ‘ingresar url a spider’ y presione ‘Iniciar’.

2) Haga clic en la pestaña ‘Imágenes’

A continuación, haga clic en la pestaña ‘imágenes’, donde verá las URL de todas las imágenes descubiertas durante el rastreo, el tamaño de la imagen y la cantidad de enlaces IMG de origen.

La pestaña de imágenes

3) Haga clic en una imagen, luego haga clic en la pestaña ‘Detalles de la imagen’ en la parte inferior

La pestaña ‘Detalles de la imagen’ en la parte inferior de SEO Spider llenará el panel de la ventana inferior con información sobre las páginas de origen que hacen referencia a la imagen (la URL ‘de’) y el texto alternativo de cada elemento de imagen descubierto.

También mostrará la imagen seleccionada en el lado derecho.

Pestaña de detalles de la imagen para ver el texto alternativo

En el ejemplo anterior, puede ver que cuatro páginas de nuestro sitio web (las direcciones ‘De’) tienen una imagen de Rand Fishkin (https://www.screamingfrog.co.uk/wp-content/uploads/2014/03/ rand.jpg) con diferente texto alternativo. Uno tiene ‘rand’ como texto alternativo, los otros están en blanco, lo que significa que les falta el texto alternativo.

Las imágenes pueden tener muchas URL diferentes que hacen referencia a ellas y, por lo tanto, muchos textos alternativos diferentes. Si bien muchos CMS establecen un solo texto alternativo para cualquier imagen, en realidad se establece en el HTML dentro del elemento IMG y el atributo alternativo, que al igual que el texto de anclaje de un enlace, puede ser muy diferente.

Por lo tanto, el texto alternativo de la imagen no se puede configurar simplemente en una sola columna junto a una imagen y es por eso que nuestro enfoque de múltiples ventanas permite a los usuarios revisar cada texto alternativo para mantener la coherencia.

4) Use el filtro para seleccionar ‘Texto alternativo faltante’ y ‘Atributo alternativo faltante’

Los filtros refinan las URL dentro de la pestaña ‘Imágenes’ para mostrar imágenes que tienen ‘Falta texto alternativo’ o ‘Atributo alternativo faltante’.

Comprobador de texto alternativo de imagen faltante

El filtro ‘Falta texto alternativo’ incluye imágenes que tienen un atributo alt, pero está vacío o tiene espacios en blanco.

<img src="https://www.screamingfrog.co.uk/how-to-find-missing-image-alt-text/screamingfrog-logo.jpg" alt="" />

El filtro ‘Atributo Alt faltante’ incluye imágenes que no tienen un atributo alt.

<img src="https://www.screamingfrog.co.uk/how-to-find-missing-image-alt-text/screamingfrog-logo.jpg" />

Es útil dividirlos en filtros separados, ya que imágenes decorativas debe tener texto alternativo vacío, en lugar de omitir el atributo alt, lo que puede causar problemas en los lectores de pantalla. Sin embargo, en realidad, a menudo también vemos imágenes decorativas sin atributos alternativos.

Siempre que sea posible, las imágenes decorativas deben proporcionarse utilizando imágenes de fondo CSS. Consulte el W3C árbol de decisión alternativo para obtener consejos sobre qué texto alternativo debe incluirse para diferentes tipos de imágenes.

5) Exportación masiva de texto alternativo faltante y páginas de origen a través de ‘Exportación masiva > Imágenes > Imágenes faltantes de atributo alternativo y texto’

Simplemente puede usar el botón ‘exportar’ en la pestaña ‘Imágenes’ con el filtro configurado en ‘Falta texto alternativo’ o ‘Falta atributo alternativo’ para exportar solo esa vista de las imágenes.

Sin embargo, si desea exportar de forma masiva todas las páginas de origen que hacen referencia a imágenes a las que les falta el texto alternativo, los atributos alternativos o ambos juntos (y las columnas de texto alternativo en blanco), utilice el menú de exportación masiva.

Imágenes sin texto alternativo y atributos

Esto le permitirá ver las páginas de origen, la URL de la imagen y el texto alternativo.

6) Exportación masiva de texto alternativo de todas las imágenes a través de ‘Exportación masiva > Imágenes > Todas las imágenes’

Esta exportación masiva incluirá todas las páginas de origen que hacen referencia a imágenes y su texto alternativo respectivo (incluidos los que faltan).

Exportación masiva de texto alternativo de todas las imágenes

Si no se encuentran todas las imágenes

Ocasionalmente, puede encontrar que algunas imágenes en un sitio web no se descubren, y hay dos razones comunes para esto.

  1. Las imágenes se cargan usando JavaScript o CSS (como CSS ‘imagen de fondo’). Si este es el caso, simplemente cambie a Representación de JavaScript para rastrear el sitio y descubrir todas estas imágenes. Recuerde asegurarse de que los archivos JS y CSS no estén bloqueados.
  2. Las imágenes están bloqueadas por robots.txt. Tu también puedes ignorar robots.txt o personalizar el archivo robots.txt para permitir el gateo.

Con suerte, la guía anterior ayuda a ilustrar cómo usar la herramienta Screaming Frog para verificar si falta texto alternativo de manera eficiente.

Una respuesta a «Cómo encontrar el texto alternativo y los atributos de la imagen faltante con Screaming Frog»

[…] los filtros de imagen podemos seleccionar las que pesan más de 100 kb, las que no tienen un atributo ALT o las que lo tienen pero es demasiado largo. Son 3 elementos que solemos descuidar bastante a la […]

Deja una respuesta

Tu dirección de correo electrónico no será publicada.