Los agentes de inteligencia artificial que navegan la web, como los de modelos LLM multimodales, se encuentran con HTML complejo y con interfaces hechas para humanos. Igual que los lectores de pantalla, muchos de estos agentes dependen de la estructura semántica y de la accesibilidad del HTML para entender una página y actuar correctamente. En este artículo, vamos a ver cómo podemos hacerle la vida fácil a los nuevos visitantes de nuestras páginas web.
Como comentábamos en el artículo sobre tráfico agéntico, hay dos enfoques principales: los agentes visuales, que procesan la página como imagen, y los agentes basados en DOM, que leen el árbol HTML o el árbol de accesibilidad. Los primeros pueden “ver” botones o imágenes aunque no tengan texto, aunque con mucho más coste computacional, mientras que los segundos son más eficientes pero solo entienden elementos que tengan atributos HTML o ARIA, lo visual puro no existe para ellos. En la práctica, los agentes híbridos que combinan ambas formas suelen ser más robustos y efectivos.
En cualquier caso, seguir buenas prácticas de HTML semántico y accesibilidad hace que los agentes funcionen mejor. A continuación, os comparto una serie de recomendaciones respaldadas por la evidencia, con ejemplos de código y referencias a estudios y benchmarks como WebArena, Mind2Web o MiniWoB++.
Índice del artículo
Siempre usa los elementos HTML apropiados en vez de contenedores genéricos. Los estándares son bastante claros al respecto: “usa elementos HTML nativos siempre que sea posible”. Por ejemplo, no uses un <div> clicable para algo que debería ser un botón. Los elementos nativos ya traen su rol accesible y su comportamiento por defecto, lo que ayuda tanto a usuarios como a agentes.
<!-- Correcto: Botón semántico -->
<button type="button">Play video</button>
<!-- Incorrecto: div sin semántica -->
<div onclick="playVideo()">Play video</div>
Un <button> ya comunica que es accionable. Un <div> con JavaScript no lo hace y puede confundir a un agente. Estudios recientes confirman que usar elementos nativos aumenta la tasa de éxito y reduce fallos en tareas web.
Cualquier elemento interactivo debe tener un nombre accesible que describa qué hace. Puede venir de texto visible, de un <label>, de un aria-label o de un alt. Por ejemplo, en formularios, cada campo debe tener su <label for> asociado.
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email" aria-required="true">
Si usas iconos sin texto, como un botón de lupa, añade un aria-label:
<button type="submit" aria-label="Buscar">
<img src="lupa.png" alt="" aria-hidden="true">
</button>
Sin ese aria-label el botón sería invisible para un agente. Un estudio reciente mostró que añadir texto oculto o roles apropiados hacía que elementos antes ignorados por un LLM pasaran a ser clicables de forma fiable.
Cualquier imagen que tenga información debe llevar un alt descriptivo. Si es decorativa, se deja vacío. Un ejemplo:
<a href="/promociones">
<img src="promo.png" alt="Promoción 50% descuento en suscripción">
</a>
Más de la mitad de los banners online no tienen alt y se vuelven invisibles para agentes y lectores de pantalla. Incluso en modelos multimodales, los datos textuales bien marcados se priorizan frente a señales visuales más difusas.
Un documento bien estructurado ayuda a los agentes a navegar. Usa encabezados <h1>–<h6> en orden y no saltes niveles. Si quieres saber más, este artículo te doy unos tips de HTML 5 para SEO y seo semántico. Define las regiones principales con <header>, <nav>, <main>, <aside>, <footer>.
<header><h1>Título del sitio</h1></header>
<nav aria-label="Menú principal">...</nav>
<main>
<article>
<h1>Título del artículo</h1>
<section><h2>Subsección</h2></section>
</article>
</main>
<aside aria-label="Relacionado">...</aside>
<footer>...</footer>
Esto da puntos de referencia claros. En el benchmark Mind2Web se vio que al filtrar el DOM para quedarse con nodos relevantes y estructurados se redujo el ruido casi a la mitad manteniendo el 95% de lo importante.
Además, en el estudio Understanding HTML with Large Language Models se demostró que los LLM generalistas ya son capaces de aprender a entender el HTML y superar modelos diseñados solo para entornos sintéticos como MiniWoB. También el trabajo Decoupling Structure and Content for DOM Representation Learning confirma que separar estructura y contenido del DOM mejora los resultados en tareas de grounding y extracción. No es casualidad que frameworks de RAG como LangChain incorporen utilidades como HTMLHeaderTextSplitter que aprovechan directamente los encabezados para segmentar mejor el contenido en chunks procesables por los modelos.
<span class="visually-hidden"> con el mensaje en banners solo gráficos.<a> transparente con aria-label encima de un banner hace que el agente pueda clicar.aria-live o aria-expanded para que el agente sepa qué ha cambiado.En el estudio de Machine-Readable Ads se comprobó que estas técnicas convertían anuncios invisibles en elementos detectables y clicables sin empeorar la experiencia humana.
<div role="dialog"> en HTML con botones accesibles.El benchmark WebArena mostró que los agentes se bloqueaban con diálogos de permisos del navegador y que rara vez hacían scroll profundo. Esto me lo he encontrado también en mis pruebas.
Los metadatos como Schema.org ayudan a que la información sea entendida sin ambigüedad. No sustituyen a la accesibilidad básica, pero complementan. Por ejemplo:
<div itemscope itemtype="https://schema.org/Product">
<h2 itemprop="name">Auriculares XYZ</h2>
<span itemprop="offers" itemscope itemtype="https://schema.org/Offer">
Precio <span itemprop="priceCurrency" content="EUR">€</span>
<span itemprop="price" content="49.99">49,99</span>
</span>
</div>
Esto haría que un agente pueda extraer directamente el precio de forma inequívoca.
Hay trabajos como Schema2QA muestran cómo un schema bien definido puede servir directamente para generar agentes de preguntas y respuestas con buena precisión, y en Schema.org Action annotations se ve cómo anotar APIs web permite que asistentes ejecuten acciones como reservar o comprar. En el caso de Schema2QA, los autores midieron una precisión del 64–75% en agentes de preguntas y respuestas basados directamente en Schema.org, cifras comparables a asistentes comerciales como Siri. Y con las Action annotations se comprobó que asistentes podían ejecutar reservas o compras automáticamente al leer estas anotaciones, lo que nos indica que Schema.org no es solo un recurso SEO, también podría ser infraestructura útil para agentes.
Lo que reciben ChatGPT/Gemini/Claude al “leer” una URL suele ser un extracto plano tipo reader mode: sin etiquetas, sin scripts y sin atributos. Y ahí está la trampa: el Schema está dentro de una etiqueta <script>, por lo cual es invisible. Y, aunque lo pongas en microdata, te pasará lo mismo.
Pero tenemos tres escenarios que cambian el resultado:
Me di cuenta porque al hacer búsquedas en ChatGPT de la temática de un cliente, los productos de éste aparecían siempre con un atributo cuya información sólo estaba en el JSON-LD. En cambio, si le pedía a ChatGPT que entrara al producto y forzaba el scrapeo del mismo a través de sus tools, éste no veía el Schema y tampoco la versión con ese atributo (porque estaba en SSR).
Eso sí, cuidado con delegar la generación de este marcado a un LLM. En el estudio LLM4Schema.org se comprobó que modelos como GPT-4 generan Schema.org más completo que un humano en muchos casos, pero también cometen errores o inventan propiedades, lo que puede acabar en un marcado inválido. Así que conviene usar la IA como apoyo, pero siempre validando el resultado con herramientas oficiales. En ese mismo estudio se cuantifica el problema, hasta un 40–50% del marcado generado automáticamente resultó inválido o inventado. Por eso conviene usar la IA como asistente para ahorrar tiempo, pero nunca como sustituto, siempre validando con el validador oficial de Schema.org o con la herramienta de resultados enriquecidos de Google.
El HTML semántico y accesible no solo ayuda a usuarios con discapacidades, también hace que los agentes de IA funcionen mejor. Usar los elementos correctos, etiquetar y estructurar bien el contenido y añadir metadatos prepara nuestras páginas para la siguiente generación de agentes. El HTML semántico es la base de la accesibilidad, y ahora también podemos decir que es la base de la IA-readiness y Agent Experience.
Relacionado:
Tráfico agéntico: así navegan los agentes de IA y el nacimiento del Agent Experience
Foursquare anunció su asociación con OpenAI hace 4 meses para alimentar las búsquedas locales en ChatGPT a través de su Places API. Desde entonces, su base de datos, que incluye más de 100 millones de puntos de interés en más de 200 países, se ha convertido en una de las principales fuentes utilizadas por el […]
Leer másMUVERA (Multi-Vector Retrieval Algorithm) es un paper de investigación de Google publicado en arXiv el 29 de mayo de 2024. Su objetivo es mejorar la eficiencia de la recuperación semántica multivectorial (como la que usa ColBERT), transformándola en un problema de recuperación monovectorial mediante una técnica llamada Fixed Dimensional Encodings (FDEs). Es decir, se trata […]
Leer más