Atributos alt y title en imágenes y cómo usarlos bien en SEO
Si te has fijado en tu web y ves que siempre hay dos casillitas que parecen importantes y ponen texto alternativo y título, esto de los atributos alt y title es bastante importante para tu proyecto.
Comprobarás que la información en este tema es bastante confusa, pero ya te adelantamos que hacerlo mal llega a suponer perder visibilidad en Google y empeorar la calidad técnica de tu sitio.
Como siempre en el blog de Raiola Networks vamos a ver todos los aspectos. Repasamos el impacto en tu posicionamiento SEO y cómo hace tu web más accesible, para que sepas cómo optimizarlo adecuadamente con los recursos que tienes.
- ¿Qué son los atributos alt y title en imágenes?
- Qué es el atributo alt en imágenes y para qué sirve
- Qué es el atributo title en imágenes y para qué sirve
- Diferencia entre alt y title en imágenes HTML: comparativa clara
- Cuándo usar el atributo alt y cuándo el title (o ambos)
- Ejemplos de código HTML reales con alt y title
- Impacto del texto alternativo en el SEO de imágenes
- Cómo Google lee el atributo alt para indexar y posicionar imágenes
- Atributo alt imágenes SEO: buenas prácticas para posicionar en Google Imágenes
- ¿Qué pasa si no pones el atributo alt en una imagen?
- Accesibilidad web y obligatoriedad del atributo alt: normativa WCAG
- Por qué el atributo alt es obligatorio según las pautas WCAG 2.1
- Implicaciones legales en España: Ley de Accesibilidad y sitios web obligados a cumplirla
- Cómo añadir el atributo alt en WordPress paso a paso
- Añadir el texto alternativo desde la biblioteca de medios de WordPress
- Plugins para auditar y optimizar los atributos alt en WordPress en masa
- Cómo optimizar el texto alternativo de imágenes: metodología práctica
- Proceso paso a paso para auditar las imágenes sin atributo alt en tu web
- Errores comunes con los atributos alt y title que penalizan tu posicionamiento
- Rellenar el alt con la keyword principal en todas las imágenes (keyword stuffing)
- Usar el nombre del archivo de imagen como texto alternativo
- Dejar el atributo alt vacío en imágenes informativas o de producto
- Confundir el campo 'título' de WordPress con el atributo title HTML
- Duplicar el contenido del alt y el title con el mismo texto
- Otros factores SEO para imágenes que complementan el alt y el title
- Nombre del archivo de imagen optimizado para SEO
- Compresión y formato de imagen: WebP, AVIF y su impacto en Core Web Vitals
- Incluir las imágenes en el sitemap XML para facilitar la indexación
- Lazy loading y atributo loading en imágenes para mejorar el rendimiento
¿Qué son los atributos alt y title en imágenes?
Para entender estos elementos no hace falta ser un programador experto, pero sí viene bien recordar que, para los navegadores y los motores de búsqueda, una imagen no es más que una línea de código HTML. Por tanto, los atributos son propiedades que añadimos dentro de la etiqueta para darle contexto a ese archivo multimedia.
Qué es el atributo alt en imágenes y para qué sirve
El atributo alt es, sin ninguna duda, el elemento técnico más importante de cualquier imagen que subas a tu servidor.
Su nombre viene de alternative text (texto alternativo), y su función principal es sustituir conceptualmente a la imagen cuando esta no se puede ver. Las personas invidentes o con ciertas discapacidades, por darte un ejemplo rápido, literalmente dependen de estos textos alternativos.
El atributo alt como texto alternativo: accesibilidad y SEO
En esencia, cumple una doble función fundamental en el ecosistema web actual:
- Para los usuarios (accesibilidad): Si un visitante tiene problemas de visión, como hemos comentado, y entra a tu web mediante un lector de pantalla, el software leerá el texto que pongas en el alt para explicarle qué hay en ella. Por otra parte, si tu servidor de hosting va lento o el usuario tiene una conexión móvil regular y la imagen, por lo que sea, no llega a cargar, el navegador pondrá este texto en su lugar.
- Para los buscadores (SEO): Google, por muy inteligente que sea e incluso con su inteligencia artificial, sigue utilizando el texto del atributo alt como la principal fuente para entender de qué va una fotografía e indexarla correctamente en su base de datos.
Lo fundamental es entender que los atributos alt no son opcionales. En el sentido de que no tenerlos realmente te va a perjudicar.
¿Es obligatorio poner el atributo alt en todas las imágenes?
Aquí viene la primera gran sorpresa para muchos desarrolladores junior y propietarios de páginas web: técnicamente sí, siempre debe estar presente en el código HTML.
Ahora bien, obligatorio, obligatorio, no lo es en el sentido de que vaya a llegarte un burofax a casa. Además, que deba estar presente no significa que haya de tener texto siempre.
El estándar global dictamina que todas las imágenes deben incluir el atributo alt. Si la imagen aporta información, el atributo debe estar rellenado. Eso sí: si la imagen es decorativa y nada más, el atributo debe dejarse vacío (alt=""), pero nunca debes borrar la etiqueta del código. Más adelante veremos cómo tratar cada caso para que no cometamos errores aquí.
Qué es el atributo title en imágenes y para qué sirve
El atributo title tiene objetivos bastante más discretos y orientados al usuario de escritorio que te visita desde el ordenador, vaya.
El atributo title como información complementaria y tooltip
A diferencia del alt, el title sirve para aportar información secundaria o contextual sobre el elemento visual. Su efecto es ante todo estético, pues si el usuario entra desde un ordenador y deja el cursor del ratón parado encima de una imagen durante un segundo, aparece un pequeño flotante amarillo o gris (llamado tooltip) mostrando el texto que has escrito.
¿El atributo title en imágenes mejora realmente el posicionamiento SEO?
Vamos a ser directos para ahorrarte horas de trabajo inútil:
No, el atributo title en imágenes no tiene ningún impacto directo en el SEO.
Google ha confirmado por activa y por pasiva en sus guías que ignora este atributo a la hora de posicionar las imágenes en sus resultados de búsqueda y en Google Imágenes. Rellenarlo pensando que vas a ganar SEO es una pérdida de tiempo total. Porque su uso debe responder únicamente a mejorar la experiencia de usuario o la usabilidad de la interfaz cuando consideres oportuno aclarar algo. Sí afecta al posicionamiento de otras formas, pero no resuelvas la ecuación pensando que poner esto te va a llevar a posición top.
Diferencia entre alt y title en imágenes HTML: comparativa clara
Para que nunca más vuelvas a dudar frente a la pantalla de tu CMS, vamos a estructurar las diferencias clave entre ambos atributos en una tabla técnica comparativa.
| Característica | Atributo alt | Atributo title |
|---|---|---|
| Función | Describir el contenido de la imagen de forma textual. | Añadir información complementaria de ayuda. |
| Impacto SEO | Crítico. Fundamental para rankear en Google Imágenes. | Nulo. Los motores de búsqueda lo ignoran para SEO. |
| Accesibilidad (WCAG) | Obligatorio. Lo leen los lectores de pantalla para invidentes. | Opcional. Los lectores suelen saltárselo para evitar redundancia. |
| Comportamiento | Solo se ve si la imagen falla o tarda en cargar. | Aparece como un tooltip flotante al pasar el ratón por encima. |
| Obligatoriedad HTML | Sí, debe aparecer en el código (aunque sea vacío). | Totalmente opcional. Puedes omitirlo sin problemas. |
Ahora que todo está más claro, veamos cuándo deberás usar cada uno de forma más precisa.
Cuándo usar el atributo alt y cuándo el title (o ambos)
Quédate con la idea de que el atributo alt lo vas a usar siempre.
Cada vez que subas un gráfico, una captura de pantalla, un logotipo o una foto de producto a tu web, tienes que configurar su texto alternativo.
Por el contrario, el atributo title lo vas a reservar para situaciones muy puntuales de diseño. Por ejemplo, para un icono de un calendario donde quieras que al pasar el ratón aparezca "Haz clic para ver disponibilidad". Insistimos porque es importante: si no aporta valor, déjalo vacío.
Ejemplos de código HTML reales con alt y title
Para los que os gusta trabajar con código o revisar lo que genera vuestro editor visual desde la pestaña de texto, vamos a ver cómo se estructuran estos atributos mediante tres supuestos muy comunes.
Ejemplo correcto: imagen informativa con atributo alt descriptivo
Imagina que tenemos un blog y subimos una fotografía que muestra el interior de un móvil de última generación donde se aprecia perfectamente cada componente. El código óptimo de cara a Google y a la accesibilidad web sería este:
<img src="procesador-A16.jpg" alt="Procesador A16 de teléfono iPhone instalado correctamente">
Esto resulta superútil porque explica detalladamente lo que ve un ojo humano y ayuda al motor de búsqueda a catalogar el archivo de forma exacta.
Ejemplo correcto: imagen decorativa con alt vacío
Ahora supongamos que estás diseñando una sección de tu web y añades una línea sutil con forma ondulada para separar un bloque de otro.
<img src="linea-separadora-ondulada.svg" alt="">
Al dejar las comillas del alt juntas y vacías (alt=""), le estás mandando una señal clara al lector de pantalla para que “pase de largo” de forma inteligente y no moleste al usuario leyendo código que le rompe la cabeza más que otra cosa.
Ejemplo con atributo title: cuándo tiene sentido añadirlo
Veamos el caso de un panel de administración para clientes de un servicio de hosting. Tienes un gráfico pequeño con el dibujo de un disco duro que muestra el espacio consumido.
<img src="icono-disco-almacenamiento.png" alt="Gráfico de consumo de espacio en disco duro SSD" title="Espacio actual consumido: 45 GB de 100 GB contratados">
Este alt describe el elemento gráfico para cumplir las pautas técnicas de accesibilidad. Por su parte, el title expande la información para ofrecer un dato útil en tiempo real cuando el cliente pasa el ratón por encima del icono. Perfecto.
Impacto del texto alternativo en el SEO de imágenes
Pasemos a la parte que toca de forma directa al tráfico orgánico de tu web. Optimizar las imágenes sí es una fuente brutal de visitas si sabes cómo estructurarlas; por lo tanto, es una buena práctica de SEO.
Cómo Google lee el atributo alt para indexar y posicionar imágenes
Los bots de Google (conocidos de forma general como Googlebot) rastrean el código fuente de tu sitio web de arriba a abajo. Cuando ven una etiqueta <img>, comprueban la ruta del archivo y analizan de forma prioritaria el contenido que almacena su atributo alt.
Google procesa esa cadena de texto y la cruza con dos elementos contextuales clave:
- El texto que rodea a la imagen: si la foto está metida en medio de un párrafo que habla sobre "cómo configurar un servidor virtual VPS", y el alt de la foto coincide temáticamente, Google le dará un peso enorme a ese recurso.
- El contenido general de la página: ayuda a reforzar la autoridad del artículo sobre la materia de la que estás escribiendo.
Si haces coincidir de forma natural el texto alternativo con la temática de tu contenido, conseguirás que Google indexe la imagen rápidamente y “entienda” que tu página ofrece un recurso visual rico. Eso sube mucho la calidad general de tu URL frente a la competencia, ya que es raro que la gente mire estas cuestiones.
Atributo alt imágenes SEO: buenas prácticas para posicionar en Google Imágenes
Si quieres que tus imágenes aparezcan en las primeras posiciones de Google Imágenes y te traigan visitas a tu web, debes seguir un método de redacción estricto pero natural.
Vamos a verlo como siempre con ejemplos:
- Mal: alt="hosting barato hosting economico mejor hosting españa".
- Poco trabajado: alt="imagen de un servidor".
- Perfecto: alt="Rack de servidores dentro de la sala principal de un centro de datos profesional".
Es cierto que lleva un poco de trabajo hacerlo así. Pero ten en cuenta que para SEO y AEO (es decir, búsquedas en IA) estos temas son cada vez más importantes.
Cómo escribir un texto alternativo descriptivo y con keyword natural
El secreto definitivo para redactar un alt perfecto consiste en cerrar los ojos e imaginar que estás hablando por teléfono con un amigo. Describe la foto que tienes delante en una sola frase. ¿A que es más fácil así?
Por si acaso, te damos dos ideas más:
- Evita las introducciones redundantes: no empieces tus textos con "Imagen de..." o "Fotografía sobre...". Google ya sabe de sobra que es una imagen por la propia etiqueta HTML. Ve al grano.
- Integra la palabra clave de forma lógica: no metas tus keywords con calzador. Si tu artículo habla sobre "optimizar imágenes SEO WordPress", busca una imagen de la interfaz de administración y escribe algo como: alt="Panel de administración de WordPress configurando las opciones de optimización de imágenes". Eso pone tus términos de búsqueda de forma nativa y aporta valor real.
Como ves, como siempre, se trata de no forzar las cosas y que se trabaje todo de forma natural y priorizando al usuario.
Longitud recomendada del atributo alt para SEO
La brevedad es una virtud en el on-page de tu sitio web. Lo recomendable es mantener el texto alternativo por debajo de los 125 caracteres (unas 10 o 15 palabras como máximo).
¿Por qué este límite? Ese límite es una convención de buenas prácticas heredada de versiones antiguas, no una limitación técnica real de los lectores actuales. Así, Google tiende a ignorar las descripciones excesivamente largas, que parecen párrafos de texto metidos a la fuerza en el código fuente.
¿Qué pasa si no pones el atributo alt en una imagen?
Ignorar el texto alternativo en tus contenidos visuales tiene un impacto directo a nivel técnico. No es un detalle menor que puedas posponer de forma indefinida porque se mide, literalmente, en tus resultados.
Consecuencias en herramientas de auditoría: Lighthouse, SEMrush y Search Console
Cuando dejas imágenes sin etiqueta alt, las herramientas de análisis de rendimiento web te van a penalizar la nota de forma automática. En Google Lighthouse bajará drásticamente tu puntuación en el apartado de Accesibilidad, lo que repercute de forma indirecta en cómo evalúa Google la calidad de tu sitio.
Por su parte, hasta las herramientas pro como SEMrush clasificarán estas omisiones como advertencias de prioridad media en su informe Site Audit, afectando negativamente a la salud de tu web si acumulas cientos de imágenes rotas técnicamente.
Es malo para el usuario. Por lo tanto, es malo para tu web. Quédate con eso.
Penalizaciones SEO y pérdida de visibilidad en búsqueda de imágenes
Aunque Google no te va a aplicar una penalización manual (es decir, no te va a borrar de los resultados de búsqueda por no poner un alt), el castigo real es que serás invisible y estarás “regalando” una cantidad ingente de tráfico orgánico.
Si tienes una tienda online o una web con imágenes sin texto alternativo, tendrás muy pocas probabilidades de aparecer en Google Imágenes. Estás limitando el crecimiento de tu proyecto sin ninguna necesidad. No subestimes ese tráfico, pues Google Imágenes, Google Lens y similares están creciendo muchísimo.
Accesibilidad web y obligatoriedad del atributo alt: normativa WCAG
Por si lo anterior fuese poco, la realidad es que optimizar el texto alternativo es una cuestión de responsabilidad social.
Ten en cuenta que, como afecta a la usabilidad, es un tema que cada vez está más regulado, como verás.
Por qué el atributo alt es obligatorio según las pautas WCAG 2.1
Las WCAG 2.1 vienen a ser el estándar que define cómo hacer que los contenidos web sean accesibles a personas con discapacidad.
La pauta 1.1.1 establece de forma categórica que todo contenido no textual debe tener una alternativa textual que cumpla el mismo propósito. Cuando una persona invidente entra a tu web, utiliza un software lector de pantalla (como NVDA o JAWS) que convierte el código en voz.
Si el lector encuentra una imagen informativa sin el atributo alt, se verá obligado a leer el nombre interno del archivo (por ejemplo: IMG_4920_final.jpg), destruyendo por completo la experiencia de usuario.
Implicaciones legales en España: Ley de Accesibilidad y sitios web obligados a cumplirla
A nivel español, esa accesibilidad web también está regulada por el Real Decreto 1112/2018. Antes era solo para la Administración, pero desde junio de 2025 la Ley Europea de Accesibilidad ya extiende esa obligación a gran parte del sector privado.
Ojo, porque aquí sí te expones a sanciones por discriminación digital, en este caso el acceso a tu web. Y va a ir cada vez a más.
Cómo añadir el atributo alt en WordPress paso a paso
Si tu web está hecha con WordPress, estás de suerte. El CMS líder del mercado gestiona los metadatos de las imágenes de una forma muy visual en su interfaz.
Vamos, que puedes optimizar todo sin necesidad de tocar el código HTML a mano en el servidor.
Añadir el texto alternativo desde la biblioteca de medios de WordPress
El centro neurálgico para gestionar tus recursos visuales es la Biblioteca de Medios.
Tienes dos formas de meter mano a esta optimización, dependiendo del momento en el que te encuentres:
Cómo editar el alt al subir una imagen nueva
Cuando estás redactando un artículo en el editor de bloques (Gutenberg) o subiendo contenido a tu página y arrastras una imagen al sistema, se abre una pestaña lateral de ajustes a la derecha de la pantalla.
Allí verás un campo de texto específico llamado "Texto alternativo (alt)". Escribe ahí tu descripción descriptiva siguiendo las buenas prácticas y el sistema inyectará la etiqueta HTML correcta de forma automática en el código de la página.
Cómo actualizar el alt de imágenes ya publicadas en WordPress
Si tienes un blog antiguo y quieres hacer limpieza de los archivos que ya están subidos, ve a tu panel de administración de WordPress y haz clic en Medios > Biblioteca. Selecciona la miniatura de la imagen que quieras corregir y se abrirá una ventana emergente con los detalles del archivo adjunto.
A la derecha, verás el campo "Texto alternativo". Rellénalo. Lo bueno de hacerlo desde aquí es que, a partir de ese momento, cada vez que uses esa imagen en cualquier sección de tu web, WordPress arrastrará ese alt por defecto.
Plugins para auditar y optimizar los atributos alt en WordPress en masa
Si tu web tiene miles de imágenes huérfanas que carecen de texto alternativo, abrirlas una a una en la biblioteca te va a costar semanas de trabajo.
Para solucionar esto, existen plugins específicos que te permiten automatizar o agilizar el proceso en masa:
- BIALTY (Bulk Image Alt Text Optimization): Es un plugin fantástico que utiliza variables inteligentes (como el título del post o la categoría del producto) para rellenar de forma masiva los atributos alt vacíos de tus imágenes antiguas.
- Image SEO Optimizer: Este plugin utiliza algoritmos de inteligencia artificial para analizar el contenido visual de tus fotografías y generar un texto alternativo descriptivo de forma automática en cuanto subes el archivo.
Ya te imaginas que hacerlo así te ahorra muchísimo tiempo. Así que aprovéchalo si tienes una web muy grande.
Cómo optimizar el texto alternativo de imágenes: metodología práctica
Para que no te agobies con el volumen que podrías tener, te recomendamos trazar un plan de acción proporcionado a los recursos que tengas antes de ponerte a tocar las etiquetas de tus contenidos visuales.
Proceso paso a paso para auditar las imágenes sin atributo alt en tu web
El método más rápido y eficiente para cazar esos huecos vacíos en tu web es utilizar la versión gratuita de Screaming Frog:
- Descarga el programa, pon la URL de tu página web en la barra superior y dale al botón de "Start".
- Una vez termine el rastreo, ve al menú de pestañas de la parte superior y haz clic en la pestaña "Images".
- En el menú desplegable llamado "Filter", selecciona la opción "Missing Alt Text". El programa te mostrará un listado con todas las imágenes de tu web que no tienen atributo alt. Solo tienes que exportar esa lista o ir abriendo esas páginas en tu WordPress para rellenar los huecos.
Nuestro consejo es que empieces siempre por las páginas que más tráfico te traen. Más que nada porque es lo más eficiente.
Errores comunes con los atributos alt y title que penalizan tu posicionamiento
Para asegurarte de que tu trabajo da resultados positivos en Google, ojo con estos fallos recurrentes que vemos día sí y día también:
Rellenar el alt con la keyword principal en todas las imágenes (keyword stuffing)
Si en un mismo artículo tienes cuatro imágenes distintas y a las cuatro les pones exactamente el mismo alt="hosting económico", Google detectará que estás intentando manipular el algoritmo. Cuidado, que esto supone zona de peligro. Usa variaciones naturales y describe lo que realmente pasa en cada foto.
Usar el nombre del archivo de imagen como texto alternativo
De nada sirve que tu etiqueta alt diga foto-1-v2-modificada. Si la imagen aporta información, sustitúyela por una descripción real y útil. Recuerda: el alt vacío solo está reservado para imágenes puramente decorativas. El texto alternativo debe ser una frase humana y con sentido para el usuario.
Dejar el atributo alt vacío en imágenes informativas o de producto
Si vendes un artículo en un e-commerce y tu imagen de producto no tiene alt, estás perdiendo la oportunidad de oro de aparecer en las búsquedas transaccionales de Google Imágenes. Los productos entran por los ojos, así que dejarlo en blanco es mala idea.
Confundir el campo 'título' de WordPress con el atributo title HTML
En la biblioteca de medios de WordPress hay un campo llamado "Título". Ese campo sirve para la organización interna de la base de datos de tu WordPress; no es el atributo title de HTML que genera el menú flotante una vez accedes con el navegador. No te obsesiones con rellenarlo.
Duplicar el contenido del alt y el title con el mismo texto
Copiar y pegar exactamente la misma frase en el campo de texto alternativo y en el de título es un desperdicio de código y una molestia para la experiencia de usuario. Si vas a poner lo mismo, es mucho mejor que dejes el title totalmente vacío.
Otros factores SEO para imágenes que complementan el alt y el title
La optimización de imágenes no se termina en las etiquetas alt y title. Si de verdad quieres que tu web vuele y que Google indexe tus recursos a la velocidad de la luz, tienes que cuidar toda la infraestructura técnica que rodea a tus archivos multimedia. Vamos a ver los factores clave.
Nombre del archivo de imagen optimizado para SEO
El trabajo empieza en tu ordenador antes de subir nada a los servidores de tu hosting. Los buscadores leen el nombre de la URL de la imagen. Evita las mayúsculas, los acentos, los caracteres especiales (como la ñ) y los espacios en blanco. Utiliza siempre guiones medios para separar las palabras, así: hosting-wordpress-profesional.jpg.
Compresión y formato de imagen: WebP, AVIF y su impacto en Core Web Vitals
El peso de las imágenes es el principal culpable de que una página web cargue lenta. Trata de no subir formatos de imagen antiguos como PNG o JPEG para tus imágenes grandes. El estándar prioriza utilizar formatos de nueva generación como WebP o AVIF. Estos formatos ofrecen una compresión brutal manteniendo una calidad visual excelente; pueden reducir el peso de los archivos de forma significativa, entre un 25% y un 50% según el caso.
Ojo, porque esto influye directamente en las métricas de las Core Web Vitals de Google (especialmente en el Largest Contentful Paint o LCP). Ten en cuenta que un hosting optimizado para SEO combinado con imágenes ligeras mejora notablemente tus tiempos de carga.
Incluir las imágenes en el sitemap XML para facilitar la indexación
Si tu sitio web tiene una arquitectura compleja o utilizas galerías de imágenes dinámicas mediante JavaScript, es muy posible que a los robots de Google les cueste encontrar tus archivos visuales.
Asegúrate de configurar tu plugin de SEO (como Rank Math o Yoast) para que incluya las rutas de tus imágenes dentro del archivo sitemap.xml de tu web. Así le darás a Google todas las facilidades.
Lazy loading y atributo loading en imágenes para mejorar el rendimiento
La carga diferida o Lazy Loading es una técnica que le dice al navegador que no descargue las imágenes de la parte inferior de la página hasta que el usuario no haga scroll y se acerque a ellas. Esto ahorra una cantidad enorme de ancho de banda en tu servidor y acelera la carga inicial de la web.
Ten en cuenta que actualmente WordPress ya integra esta función de forma nativa, añadiendo el atributo loading="lazy" a tus imágenes de manera automática. Eso sí, asegúrate de desactivarlo manualmente mediante código o tu plugin de optimización para la primera imagen de tu página (el banner principal o hero image), ya que esa sí debe cargar de inmediato.
José Carlos
01/09/2022 a las 09:06Ángela, muy buen artículo. Fácil de leer y sencillo de entender. ¡¡Muchas gracias!!