¿Qué es el atributo Alt en SEO? Crea contenido accesible a los usuarios

¿Te has preguntado cómo los motores de búsqueda “ven” las imágenes de tu sitio web?

La respuesta está en gran medida en el atributo alt de tus imágenes. En el mundo del marketing digital y el SEO (optimización para motores de búsqueda), cada detalle cuenta, y el texto alternativo de las imágenes es uno de esos pequeños grandes detalles. Un correcto uso del atributo alt no solo ayuda a Google a entender tus imágenes, sino que también hace tu sitio más accesible para personas con discapacidades visuales. 

• Google Imágenes llega a representar más del 20% de las búsquedas web a nivel mundial​.
• En mercados locales como Colombia, Google acapara más del 96% de las búsquedas​. 

Las empresas y agencias de SEO en Medellín saben que una estrategia de posicionamiento web sólida debe cuidar todos los aspectos del SEO on-page, y eso incluye la optimización de las imágenes.

En esta guía profundizaremos en qué es exactamente el atributo alt, cuál es su propósito, cómo usarlo correctamente y por qué es clave tanto para el SEO como para la accesibilidad web.

¿Qué es el atributo Alt en SEO?

El atributo alt (de “alternative text” o texto alternativo) es una propiedad de la etiqueta HTML <img> que permite proporcionar una descripción en texto para una imagen. En código, se ve así: alt=»descripción de la imagen». Por ejemplo, si tenemos una imagen de la Plaza Botero en Medellín, el HTML podría ser:

<img src=»plaza-botero-medellin.jpg» alt=»Esculturas de Botero en la Plaza Botero de Medellín» />

En este caso, el texto entre comillas describe el contenido de la imagen. ¿Por qué es importante esto para el SEO? Porque los motores de búsqueda no “ven” las fotos como lo hacemos los humanos; dependen del texto alternativo para entender el contenido visual y su relevancia​.

Dicho de otra forma, el atributo alt actúa como un puente entre el contenido visual y los buscadores: les indica de qué trata la imagen y cómo se relaciona con tu página web. Al incluir texto descriptivo y relevante en alt, facilitas que Google y otros buscadores indexen correctamente tus imágenes e incluso las muestren en resultados de búsqueda de imágenes para las palabras clave adecuadas.

En el contexto de SEO, el atributo alt es especialmente valorado para el posicionamiento en Google Imágenes y puede contribuir (aunque sea modestamente) al SEO general de la página. Google ha señalado en sus guías que escribir texto alternativo descriptivo ayuda a entender la relación de la imagen con el contenido de la página​.

El alt text es tanto un elemento técnico de SEO on-page como una herramienta de accesibilidad web. 

¿Para que sirve el atributo Alt en HTML?

El atributo alt tiene varios propósitos esenciales en nuestras imágenes web:

Describir la imagen a los usuarios que no pueden verla

Si por alguna razón la imagen no carga (por problemas de conexión, error en la URL, etc.), el navegador mostrará en su lugar el texto alternativo. Así, un visitante todavía sabrá qué imagen debería estar allí. Por ejemplo, si la foto de un producto no carga, verán algo como “Imagen de zapatos deportivos azules” en lugar de un recuadro vacío. Esto mejora la usabilidad en condiciones menos ideales.

Mejorar la accesibilidad para personas con discapacidad visual.

Los usuarios con ceguera o baja visión suelen navegar con lectores de pantalla, los cuales leen en voz alta el contenido de la página. Cuando encuentran una imagen, lo que “leen” es el atributo alt. Si la imagen tiene un alt bien escrito, esa persona recibirá la descripción y comprenderá el contenido visual inserto en la página. Más adelante profundizaremos en este impacto, pero vale mencionar que el objetivo principal del texto alternativo es precisamente la accesibilidad, como ha recalcado Google​.

Contribuir al SEO de la página y al posicionamiento en buscadores.

En términos de SEO on-page, el alt sirve para que los crawlers (los programas con los que Google y otros motores rastrean la web) puedan indexar tus imágenes correctamente. Un alt bien optimizado le da a Google contexto sobre tu imagen, ayudando a que aparezca en búsquedas relevantes (especialmente en Google Imágenes) y reforzando la temática de tu página. Aunque en el algoritmo general de búsqueda de Google el alt no pesa tanto como el contenido de texto principal, sí es un factor que aporta relevancia adicional. Piensa que cada imagen con su alt es otra oportunidad de incluir palabras clave relacionadas (LSI) de manera natural.

Actuar como texto “de respaldo” en caso de imágenes decorativas o enlaces.

