Tu sitio web tiene un nuevo tipo de visitante. Algunos usuarios humanos están pasando de la navegación manual a delegar viajes orientados a objetivos en agentes de IA. Estos sistemas autónomos pueden interpretar entradas, planificar y ejecutar acciones en nombre de un usuario.
Sin embargo, muchos de nuestros sitios web están diseñados para ser atractivos para los humanos, con estados de desplazamiento complejos, diseños cambiantes y movimiento fluido. Esta función no funciona para los agentes.
Cómo ven los agentes tu sitio
Los agentes no miran tu sitio web en un monitor. Operan en una representación de tu sitio legible por máquinas. La calidad de esta representación determina su rendimiento.
Los agentes pueden ver tu sitio web de 3 maneras principales: capturas de pantalla, código HTML sin procesar y el árbol de accesibilidad.
Capturas de pantalla
El agente toma una instantánea de la página renderizada y usa un modelo de visión para identificar elementos. Según la captura de pantalla, el agente puede reconocer que una barra de búsqueda en la parte superior derecha es una búsqueda global, mientras que un cuadro en el medio probablemente sea un campo de formulario. Las pistas visuales pueden ser útiles, ya que los agentes pueden usar el color, el tamaño y la proximidad para determinar la importancia. Es probable que un botón grande de Borrar se interprete con más precaución que un vínculo pequeño de “Ayuda”. Sin embargo, analizar capturas de pantalla puede ser lento y costoso (en términos de tokens utilizados), por lo que es mejor usarlo como respaldo cuando la estructura es confusa.
HTML
El agente analiza el DOM y lee el código HTML. Comprende cómo se anidan los elementos, la jerarquía lógica del árbol del DOM, los atributos como los IDs y las clases que definen la estructura, y las cadenas de datos sin procesar que forman la columna vertebral informativa del sitio. Esto ayuda al agente a comprender la relación entre los elementos. Si hay un botón de “Comprar ahora” dentro de un contenedor de productos, el agente supone que ese botón pertenece a ese producto específico.
Árbol de accesibilidad
El árbol de accesibilidad es una API nativa del navegador que destila el DOM en lo más importante: roles, nombres y estados de los elementos interactivos. Es el resumen semántico de la página, que utiliza la tecnología de accesibilidad. Para un agente de IA, funciona como un mapa de alta fidelidad que ignora el "ruido" visual de CSS para enfocarse en la utilidad pura. Al interpretar este árbol, un agente puede aprender la intención funcional de cada botón de activación, control deslizante y campo de entrada.
Modalidades combinadas
Depender de una sola entrada crea una brecha semántica. Por ejemplo, en el DOM, un agente podría ver un <div> sin saber que, en realidad, lo configuraste como un botón funcional con CSS y JavaScript. Con las capturas de pantalla, es posible que un agente identifique dónde se encuentra ese botón en la pantalla, pero aún no conoce el destino previsto del botón ni la acción que está diseñado para activar.
Por lo tanto, los agentes modernos combinan varias modalidades. Usan el DOM y el árbol de accesibilidad para obtener una lista limpia y estructurada de los elementos interactivos, y, luego, la comparan con una renderización visual para comprender el diseño, la agrupación y las indicaciones visuales.
Nuestro trabajo es proporcionar indicadores limpios en todos estos canales.
Crea sitios web aptos para agentes
Para ayudar a los agentes a navegar por tu sitio web, considera lo siguiente:
- Todas las acciones necesarias, ya sean realizadas por un humano o un agente, deben reflejarse claramente en la interfaz.
- Asegúrate de que el diseño sea estable. Es probable que los agentes que toman capturas de pantalla se confundan si el diseño de tu sitio web cambia constantemente, por ejemplo, cuando un botón de Agregar al carrito en la página de productos se encuentra en una ubicación diferente para cada categoría de producto.
- Evita los elementos "fantasma" o las superposiciones transparentes que puedan ocultar elementos interactivos. El análisis visual que realiza el agente puede descartar los nodos cubiertos, incluso si parecen transparentes.
- Diseña elementos prácticos con HTML semántico. Prefiere las etiquetas
<button>y<a>a los elementos<div>y<span>modificados. Los agentes las reconocen como interactivas.- Si no puedes usar HTML semántico, siempre proporciona al elemento los atributos
roleytabindexadecuados. Por ejemplo,<div role="button">.
- Si no puedes usar HTML semántico, siempre proporciona al elemento los atributos
- Establece
cursor: pointeren CSS, que es un indicador sólido de la capacidad de respuesta. - Agrega el atributo
foren las etiquetas<label>para vincularlas a las entradas. Esto ayuda al agente de IA a comprender el propósito de un campo, ya que indica el texto de la etiqueta que se adjunta directamente a la cadena de acción. - Asegúrate de que los elementos interactivos necesarios para continuar el recorrido del usuario tengan un área visible mayor que 8 píxeles cuadrados para evitar que el análisis visual los filtre.
Próximos pasos
Todo lo que sugerimos para que un sitio esté "listo para agentes" también lo hace mejor para los humanos.
Hacer que los sitios web sean compatibles con los agentes de IA es un incentivo para reafirmar sus principios fundamentales de crear sitios web bien estructurados, accesibles y semánticos.
- Obtén información sobre WebMCP, un estándar web propuesto para ayudar a los sitios web a interactuar con agentes, y regístrate en el programa de vista previa anticipada para comenzar a experimentar.
- Audita tu árbol de accesibilidad: Usa herramientas existentes para asegurarte de que la jerarquía de tu sitio sea legible por máquinas y estable.