La descripción de las imágenes se realiza a través de las «Etiquetas Alt» las cuales son muy importantes para el proceso de optimización y para asegurar la accesibilidad de las páginas web por parte de los motores de búsqueda. Las etiquetas de título contienen información sobre las imágenes al proporcionar sugerencias. Las etiquetas de título no se utilizan en absoluto para el posicionamiento de Google. Las etiquetas Alt deben estar siempre presentes en el código HTML: pueden estar llenas en imágenes informativas o incluso vacías en las decorativas, dependiendo de la imagen.
Tan pronto como pases por tu web y te des cuenta de que siempre hay dos casillitas muy importantes que requieren un texto alternativo y un título, se vuelve realmente necesario que conozcas todo acerca de los atributos alt y de título para tu proyecto.
Sin duda puedes comprender la confusión que esta información te causa ya que es un hecho que te hemos advertido antes que cometer errores tendría consecuencias graves para ti como por ejemplo ser menos visible en los resultados de búsqueda de Google y empeorar la calidad técnica de tu sitio.
No se puede negar el hecho de que todo lo relacionado con el tema será discutido en el Blog de RichAffiliate. Todo acerca de su impacto en el posicionamiento en los motores de búsqueda así como la accesibilidad de tu sitio web será discutido con el fin de ayudarte a comprender su aspecto de optimización.
¿Qué son los atributos alt y title en imágenes?
No tienes que ser un desarrollador de software profesional para comprender estos factores. Lo único que debes recordar es que desde el punto de vista de un motor de búsqueda y un navegador web las imágenes son simplemente etiquetas HTML.
Qué es el atributo alt en imágenes y para qué sirve
Sin duda el atributo alt es la característica más importante relacionada con las imágenes que se publican en el servidor.
El término alt text es de donde proviene este término y lo más importante acerca del texto alternativo es que es un sustituto conceptual de las imágenes que no se pueden ver. Por ejemplo las personas que son visualmente impedidas o que tienen cualquier otra discapacidad pueden depender únicamente del texto alternativo.
El atributo alt como texto alternativo: accesibilidad y SEO
Principalmente cumple una doble función fundamental en el mundo de Internet de hoy en día.
- 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.
Sin embargo lo que importa aquí es el hecho de que simplemente no tienes ninguna opción con respecto al uso de los atributos alt. Significa que ni siquiera puedes pensar en no usarlos.
¿Es obligatorio poner el atributo alt en todas las imágenes?
Pero esto es lo que tengo que decir, es una obligación, una obligación, pero eso no significa que te vaya a llegar un burofax a casa. Y solo porque tenga que estar ahí no significa que tenga que tener texto siempre.
Según las directrices internacionales el «tag» «alt» se supone que se debe usar con todas las imágenes. Además donde haya alguna información en la imagen dicha información también se requiere que se utilice junto a la imagen. Esto implica que donde la imagen en sí misma no tenga información útil sino que solo sirva con fines decorativos entonces el «tag» se debe dejar en blanco es decir (alt=»») aunque no necesariamente se deba quitar del código.
Qué es el atributo title en imágenes y para qué sirve
Sin embargo el «atributo» de título esconde muchos motivos ocultos detrás de él y se utiliza principalmente para los usuarios de escritorio que visitan la página desde un ordenador.
El atributo title como información complementaria y tooltip
Además, el title, a diferencia del alt, ofrece información extra pero la ofrece en formato textual. Es aquí donde hablamos de la estética. Después de que el usuario de la computadora mueva el puntero del mouse sobre la imagen por unos segundos verá una caja amarilla o gris con el texto escrito en ella.
¿El atributo title en imágenes mejora realmente el posicionamiento SEO?
Vamos a ser directos para ahorrarte horas de trabajo inútil:
Definitivamente no. El atributo title de una imagen no tiene ningún efecto directo sobre el SEO.
Existen ciertos factores para clasificar imágenes que han sido oficialmente declarados por Google para usar para clasificar imágenes en Google Imágenes o en la Página de Resultados de Búsqueda. Ellos no tienen en cuenta este atributo cuando deciden la ubicación de tu imagen en su sitio web. No obtendrás ningún beneficio SEO por llenar este campo ya que solo estarías perdiendo tu tiempo, ya que el propósito principal de este campo es hacerte la vida más fácil si necesitas 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.
Demostraré una forma de diferenciar las dos propiedades para evitar cualquier problema con tu monitor de CMS.
| 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. |
Y como ahora sabemos todo lo que vamos a discutir, veamos cuándo aplicar cada uno.
Cuándo usar el atributo alt y cuándo el title (o ambos)
Quédate con la idea de que tendrás que usar el atributo «alt» todo el tiempo.
Cuando subes fotos, gráficos, logotipos o capturas de pantalla a tu sitio web debes incluir texto alternativo.
Más bien el uso de un «título» se limita únicamente a casos excepcionales. Una de esas excepciones es el icono del calendario donde tenemos una regla que exige la presencia de la frase «Haga clic para ver la disponibilidad» cuando el puntero del mouse pasa por encima de él. Le recomendamos encarecidamente esto por el bien de nuestra filosofía de dejarlo en blanco en ausencia de alguna información adicional.
Ejemplos de código HTML reales con alt y title
Si te gusta trabajar con código o examinar el texto fuente creado con la pestaña de texto de un editor visual, exploremos la estructura de estos atributos de acuerdo a los tres supuestos muy comunes siguientes.
Ejemplo correcto: imagen informativa con atributo alt descriptivo
Si hay un blog y una imagen de la estructura interna de un teléfono celular que muestre todos los componentes se publica en él entonces las palabras clave relevantes que se pueden usar cuando se busca a través del motor de búsqueda de Google serían….
<img src=»procesador-A16.jpg» alt=»Procesador A16 de teléfono iPhone instalado correctamente»>
De hecho es muy beneficioso porque describe detalladamente lo que ve el ojo humano. Esto ayuda al motor de búsqueda a catalogar el archivo de forma exacta.
Ejemplo correcto: imagen decorativa con alt vacío
Ahora piensa en ti mismo diseñando una sección para tu página web y decides crear una pequeña ola para diferenciar dos bloques.
<img src=»linea-separadora-ondulada.svg» alt=»»>
Este es un asunto que debe resolverse usando medios inteligentes sin incomodar al usuario a través de un código que solo complica las cosas para el usuario.
Ejemplo con atributo title: cuándo tiene sentido añadirlo
Esto debe verse como el panel de administración para los clientes de un servicio de hosting. Hay un esquema que muestra el icono de un disco duro con la cantidad de espacio utilizado.
Imagen: gráfico del uso del disco de almacenamiento de tipo SSD, usando el ícono “icono-disco-almacenamiento.png”. El título dice “espacio actualmente consumido: 45 GB de 100 GB contratados”.
En cuanto al texto alternativo, este sirve como la explicación de la imagen de acuerdo a los criterios de accesibilidad. Por otro lado, el título es una ampliación del contenido el cual proporciona información oportuna cuando colocas el cursor sobre el ícono. ¡Genial!
Impacto del texto alternativo en el SEO de imágenes
Ahora centrémonos en el aspecto que se refiere al tráfico orgánico generado por tu sitio web. Optimizar las imágenes sí es una fuente enorme de visitas si conoces la manera de estructurarlas; por lo tanto, entra dentro de las buenas prácticas de SEO.
Cómo Google lee el atributo alt para indexar y posicionar imágenes
Si el Googlebot encuentra la existencia de una etiqueta «img» entonces va a ver dónde se almacena dicho archivo y se centra más en el análisis del contenido de la etiqueta «alt».
El análisis del texto por parte de Google tomará en cuenta dos importantes consideraciones contextuales fundamentales…
- El texto que rodea a la imagen: si la foto está insertada en medio de un párrafo que trata sobre «cómo configurar un servidor virtual VPS«, y el alt de la foto coincide temáticamente, Google le otorgará una relevancia considerable a ese recurso.
- El contenido general de la página: contribuye a reforzar la autoridad del artículo sobre el tema del que estás escribiendo.
Pero una vez que puedas acostumbrarte a asociar automáticamente un texto alternativo con la temática de tu contenido, Google indexará tanto tu imagen como tu página. Esto es ventajoso en comparación con los sitios de la competencia, ya que nadie más presta atención a estos detalles.
Atributo alt imágenes SEO: buenas prácticas para posicionar en Google Imágenes
Es importante tener en cuenta que para que tus fotos salgan primero en Google Imágenes y te atraigan visitas a tu web hay algo que debes hacer.
Veámoslo, 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».
Dicho esto es un hecho que se requiere un esfuerzo por tu parte. Sin embargo lo que debes comprender es que los factores antes mencionados se han vuelto altamente significativos en lo que respecta al SEO y al AEO, es decir, las búsquedas en inteligencia artificial.
Cómo escribir un texto alternativo descriptivo y con keyword natural
El secreto para elaborar un texto alternativo perfecto es sencillo. Debes ponerte un vendaje en los ojos e imaginarte teniendo una conversación telefónica con uno de tus amigos. Describe la imagen que tienes delante en una sola frase. ¿Ves que es más sencillo así?
Por si acaso, te ofrecemos dos sugerencias adicionales:
- Evita las introducciones redundantes: no inicies tus textos con «Imagen de…» o «Fotografía sobre…». Google ya sabe perfectamente que es una imagen por la propia etiqueta HTML. Ve al grano.
- Integra la palabra clave de forma lógica: no fuerces tus keywords. Si tu artículo trata 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 coloca tus términos de búsqueda de manera natural y aporta valor real.
Una vez más se trata de que nunca se deba obligar a nadie a hacer algo y que todo debe suceder de manera orgánica, priorizando al usuario.
Longitud recomendada del atributo alt para SEO
El contenido textual que produzcas debe ser lo suficientemente breve como para aparecer en un sitio web. El texto alternativo no puede exceder los 125 caracteres o 10 a 15 palabras.
¿Por qué este límite? Esta convención surge de las mejores prácticas de versiones anteriores de HTML y no por una limitación de los navegadores web modernos. Esta es la razón por la cual Google ha empezado a ignorar las descripciones largas como bloques de textos dentro del código HTML.
¿Qué pasa si no pones el atributo alt en una imagen?
Las repercusiones de no agregar texto alternativo a tus contenidos visuales son vitales y esto no es algún detalle menor que uno pueda posponer de forma indefinida.
Consecuencias en herramientas de auditoría: Lighthouse, SEMrush y Search Console
Debería haber una etiqueta ALT para evitar que afecte tu puntaje ya que el software de optimización web reduce el puntaje en ausencia de una etiqueta ALT. El puntaje de accesibilidad en Google Lighthouse bajaría drásticamente.
Sin embargo, incluso una herramienta sofisticada como SEMrush clasificará este tipo de omisión como una advertencia de prioridad media dentro de la función de Auditoría del Sitio. Si tienes cientos de imágenes rotas, esto podría llevar a impactos negativos en la salud de tu sitio web.
Esto no será bueno para el usuario. En otras palabras, esto no será bueno para tu página web. Quédate con eso.
Penalizaciones SEO y pérdida de visibilidad en búsqueda de imágenes
Sin embargo Google no castigará tu sitio web por ello (es decir, Google no va a aplicar una penalización manual en sus motores de búsqueda debido a la ausencia de la etiqueta «alt»). La pena con la que te enfrentarás es la invisibilidad y la falta de miles de visitantes.
Por ejemplo imagina si tienes fotos en tu página web pero no tienes una descripción alternativa para esas fotos. Definitivamente no aparecerás en el motor de búsqueda de imágenes de Google. Por lo tanto esto limita la posibilidad de crecimiento de tu página web sin ninguna necesidad, y 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
Además, en caso de que esto no sea suficiente, el hecho es que la optimización de los textos alternativos es una cuestión de responsabilidad social.
Recuerda que como afecta a la usabilidad es un tema que se está regulando cada vez más como se ve en el ejemplo que se da a continuación.
Por qué el atributo alt es obligatorio según las pautas WCAG 2.1
Las Directrices WCAG 2.1 son otro nombre para las pautas de accesibilidad web que se refieren a las personas con discapacidades.
De acuerdo con la Regla 1.1.1 se necesita un texto equivalente para cualquier contenido no textual que cumpla el mismo propósito. En el caso de que alguien con una discapacidad visual visite tu sitio web, él/ella utiliza un programa de computadora llamado lector de pantalla que convierte el código en voz.
De esa manera sería muy difícil para la persona recordar el nombre de archivo interno de la imagen lo cual haría su experiencia muy desagradable. (Ejemplo: IMG_4920_final.jpg)
Implicaciones legales en España: Ley de Accesibilidad y sitios web obligados a cumplirla
Otra norma para la accesibilidad en línea se encuentra en el Real Decreto 1112/2018 de España. Esta norma era aplicable solo a la Administración, pero a partir de junio de 2025 la Ley Europea de Accesibilidad extiende esa obligación a gran parte del sector privado.
Debes ser muy cuidadoso en este caso ya que las consecuencias de la discriminación digital te harán sufrir una multa relacionada con el acceso a tu web. Ahora esto va a ir cada vez a más.
Cómo añadir el atributo alt en WordPress paso a paso
Sin embargo, hay buenas noticias para las personas que tienen un sitio web construido en WordPress porque este CMS gestiona los metadatos de las imágenes con la ayuda de la plataforma visual que ofrece su interfaz.
Añadir el texto alternativo desde la biblioteca de medios de WordPress
Aquí se encuentra el lugar para administrar tus recursos visuales: la Biblioteca de Medios.
Más de un enfoque se puede tomar al examinar esta situación basado en tu nivel de desarrollo.
Cómo editar el alt al subir una imagen nueva
Después de subir o arrastrar tu imagen para hacer un post usando el Editor de Bloques/Gutenberg aparece un menú de ajustes que se despliega en el lado derecho de tu pantalla.
Y ahí, en ese punto, es donde debes escribir la descripción en el campo designado como «Texto Alternativo (alt)», siguiendo las buenas prácticas, después de lo cual el sistema generará automáticamente la etiqueta HTML apropiada en el código de la página web.
Cómo actualizar el alt de imágenes ya publicadas en WordPress
Sin embargo, si hay algunos archivos subidos en tu anterior blog que requieren edición, puedes hacerlo iniciando sesión en tu panel de WordPress usando tu cuenta y luego ir a Medios > Biblioteca. Después puedes hacer clic en la miniatura de la imagen para abrir una ventana emergente con los detalles del archivo adjunto y saber más al respecto.
La caja de «Texto Alternativo» se encuentra en el lado derecho de la página. Complete la caja. Lo positivo de completar esta caja es que, a partir de ese momento, cada vez que esta imagen se utilice en otro lugar de su web de WordPress se utilizará este texto alternativo por defecto.
Plugins para auditar y optimizar los atributos alt en WordPress en masa
Abrir manualmente todas las fotos de tu sitio puede tomar muchas semanas especialmente si tienes miles de fotos ahí sin ninguna etiqueta descriptiva.
Esto se puede lograr usando ciertos plugins específicos disponibles en Internet los cuales automatizan o agilizan 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 asegurarte de que no te agobies con el volumen de etiquetado que tienes que hacer deberías trazar un plan de acción con anticipación con la ayuda de los recursos disponibles.
Proceso paso a paso para auditar las imágenes sin atributo alt en tu web
Usar la versión gratuita del software Screaming Frog será el método más rápido y efectivo que puedes usar para cazar esos huecos vacíos en tu sitio web.
- 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.
Es recomendable empezar desde las páginas que más tráfico te traen en tu sitio ya que es mucho más práctico.
Errores comunes con los atributos alt y title que penalizan tu posicionamiento
Así te asegurarás de que tu trabajo dé resultados positivos en Google. Ahora es el momento de que te cuente algunos errores los cuales debes evitar.
Rellenar el alt con la keyword principal en todas las imágenes (keyword stuffing)
Hay cuatro imágenes dentro de tu documento, le das a cada una la misma leyenda «alojamiento económico», entonces Google lo entiende claramente como un intento de manipular el algoritmo. Este es un campo en el que hay que tener cuidado ya que cualquier manipulación del algoritmo podría llevar a complicaciones.
Usar el nombre del archivo de imagen como texto alternativo
El texto apropiado que va a reemplazar a «alt» para «foto-1-v2-modificada» no será «foto-1-v2-modificada». Pero si la imagen transmite algún significado para tu audiencia entonces deberías ponerle más texto relevante y útil al «alt». Un «alt» vacío se coloca sólo para imágenes puramente decorativas.
Sin embargo si usted vende sus artículos a través de sitios de comercio electrónico en línea y no incluye un alt en la imagen de su producto usted está perdiendo una oportunidad de oro de aparecer en las búsquedas transaccionales de Google Imágenes. No se puede comprar nada si no se ve así que llenar ese vacío es extremadamente necesario.
Confundir el campo ‘título’ de WordPress con el atributo title HTML
Título» es lo que ves en la Biblioteca de Medios de WordPress. Habrá un «Título» que actúa como uno de los elementos de organización dentro de la base de datos de WordPress. Lo importante es que no debes pensar que es el atributo title de HTML el que dará origen al menú flotante. No te obsesiones con rellenarlo.
Duplicar el contenido del alt y el title con el mismo texto
No sólo resulta en el desperdicio de un espacio innecesario sino que también está destinado a irritar al usuario debido a la duplicidad del contenido entre el alt y el title. Si de verdad resulta inevitable escribir exactamente lo mismo en ambas zonas entonces absolutamente no hay necesidad de escribir nada para el título.
Otros factores SEO para imágenes que complementan el alt y el title
Pero eso no es el único aspecto de la optimización de imágenes, ya que uno no debería enfocarse solamente en el uso de etiquetas alt y de título. Existen otros factores técnicos clave que deben tomarse en cuenta si uno quiere que su sitio vuele y esté completamente optimizado, y para asegurarse de que los archivos multimedia sean indexados en un abrir y cerrar de ojos en los motores de búsqueda de Google.
Nombre del archivo de imagen optimizado para SEO
Comienza desde tu propio lado, desde tu computadora, antes de subir el contenido de tu sitio web al servidor de hosting. Los motores de búsqueda entienden el nombre de la URL donde se almacena la imagen. No uses letras mayúsculas, acentos, caracteres especiales como “ñ” o espacios.
Compresión y formato de imagen: WebP, AVIF y su impacto en Core Web Vitals
La velocidad de carga de la página es muy lenta debido al peso de las imágenes, que es el principal culpable. No pienses en subir tus imágenes en formatos antiguos como PNG o JPEG, sino solamente en los formatos WebP y AVIF, los cuales se recomiendan como estándar. Los formatos de nueva generación garantizan una compresión eficiente manteniendo una calidad visual excelente, y por lo tanto el tamaño de la imagen se reduce entre un 25% y un 50% según el caso.
Tenga presente que tener un servidor web optimizado para posicionamiento y archivos gráficos de poco peso mejorará enormemente su tiempo de respuesta.
Agregar las imágenes al sitemap XML para simplificar su rastreo
En caso de que tu sitio web tenga una estructura complicada, usando galerías dinámicas con JavaScript, es probable que los robots de Google no puedan identificar los archivos gráficos.
Agrega las ubicaciones de tus imágenes al sitemap.xml de tu sitio web usando tu plugin de SEO (Rank Math, Yoast). Esto hará la tarea más sencilla para Google.
Carga diferida y atributo loading en imágenes para optimizar el rendimiento
Existe una técnica llamada «carga diferida» o Lazy Loading la cual consiste en un acto de retrasar la descarga por parte del navegador de cualquier imagen ubicada en la última sección de tu página hasta que llegues a esa sección donde se encuentran las imágenes. Esto ayuda a disminuir el uso de ancho de banda de tu servidor y por ende mejorará el tiempo de carga inicial de tu página.
Lo que se debe tener en cuenta acerca de esto es que el atributo «loading=»lazy» se agregará automáticamente a las imágenes tan pronto como se hayan subido al sitio web. Sin embargo lo que se debe hacer en esta situación es deshabilitar la función para el banner principal del sitio web.
