Atributos de imagen alt: ¿relevantes para usabilidad y SEO?

Las imágenes son usadas para varios propósitos en la web. En un sitio estándar, los gráficos son usados para botones de navegación, viñetas, iconos, gráficos de texto u otras formas de complementar un cuerpo de texto. Muchos usuarios en la web son capaces de entender e interpretar las imágenes solo con mirarlas, pero hay muchos usuarios que pueden no ser capaces de hacerlo:

• Usuarios ciegos que utilizan lectores de pantalla para entender el contenido web.
• Usuarios que deshabilitaron las imágenes en sus buscadores.
• Usuarios con una conexión lenta que no pueden descargar imágenes.
• Usuarios de navegadores estándar en modo solo texto.
• Rastreadores de motores de búsqueda que no pueden interpretar el contenido gráfico.

El HTML nos brinda el atributo de imagen alt para describir la imagen en un formato legible. Esto ayuda a compensar estas situaciones en que personas o bots no pueden interpretar el contenido de una imagen. El siguiente es un ejemplo del atributo de imagen alt:

<img src="œrelojesrolex.jpg" alt="œReloj Rolex plateado pantalla negra"/>

Los atributos alt de imagen son claramente significativos para el SEO y la usabilidad. Sirven a los usuarios mencionados más arriba con una usabilidad de sitio enriquecida y también presenta estas imágenes en resultados de búsqueda relevantes dado el SEO elevado del sitio.

A continuación, algunos factores que podrí­an ayudarte a optimizar tus imágenes para usabilidad y SEO.

Consejos para tus imágenes:

• Usa imágenes en los siguientes formatos "“ BMP, GIF, JPEG, PNG, SVG y WebP.
• Asegúrate que el nombre del archivo de imagen es descriptivo del contenido de la imagen y no un nombre genérico como DSC099778.jpg.
• Los rastreadores de Google normalmente indexan imágenes de todos los tamaños, pero mantener el tamaño de imagen dentro de un cierto lí­mite ayudará a que tus páginas carguen más rápido. Puedes hacer esto recortando espacios en blanco en la imagen y reduciendo la cantidad de colores en la imagen (haz esto usando Photoshop). Asegúrate de que el tamaño total de la página esté por debajo de los 100Kb. Puedes usar herramientas online para cambiar tamaños de fotos como Smush.it o ShrinkPictures.com o cualquier editor de fotos de tu elección.
• Si tienes texto importante, asegúrate de que no está embebido en la imagen misma. Tiene que aparecer en HTML regular.
• Especifica el alto y el ancho de una imagen. Esto permite al navegador saber el tamaño de la imagen y se asegura que el espacio reservado para esa imagen no cambia cuando la página está cargando. Mira el siguiente ejemplo:
• <img src="œrelojesdehombre.jpg" alt="œRelojes de hombre Rolex Yacht Master" width="œ304" height="œ228">
  

Consejos para tu contenido de texto alt:

• El atributo alt de una imagen debe contener una frase de diez palabras o menos que describa la imagen.

Correcto uso del atributo alt:

<img src="œrelojesdehombre.jpg" alt="œReloj de hombre Rolex Yacht Master">

Uso promedio:

<img src="œrelojesdehombre.jpg" alt="œrelojesdehombre">

Uso incorrecto:

<img src="œrelojesdehombre.jpg" alt="œ">

• El atributo alt de una imagen debe contener palabras clave, pero en un formato legible. Evita llenarlo de palabras clave, como en el ejemplo de abajo:
• <img src="œmenswatches.jpg" alt="œrelojes de hombre relojes para hombre relojes rolex de hombre"/>
  
• Si tienes múltiples imágenes de la misma categorí­a de productos, como relojes de hombre, intenta diferenciar el texto alt de cada imagen especificando el tipo de producto. Evita repetir el mismo atributo alt para todas las imágenes de la página.
• El atributo alt puede ser el mismo que se muestra en las imágenes de la pestaña de navegación. Por ejemplo, si la pestaña de navegación dice "Sobre nosotros", el atributo alt puede también ser "Sobre nosotros".
• Usa "logo de la compañí­a" para el texto alt de la imagen del logo de la compañí­a. Algunos describen el atributo alt con el destino del enlace en el logo como "volver al inicio". Se aconseja usar la descripción de la imagen en vez del destino al cual lleva.
• El HTML para las imágenes contiene etiquetas de tí­tulo y etiquetas alt que normalmente se confunden entre sí­. Mientras que la etiqueta de tí­tulo es para lectores humanos, el atributo alt es para los rastreadores de los motores de búsqueda. Por ende, el texto del tí­tulo puede ser escrito para dirigir a un lector, por ejemplo "Haz clic para ver más relojes de hombre", mientras que el texto alt es estrictamente para describir el contenido de la imagen en contexto, por ejemplo "relojes de hombre de diseñador".
• Si tienes un texto de imagen en una fuente especí­fica, usa la misma palabra como su atributo alt.

Texto alt nulo:

• Usa el atributo alt nulo para imágenes de espaciado. Estas imágenes están hechas para ser invisibles y crear espacios en el diseño de un sitio web. Se recomienda usar el atributo alt nulo en vez de no usarlo en absoluto para estas imágenes. El atributo alt nulo se declara en el siguiente formato:
• <img src="œnombredearchivo.jpg" alt="œ">
  

Usa el atributo alt nulo para viñetas, iconos e imágenes decorativas. Idealmente puedes incluir viñetas e imágenes de iconos en el CSS de tu sitio, esto quitará la necesidad por completo de una descripción alt.

Consejos para SEO:

1. Google intenta entender el contenido de las imágenes por el texto y las palabras clave a su alrededor. Por ende, asegúrate de colocar las imágenes donde sean relevantes para el contenido del sitio.
2. Google también intenta interpretar el contenido de la imagen por el texto de anclaje al cual enlaza. Por ejemplo, si la imagen de tu sitio está enlazada por el texto de anclaje "relojes de hombre", entonces la imagen está optimizada para búsquedas.
3. El tí­tulo de la página (donde se encuentra la imagen) también es considerado por el rastreador de Google.
4. Enví­a sitemaps de imágenes a los motores de búsqueda, dado que esto los ayuda a indexar tus imágenes de una forma más organizada. También ayudará a los motores de búsqueda a decidir qué imágenes en tu sitio son importantes. Usa etiquetas especí­ficas de imagen en tus mapas de sitio existentes o usa generadores de sitemaps de imágenes externos, como Inspyder o A1 Sitemap Generator.

Siempre es mejor usar el atributo alt en todas las formas mencionadas en lugar de no usarlo en lo absoluto. Los motores de búsqueda pueden indexar tus imágenes mucho mejor con el atributo alt y tú puedes atraer tráfico de búsquedas a tu sitio simplemente asignando el texto alt apropiado a tus imágenes.

Al mejorar la usabilidad de tu sitio enriqueces la experiencia de usuario y eso realmente mejora el SEO de tu sitio. Por ende, con el uso correcto de los atributos alt de imágenes afectas positivamente el posicionamiento en los motores de búsqueda de tu sitio.