Si una imagen es un enlace o un botón (por ejemplo, el logo de tu sitio enlazando al inicio, o un ícono de carrito de compras), el alt también cumple la función de texto ancla para ese enlace en términos de accesibilidad. Y si la imagen es meramente decorativa y no aporta información (como un adorno visual), se puede usar un alt vacío (alt=»») para indicar a los lectores de pantalla que pueden ignorarla. Esto evita distracciones innecesarias.

El atributo alt sirve para comunicar el contenido y la función de las imágenes tanto a usuarios como a buscadores. Es una pieza clave de la optimización de imágenes en SEO y un requisito básico de accesibilidad web. Ahora, veamos con más detalle el impacto que tiene en la accesibilidad y la experiencia de usuario.

Impacto del atributo Alt en accesibilidad y usabilidad

El impacto del alt text en la accesibilidad web es enorme. Imagina navegar una página de comercio electrónico de moda en Medellín sin poder ver las fotos de los productos: ¿cómo sabrías qué se ofrece? Ahí es donde el texto alternativo se vuelve tus “ojos”.

Para millones de personas en el mundo con discapacidad visual, esta es la realidad cotidiana al usar internet. De hecho, se estima que aproximadamente 1 de cada 6 personas en el mundo tiene alguna discapacidad​, y muchas de ellas utilizan tecnologías de asistencia como lectores de pantalla para acceder al contenido en línea.

Cuando agregamos descripciones alt a nuestras imágenes, estamos haciendo la web más inclusiva. Un usuario con un lector de pantalla escuchará la descripción y podrá entender la imagen.

Si una página carece de textos alternativos, esa información se pierde por completo para ese usuario, creando una barrera de acceso. No es sorprendente que las pautas internacionales de accesibilidad, como WCAG (Web Content Accessibility Guidelines), incluyan como primera recomendación proporcionar alternativas de texto para todo contenido no textual (imágenes, multimedia, etc.).

Las estadísticas recientes sobre accesibilidad reflejan la importancia del alt y cuánto se pasa por alto. Según un estudio masivo de 2023 sobre un millón de sitios web, el 22.1% de las imágenes analizadas no tenían texto alternativo.

más de la mitad de las páginas web (54%) presentaban al menos una imagen sin alt text​.

Esto quiere decir que es muy común encontrar sitios donde las personas con discapacidad visual se pierden parte del contenido simplemente porque a alguien se le olvidó (o no supo) poner una descripción en la imagen. La falta de texto alternativo es consistentemente una de las principales faltas de accesibilidad detectadas en la web cada año​.

En términos de usabilidad, incluso para usuarios sin discapacidad, el alt text puede aportar valor. Por ejemplo, algunos navegadores muestran el alt text como un tooltip al pasar el mouse (aunque el atributo destinado a eso es title, a veces ocurre con alt). Y como mencionamos, si la conexión es lenta y las imágenes no cargan, el usuario aún ve el contexto de qué debería ir en cada espacio. Esto evita páginas llenas de “huecos” misteriosos.

Aspecto legal y de responsabilidad social

en varios países existen normas de accesibilidad web (en Estados Unidos, por ejemplo, muchas empresas han enfrentado demandas bajo la ley ADA por sitios inaccesibles). En Colombia, aunque la conversación apenas crece, es previsible que la accesibilidad web gane importancia con iniciativas gubernamentales y privadas. Incluir alt text adecuado en tus imágenes es una forma sencilla pero eficaz de mejorar la accesibilidad de tu sitio, alineándote con buenas prácticas internacionales y brindando una mejor experiencia a todos tus usuarios.

