Probablemente hayas oído hablar del alt text para imágenes en términos de accesibilidad web. El alt text (también conocido como atributos alt o descripciones alt) es el texto que acompaña a las imágenes y que leen en alto los lectores de pantalla, como forma de ayuda a las personas con discapacidad visual para que naveguen por la web.
Pero el alt text hace mucho más por el SEO de tus imágenes de lo que piensas, por lo que dejar los atributos alt vacíos puede dañar tus posiciones.
Vamos a empezar por lo importante:
¿Qué es el Alt Text para imágenes?
El alt text describe no solo el contenido de la imagen, sino también su contexto. Con frecuencia se confunde con la etiqueta alt, sin embargo, el alt text es parte del código HTML, pero solo es una descripción de la imagen que contiene la etiqueta alt, no todo el atributo.
El significado del alt text proviene de texto alternativo, y es posible que lo hayas visto antes si alguna vez has visto imágenes en una página que no se cargan correctamente. El alt text es el texto escrito que se muestra en lugar de esas imágenes.
Añadir alt text a las imágenes es una de las mejores prácticas usadas por los profesionales SEO para optimizar imágenes para la web. Este es el aspecto de la etiqueta alt HTML de una imagen:
Como se ve en el código fuente a la derecha, el alt text para una captura de pantalla de nuestro escritorio de la herramienta Auditoría del sitio es:
<img alt="semrush site audit dashboard" />¿Cómo se usa la etiqueta alt? Principales funciones
Informar y contextualizar el contenido
El propósito principal del alt text es brindar información y ayudar a contextualizar el contenido a personas con discapacidad visual que utilizan lectores de pantalla.
Imagínate por un momento que perteneces a este segmento de la población.
Estás leyendo un artículo con tu lector de pantallas y de repente llegas a una imagen.
La imagen aporta contenido de valor a ese texto que acompaña y es un complemento ideal para aquellas personas sin problemas de visión, sin embargo, tú solo escuchas:
“DSC45673.jpg”; o quizá no escuchas nada porque no existe atributo y cuando el lector salta al siguiente párrafo, sientes que te falta información; tal vez el texto alternativo solo lo compone una palabra clave: “gráfico de analytics”; también puede ser que incluya un listado de palabras clave: “gráfico de analytics”, “analytics”, “google analytics”, “gráfico de resultados", etcétera.
Si te sientes identificado con el uso de algunas de estas combinaciones, por regla general estarás obviando el principal objetivo del texto alternativo y descuidando la accesibilidad del sitio web.
Facilitar información ante problemas concretos
Otra de sus funciones es facilitar información en caso de que la imagen no cargue en conexiones con poco ancho de banda o por otras razones como:
- Navegadores antiguos, que no pueden interpretar algunos archivos de imagen.
- Protección de rastreo: si lo tienes activo en tu navegador, puede fallar la carga de algunas imágenes.
- Visualización desactivada: algunos navegadores dan la opción de no mostrar los archivos de imagen.
- URL defectuosa de la fuente de la imagen.
Servicio de ayuda a crawlers
Ayuda a los crawlers a interpretar sobre qué trata esa imagen.
Aunque la tecnología que utiliza Google para reconocer imágenes ha evolucionado bastante, a día de hoy los motores de búsqueda son incapaces de entenderlas.
Además, puede servir de texto de enlace si se decide usar imágenes como enlaces.
La práctica diaria en el mundo del Marketing en general y del SEO en particular, es destinar el texto alternativo exclusivamente para objetivos SEO, olvidándonos casi por completo de su propósito fundamental de accesibilidad.
¿Cómo hacer un alt en HTML?
El fragmento de código de un texto descriptivo es muy sencillo:
<img src="perrojugandopelota.jpg" alt="perro mediano color negro jugando con una pelota">-
img src: hace referencia al archivo de la imagen que se quiere mostrar.
-
alt: se refiere al texto que describe lo que muestra la imagen.
Para una buena optimización de la imagen, que además garantice la accesibilidad, lo idóneo es trabajar ambas partes del código, priorizando siempre al usuario respecto a los motores de búsqueda
¿Qué es el SEO para imágenes?
Comúnmente conocido como optimización de imágenes, esta práctica busca mejorar las imágenes de tu sitio por dos razones principales:
-
Para obtener posiciones más altas en la búsqueda de imágenes de Google.
-
Para mejorar la visibilidad general y la optimización de una página web.
Esto significa que necesitas llevar a cabo una serie de tareas que ayudarán a Google a entender mejor las imágenes de tu sitio. Tales tareas pueden ser: incluir un nombre adecuado a los archivos, agregar y optimizar texto alt, reducir el tamaño de los archivos y más.
Una de las preguntas que surge a menudo en relación con el SEO para imágenes es: ¿si estas tareas aún son necesarias? dado que el avance de Google en el uso de IA y machine learning para el reconocimiento de imágenes es acelerado. La respuesta corta es sí.
Google todavía no puede leer todo tipo de imágenes, a pesar de que su capacidad para hacerlo ha mejorado significativamente en los últimos años. También es importante saber que el SEO para imágenes no se trata solo de ayudar a los motores de búsqueda a comprender lo que muestra una imagen.
Las imágenes mal optimizadas son una de las principales causas de páginas web lentas, y al mejorarlas puedes tener un gran impacto en la velocidad de carga de tu sitio y el puntaje de PageSpeed.
Es importante mencionar que el SEO para imágenes a menudo se detiene con la optimización de atributos alt. Si bien es cierto, es una parte importante del proceso, no es la única práctica que existe.
Dicho esto, comprender el concepto y el propósito de los atributos alt y el texto alt es un excelente punto de partida.
¿Por qué el Alt Text es importante para el SEO de las imágenes?
El alt text para imágenes se convierte en algo importante a medida que los motores de búsqueda mejoran su habilidad para leer cualquier imagen de una página y a medida que la experiencia de usuario se enriquece con contenido visual.
Si estás creando cualquier tipo de contenido para internet hoy en día, necesitarás material visual. Desde la perspectiva del usuario, incrustar imágenes en la página es mucho más agradable que hacer clic en un enlace, y los resultados de búsqueda de Google lo saben.
De hecho, con frecuencia, los mejores resultados en la búsqueda de Google se consiguen mediante contenido visual. Por ejemplo, si buscamos "ejemplos de currículums SEO", este es el aspecto de los resultados de búsqueda:
Se debe sobre todo a la continua expansión de Google hacia la búsqueda visual, y a que está al día con la última tecnología de machine learning y renderizado de AR.
Google comentó la importancia de las etiquetas alt por primera vez en 2007, y son una parte integral de las directrices de la empresa sobre publicación de imágenes. La intención de los motores de búsqueda de avanzar hacia una búsqueda visual más precisa ha sido confirmada en cada una de las actualizaciones.
Cómo añadir el alt text a las imágenes de tu página
Ahora que entendemos por qué el alt text es tan importante para el SEO de imágenes, es necesario aprender dónde están las opciones de atributo en tu CMS, ya que la mayoría de las plataformas de sitios web suelen tener las funciones adecuadas ya configuradas.
Varias plataformas de sitios web ya tienen configuradas opciones de texto alt, solo tienes que accederlos.
Cómo agregar texto alt a imágenes en WordPress
Si utilizas WordPress, es realmente fácil agregar texto alt a tus imágenes.
Simplemente haz clic en una imagen en la ventana del editor y verás que aparece un campo para esto en la pestaña Configuración de imagen.
O bien, haz clic en una imagen de la biblioteca de multimedia y verás las opciones aquí también.
Cómo agregar texto alt a imágenes en Shopify
Si utilizas Shopify, puedes agregar texto alt a las imágenes de tu tema como, y también, a las imágenes del producto.
Para optimizar el texto alt en las imágenes de productos, dirígete a Productos> Todos los productos y haz clic en la lista de productos que deseas editar.
En la página de detalles del producto, haz clic en un elemento multimedia y busca la página de previsualización de multimedia. Ahora puedes hacer clic para agregar texto alt.
Para agregar texto alt a las imágenes de temas, dirígete a Online Store > Temas y haz clic para personalizar el tema de tu tienda.
Verás el menú de secciones en la parte izquierda de la página donde puedes hacer clic en bloques de imágenes y, desde allí, en imágenes individuales.
Verás un cuadro de texto donde puedes agregar tu texto alt.
Cómo agregar texto alt a imágenes en Magento
Agregar texto alt a las imágenes en una tienda de Magento es realmente fácil:
Primero necesitarás hacer clic en Catálogo> Productos, luego, elegir el producto al que quieres agregar texto alt, y desplazarte a la sección Imágenes y videos.
Haz clic en una imagen y podrás editar el texto alternativo.
Cómo agregar texto alt a imágenes en Wix
Hace algún tiempo, no era posible agregar texto alt a las imágenes en una tienda en Wix. No obstante, la plataforma ha invertido recursos para solucionar estas frustraciones comunes de SEO en los últimos años, y la edición de texto alt ahora es posible.
Puedes agregar texto alt a las imágenes en la ventana de edición. Para ello haz clic en la imagen donde quieres agregar texto alt y abre las opciones de configuración.
Desde aquí verás el campo “¿Qué hay en la imagen?”. Ahí es donde puedes agregar tu texto alt.
Cómo redactar alt text que funcionen
El texto alt nos ofrece la posibilidad de integrar las palabras clave objetivo de forma relevante y con significado de forma que enriquezca el contenido y ofrezca una mejor experiencia de usuario.
Incluir las palabras clave objetivo en el alt text no es solo algo a tener en cuenta cuando se trata de optimizar imágenes. A la hora de redactar alt text para imágenes en una página, recuerda:
- Describe la imagen de la forma más objetiva posible: en última instancia, el alt text se muestra cuando la imagen no se carga, por lo que es necesario que sea una descripción coherente de la imagen.
- Proporciona contexto a la imagen: así los rastreadores podrán indexarla correctamente.
- Mantenlo directo y corto: para descripciones más largas usa el atributo longdesc (nota: evita frases como "imagen de" o "foto de", es repetitivo, ya que el alt text es en sí mismo una descripción de la imagen).
- Utiliza palabras clave pero evita el keyword stuffing: todas las reglas habituales de contenido de buena calidad se aplican también a los alt text. El Keyword stuffing no funciona para tu contenido y no funcionará para el alt text.
Mejores prácticas de alt text para el SEO de imágenes
Un buen consejo de SEO es evitar usar imágenes en lugar de palabras. Desde que los motores de búsqueda pueden "leer" como los humanos, usar una imagen en lugar de texto confunde a los rastreadores y puede dañar las posiciones.
Como regla general, asegúrate de añadir tu alt text a todas las imágenes de una página. Esto incluye imágenes como los botones. El texto alt para los botones puede tener descripciones como "consíguelo ahora" o "suscríbete a la newsletter", etc.
Ejemplo de alt text: del peor al mejor
Vamos a echar un vistazo a algunos ejemplos de alt text ordenados de peor a mejor:
Cómo redactar alt text para webs ecommerce
Una vez más, el alt text necesita ser lo más descriptivo posible. Es importante evitar alt text del tipo: "zapatillas converse en liquidación compra las tuyas ahora". Puede hacer saltar las alarmas de spam.
Uso comercial gratuito de Pixabay
Una buena etiqueta alt cuando se trata de optimizar imágenes para ecommerce debería ser así:
<img ="converse_shoes.png" alt=" converse all star sneakers for men black">Desvelando problemas con alt text de imágenes
Incluso cuando tratamos de hacerlo lo mejor posible al redactar alt text que funcionen bien, algunas veces podemos perdernos.
Cuando quieres optimizar imágenes para la web, nuestra herramienta Auditoría del sitio puede ayudarte a resaltar los problemas con imágenes en tu página.
Imágenes rotas
Las imágenes rotas proporcionan una experiencia de usuario pobre porque no se ven adecuadamente, dando la impresión general de que tu página tiene mala calidad. Una vez que los motores de búsqueda se dan cuenta de ello, las imágenes rotas pueden dañar tus posiciones.
La herramienta Auditoría del sitio te ayudará a resaltar la causa de las imágenes rotas. A continuación, tendrás que solucionar:
- Una URL mal escrita o una ruta de archivo no válida: corrige un error tipográfico en la URL; si se movió el archivo de la imagen, corrige la URL para que apunte hacia la ubicación actual.
- La imagen ya no existe: si el archivo de la imagen se borró o está dañado, cámbialo por uno nuevo o si ya no necesitas más la imagen, elimínala también del código HTML de la página.
Lo único que tienes que tener en mente es la diferencia entre las imágenes internas rotas y las externas. Como no tienes control sobre las imágenes externas, lo mejor que puedes hacer es reemplazarlas todas a la vez.
Imágenes sin atributos alt
Como hemos mencionado anteriormente, un atributo alt vacío es una oportunidad perdida de conseguir mejores ranking en la búsqueda de imágenes. Además, no ofrece una buena experiencia de usuario a los usuarios con discapacidad visual.
Puedes usar la herramienta Auditoría del sitio para revisar todas las imágenes que no tengan atributos alt, haciéndote más fácil intervenir y rellenar el atributo alternativo con el texto apropiado.
Observa el atributo alt vacío que puedes ver aquí:
<img src="magename.png" alt=" ">Cámbialo a este:
<img src="imagename.png" alt="well written alt text with keyword">Preguntas frecuentes de alt text
Estas son algunas de las preguntas que hemos escuchado con más frecuencia cuando trabajamos con etiquetas alt:
¿Cómo encuentro una etiqueta alt en una página?
Selecciona cualquier parte de una página con el ratón, haz clic en el botón derecho y elige "inspeccionar" desde el menú. El código fuente de la página aparecerá en la parte derecha de la pantalla.
Haz clic en el primer icono de la izquierda en el panel de código HTML, busca la imagen de la página cuya etiqueta alt desees ver y haz clic en ella también. El código HTML de ese elemento se resaltará con todos los atributos de la imagen.
¿Cómo leo el texto alt en el código HTML?
Una vez que hayas hecho clic en "inspeccionar", necesitas prestar atención a la etiqueta HTML en el panel que muestra el código fuente de la página. El alt text está precedido por una etiqueta que dice "alt=", y lo que sigue es la descripción del texto alternativo.
¿Cómo sé si una imagen tiene un alt text?
Cuando inspeccionas una imagen en el código fuente de la página, si la etiqueta alt después de "alt=" solo muestra dos comillas que no tienen contenido en medio, es que el contenido del atributo alt está vacío, no hay texto alt.
¿Cómo añado texto alt a un archivo jpg?
En Microsoft Word, puedes hacer clic derecho en una imagen y seleccionar "editar alt text" desde el menú. Rellena la descripción de la imagen en la caja de entrada y haz clic en "OK". Recuerda comprobar dos veces tu texto tanto desde el punto de vista gramático como de redacción, porque las cajas de entrada no tienen comprobación de texto.
¿Puedo usar comas y puntos en el alt text?
Sí, puedes. Incluir la puntuación adecuada en el texto alternativo permite a los lectores de pantalla ofrecer una mejor experiencia de usuario.
Además, el texto alternativo se muestra cuando una imagen no se carga correctamente. Los textos de gran calidad aseguran una mejor experiencia de usuario.
¿Cómo de largas deberían ser las etiquetas alt?
La longitud recomendada máxima del alt text que se adecúa a la mayoría de los lectores de pantallas es de 125 caracteres.
Conclusiones
El alt text es una parte importante del SEO de imágenes y la accesibilidad de los usuarios, así que tenlo en cuenta cuando optimices tus etiquetas alt. Los usuarios y los motores de búsqueda utilizan el alt text para entender mejor las imágenes de tu página. Siguiendo los pasos que hemos comentado, estarás en el buen camino para crear páginas que sean fáciles de usar y rastrear.