En síntesis, el atributo alt mejora la experiencia de usuario y la inclusividad de tu sitio. Un sitio web que cuida estos detalles ofrece una usabilidad superior, lo cual incluso beneficia indirectamente al SEO (los buscadores valoran sitios accesibles y bien estructurados​. 

Cómo usar el atributo Alt correctamente en un sitio web

Ya entendimos el “qué” y el “por qué”. Ahora veamos el “cómo”. Utilizar el atributo alt de forma correcta implica seguir buenas prácticas de redacción y evitar ciertos errores comunes. Exploraremos consejos prácticos, veremos ejemplos de código HTML bien elaborados y también qué no se debe hacer al escribir textos alternativos para imágenes.

Buenas prácticas para el Alt de las imágenes

Para sacar el máximo provecho del atributo alt en términos de SEO y accesibilidad, ten en cuenta estas buenas prácticas al redactar tus textos alternativos:

Describe con precisión y brevedad el contenido de la imagen

Piensa, ¿cómo le describirías la imagen a alguien por teléfono en una frase corta? Esa suele ser una buena guía para el alt. Sé específico cuando importe. Por ejemplo, alt=»Perro labrador jugando en un parque de Medellín» es mejor que alt=»Perro jugando». Incluye detalles relevantes (color, acción, contexto) pero sin escribir un párrafo.

Incluye palabras clave relevantes solo si encajan de forma natural

Dado que el alt contribuye al SEO, es recomendable aprovechar para mencionar alguna palabra clave relacionada con tu contenido, siempre y cuando sea pertinente. No fuerces términos que no describen la imagen. Por ejemplo, si tu imagen es de un café de Colombia, un alt adecuado podría ser alt=»Taza de café colombiano orgánico con diseño de arte latte», lo cual incluye “café colombiano” de forma orgánica. Evita el keyword stuffing (poner un montón de keywords separadas por comas) porque eso no solo arruina la accesibilidad sino que puede ser contraproducente para SEO. Google valora la relevancia y naturalidad por encima de la densidad de palabras clave.

Mantén el alt relativamente corto

No hay un límite estricto de caracteres, pero convencionalmente se sugiere alrededor de 125 caracteres o menos, ya que algunos lectores de pantalla podrían cortar texto muy largo. La idea es que sea una descripción concisa. Si la imagen requiere una explicación muy larga (por ejemplo, una infografía compleja), quizás ese nivel de detalle deba estar en el cuerpo de la página, y el alt puede ser un resumen.

Cada imagen debe tener su propio alt único (a menos que sea decorativa)

No repitas el mismo texto alternativo en múltiples imágenes a menos que efectivamente muestren lo mismo. Por ejemplo, si en una página tienes varios íconos de redes sociales con el logo de Facebook, Twitter, etc., cada uno debería tener alt como «Logo de Facebook», «Logo de Twitter», etc., en lugar de todos “red social”. Esto ayuda tanto a usuarios como a buscadores a diferenciar el contenido de cada imagen​.

Usa alt vacío (alt=»») solo en imágenes puramente decorativas

Si una imagen no aporta contenido ni contexto (por ejemplo, elementos de diseño, fondos, separadores visuales), la práctica correcta es dejar el alt vacío. alt=»» le indica al lector de pantalla que ignore esa imagen. No dejes simplemente sin atributo alt, es mejor poner alt=»» explícitamente para cumplir estándares. Pero ojo, solo utilízalo cuando realmente la imagen no tiene significado para el contenido.

Evita frases genéricas como «imagen de…» o «foto de…» en el alt

Esto es un consejo clásico: no comiences tus alt con «Imagen de…» porque es redundante. Los lectores de pantalla ya suelen anunciar que hay una imagen, o en todo caso ese dtalle no aporta nada a quien escucha. Ir al grano con la descripción. Por ejemplo, en lugar de alt=»Foto de paisaje de Guatapé», simplemente alt=»Paisaje de Guatapé con el Peñol al fondo» es preferible. La única excepción podría ser si la naturaleza fotográfica de la imagen es relevante (lo cual rara vez sucede; normalmente no lo es).

Si la imagen contiene texto importante, inclúyelo en el alt

Por ejemplo, un banner que dice «50% de descuento este Black Friday» debería tener ese mensaje en el alt (alt=»50% de descuento este Black Friday»), ya que es información que de otro modo un usuario con lector de pantalla se perdería. (Y desde el lado SEO, también tiene sentido porque ese texto puede ser relevante). En general, es mejor no incrustar texto dentro de imágenes, pero si lo haces, asegúrate de reflejarlo en el alt.

Contextualiza la imagen dentro del contenido

Piensa que el alt no existe en el vacío, sino dentro de una página con un tema. Por ejemplo, un alt=»Mesa servida con bandeja paisa» puede ser suficiente en una página de recetas antioqueñas, pero podría necesitar más contexto si la página es sobre turismo gastronómico (quizá alt=»Turistas disfrutando de una bandeja paisa tradicional en Medellín»). El contexto manda: describe lo que la imagen aporta a la página.

Siguiendo estas prácticas, te aseguras de crear alt text útil tanto para usuarios como para SEO. En resumen: se claro, relevante y natural. A continuación, veamos algunos ejemplos concretos de cómo se vería un buen alt en HTML, así como casos de alt mal empleados que deberías evitar.

Errores comunes a evitar

Aunque ya hemos insinuado varios errores a lo largo de las buenas prácticas, repasemos algunos errores comunes al utilizar el atributo alt, para que puedas evitarlos en tu sitio:

• Dejar imágenes sin alt (o alt vacío cuando la imagen sí tiene contenido): Este es el fallo más grave. Olvidar poner el alt significa una oportunidad perdida en SEO y un posible muro para la accesibilidad. Recuerda, toda imagen debe tener un atributo alt; si no es informativa (decorativa), alt=»» deliberadamente, pero no la dejes sin el atributo porque los validadores de accesibilidad la marcarán como error. Lamentablemente, muchas herramientas CMS o creadores de contenido pasan esto por alto, y por eso tantas imágenes online carecen de texto alternativo​. ¡No seas parte de esa estadística!
• Rellenar de palabras clave irrelevantes (keyword stuffing): Un alt no debe parecer una lista de términos SEO. Google lo desaconseja explícitamente. Además, para alguien oyendo con un lector de pantalla, escuchar «zapatos, zapatos Medellín, zapatos tienda online, zapatos descuento» sería una experiencia terrible. Prioriza describir por encima de meter keywords a la fuerza. Google premia la relevancia y utilidad; un alt con keywords sin sentido podría ser ignorado o visto incluso como spam. Como dijo un representante de Google, la accesibilidad debe ser la prioridad al redactar el alt text, no “escalar en el ranking”​.
• Ser demasiado vago o genérico: Poner alt=»imagen1″ o alt=»gráfico» o alt=»foto» es prácticamente como no poner nada (o peor, porque el lector de pantalla leerá “imagen 1” que no le comunica nada útil). Evita también descripciones excesivamente básicas tipo «mujer», «perro», «computadora» sin contexto. Siempre puedes dar un poco más de detalle: “Mujer sonriente usando una computadora portátil” en lugar de solo “mujer”. Si te encuentras poniendo algo tan genérico que no distinguiría esa imagen de cualquier otra, es señal de que debes mejorar la descripción.
• Repetir información del contexto inmediato: Si justo al lado de la imagen hay un pie de foto o un texto que ya describe la imagen, a veces calcar ese texto en el alt puede ser redundante. Esto no es un error gravísimo (Google no te va a penalizar por ello), pero para la persona con lector podría significar escuchar lo mismo dos veces. Puedes ajustar el alt para complementar la información o, si la imagen está completamente explicada por texto adyacente, decidir si un alt muy breve o alt=»» tiene sentido. En general, nunca está mal tener alt descriptivo, pero usa tu criterio para no saturar de información duplicada.
• Usar el mismo alt en imágenes diferentes: Como mencionamos, cada imagen distinta debe tener su propio alt único. Un error típico es subir muchas fotos y poner a todas alt=»Galería de productos» o repetir el nombre de la categoría. Esto es poco útil. Mejor dedica unos segundos a personalizar cada uno. Piensa que si alguien busca en Google Imágenes, ¿cómo diferenciará Google (y el usuario) una imagen de otra si todas tienen la misma descripción? Diversificar los alt enriquece la semántica de tu página.
• No actualizar el alt al cambiar la imagen: Ocurre en algunos CMS: sustituyes la imagen pero olvidas cambiar el alt. Por ejemplo, tenías alt=»Niño jugando fútbol» pero luego cambiaste la foto a una niña jugando baloncesto. Si no actualizas, habrá una discrepancia. Es un error menor, pero puede confundir. Siempre que edites imágenes en tu contenido, revisa que el alt coincida con la nueva imagen.
• Pensar que el atributo title es lo mismo que alt: A veces la gente confunde title con alt. El atributo title en imágenes puede mostrar un tooltip al pasar el mouse, pero no reemplaza al alt en absoluto para SEO ni accesibilidad. De hecho, muchos lectores de pantalla ni siquiera leen el title. Así que asegúrate de poner el alt; el title es opcional y sirve para otros propósitos. No creas que por poner title=»…» ya cumpliste – son cosas diferentes.

Evitar estos errores te ayudará a mantener un estándar de calidad en tu sitio. En pocas palabras: escribe alt texts pensando en las personas primero (especialmente en quienes no ven la imagen), y verás que eso naturalmente alineará el uso de alt con el SEO ideal.

El atributo alt puede parecer un detalle técnico menor dentro del vasto mundo del SEO, pero como hemos visto, su impacto es significativo en dos frentes: posicionamiento en buscadores y accesibilidad web. Un buen manejo del texto alternativo en las imágenes de tu sitio puede mejorar tu visibilidad en Google (especialmente en búsquedas de imágenes), reforzar la relevancia de tus páginas para ciertas keywords de nicho y, muy importante, hacer tu contenido accesible e inclusivo para personas con discapacidades visuales.

En una estrategia de marketing digital integral, ningún detalle debe quedar desatendido. Si estás buscando potenciar el SEO de tu sitio en Colombia –ya seas un emprendedor en Medellín queriendo destacar tu tienda online, o parte de una agencia de marketing digital optimizando sitios de clientes–, asegúrate de auditar tus imágenes y añadir textos alternativos descriptivos allá donde falten. Recuerda las lecciones: describir con claridad, evitar malas mañas (como rellenar de palabras clave sin sentido), y aprovechar las herramientas que tus plataformas te brindan para gestionar estos atributos de forma eficiente.