Cómo preparar tu web para agentes de IA: guía 2026 (WebMCP y accesibilidad)
Tabla de contenidos
El agente de IA que visita tu web no ve tu diseño: lee el DOM, el árbol de accesibilidad y capturas, y no quiere leerte, quiere completar una tarea. Preparar tu web para agentes de IA es, sobre todo, no estorbar a ese visitante.
Esta guía reúne lo que Google y Chrome documentan hoy sobre sitios preparados para agentes, con una advertencia por delante: nada de esto es un factor de posicionamiento.
Qué es un agente de IA (y en qué no se parece a un rastreador)
La guía de Google para funciones de IA generativa los define como sistemas autónomos que pueden realizar tareas en nombre de las personas, como reservar una mesa o comparar especificaciones. Llegan a tu web para reunir esos datos analizando capturas, el DOM y el árbol de accesibilidad.
De dónde salen hoy: Google-Agent, el user-agent de los agentes alojados en infraestructura de Google que navegan la web a petición del usuario; la navegación automática del navegador, que pide confirmación en acciones sensibles; y Business Agent, la experiencia conversacional con una marca desde Search.
La palabra clave del artículo es actuación (actuation): un agente simulando clics y entrada de texto como si fuera la persona usuaria. Rastrear es leer; actuar es tocar tu interfaz.
Rastreador, agente y bot de entrenamiento: tres cosas distintas
| Visitante | Qué hace | Cómo se controla |
|---|---|---|
| Rastreador (Googlebot) | Descubre e indexa páginas | robots.txt y directivas de indexación (robots.txt en 2026) |
Bot de entrenamiento (GPTBot) | Se lleva contenido a conjuntos de datos | robots.txt por user-agent |
Agente con persona detrás (Google-Agent) | Navega y ejecuta acciones completas | Tu interfaz, tu WAF y la verificación criptográfica |
Hasta hace poco todo se decidía en robots.txt. Con los agentes no: los fetchers disparados por usuario en general ignoran esas reglas, y no existe requisito de elegibilidad para aparecer en experiencias agénticas.
Cómo ve tu web un agente: captura, DOM y árbol de accesibilidad
La guía de webs agent-friendly de web.dev lo plantea como tres vías combinadas: capturas con un modelo de visión, lento y caro en tokens; el HTML y el DOM, donde la anidación define relaciones (si "Comprar" está dentro de la ficha, el agente asume que es de ese producto); y el árbol de accesibilidad, que resume roles, nombres y estados e ignora el ruido visual del CSS.
Se combinan porque cada canal deja huecos: un div con aspecto de botón o un botón cuya acción no se entiende.
Ocho reglas de interfaz que hacen tu web legible para un agente
- Toda acción necesaria debe estar reflejada en la interfaz.
- Layout estable: si "Añadir al carrito" cambia de sitio, el agente se pierde.
- Nada de elementos fantasma ni superposiciones sobre lo interactivo.
- HTML semántico:
buttonyaantes quedivmaquillados. - Si no puedes, aporta
roleytabindex. cursor: pointeren CSS: señal de accionabilidad.label forpara vincular etiqueta y campo.- Área visible suficiente en los elementos del flujo.
El último punto trae la cifra llamativa: la guía pide un área visible mayor de 8 píxeles cuadrados para que el análisis visual no descarte el elemento. El estándar de accesibilidad pide 24x24 píxeles CSS (WCAG 2.2, 2.5.8): apuntar a personas te deja sobrado.
El árbol de accesibilidad es tu mejor auditoría de agent-readiness
Se previsualiza en Chrome DevTools (panel Accessibility) y muestra lo que el agente lee. Es la auditoría más barata que existe, y lo que arregles ahí también mejora el sitio para personas: se solapa con la accesibilidad web.
WebMCP: declarar tus acciones en lugar de esperar que el agente las adivine
WebMCP es la propuesta de Chrome para exponer herramientas estructuradas a agentes: en vez de que el agente inspeccione un botón para deducir para qué sirve, el sitio declara su finalidad. Aporta descubrimiento con nombres estándar, esquemas JSON con entradas y salidas explícitas, y estado de la página.
El flujo: tu web declara la herramienta, el agente inyecta argumentos estructurados y tu código hace el resto, con la persona en el bucle para confirmar. Chrome lo resume como más fiable que la actuación paso a paso.
Las dos formas de declarar una herramienta
API imperativa: document.modelContext.registerTool({ name, description, inputSchema, execute }). Exige nombre, descripción y esquema, y se desregistra con AbortSignal o, desde Chrome 153, sin romper ejecuciones en curso.
API declarativa: atributos en un form estándar, sin JavaScript. toolname nombra la herramienta y tooldescription explica qué hace, como en <form toolname="createSupportRequest" tooldescription="Submits a request for customer support.">. Está en origin trial desde Chrome 149: es un experimento, no un requisito.
Buenas prácticas (y errores caros) al definir herramientas
- Una función por herramienta y registro estático por defecto: dos herramientas idénticas confunden al agente.
- Desregístrala cuando deje de servir en ese estado de página.
- Verbos honestos:
create-eventcrea el evento;start-event-creation-processlleva al formulario. - No hagas calcular al modelo: acepta el input crudo ("de 11:00 a 15:00") y tipos específicos.
- Explica tus decisiones:
shipping="Express"mejor queshipping_id=1. - Fiabilidad: fallo elegante ante límites de tasa y errores descriptivos.
- Coste de contexto: cada herramienta consume ventana de contexto.
Seguridad y límites: lo que WebMCP no es
consequentialHint marca las acciones con consecuencias reales para que el navegador pida confirmación, y readOnlyHint las que no cambian estado. Otras webs e iframes no ven tus herramientas y el registro solo funciona con aislamiento de origen. Chrome reconoce tres límites: flujos con persona en el bucle, interfaces complejas y descubrimiento solo visitando el sitio. WebMCP tampoco es datos estructurados, que siguen sirviendo para rich snippets.
Comercio agéntico: qué es UCP y qué significa para una tienda
Si vendes online, la pieza de 2026 es el Universal Commerce Protocol (UCP), un estándar abierto que Google presenta para habilitar acciones agénticas en AI Mode y Gemini, empezando por la compra directa. Declara catálogo, carrito, checkout y pedidos, es compatible con AP2 y usa MCP y A2A como transportes. Su propuesta: seguir siendo comerciante responsable y reutilizar los feeds de Merchant Center.
Si aún no está a tu alcance, lo útil es no ser el eslabón que rompe la cadena: datos de producto exactos, fichas sin ambigüedad y checkouts sin pasos ocultos. UCP y AP2 siguen en evolución: describe el protocolo y no prometas que los agentes van a comprar en tu tienda.
Permitir y verificar: Google-Agent, Web Bot Auth y tu WAF
Google publica la lista de fetchers disparados por usuario con sus user-agents reales, incluido Google-Agent, y confirma que en general ignoran robots.txt. Sus rangos de IP van en un JSON que se regenera con frecuencia: la palanca para permitirlos es tu WAF, no una línea de robots.txt.
La novedad experimental es Web Bot Auth: los agentes firman criptográficamente sus peticiones. Una parte de las de Google-Agent va firmada y se autentica como https://agent.bot.goog, con una clave pública que hay que cachear y depurar. Google no firma todas: recomienda seguir verificando IP, DNS inverso y user-agent.
El error caro: un WAF que devuelve 403 a todo lo que contenga "bot" rompe agentes legítimos y puede romper búsqueda. Cruza user-agent, IP y DNS inverso en los registros del servidor en lugar de fiarte del nombre del bot: el método está en la guía de análisis de logs del servidor.
Lo que no debes hacer (y lo que no hace falta creerse)
- No crees páginas solo para agentes: esconder cosas para un robot es cloaking y entra en las políticas de spam.
- No bloquees por reflejo: el 403 indiscriminado es el fallo de configuración más común.
- No lo vendas como obligatorio: Google lo enmarca como algo para cuando tengas tiempo extra.
- No lo confundas con aparecer citado en respuestas de IA (GEO), y no prometas resultados de agentes: no hay cifras oficiales.
Checklist: cómo preparar tu web para agentes de IA en 8 pasos
- Audita el árbol de accesibilidad de tu home en Chrome DevTools.
- Cambia los
divclicables porbuttonya. - Etiqueta los campos con
label fory prueba los formularios sin el diseño alrededor. - Estabiliza el layout: el mismo botón, en el mismo sitio, en todas las variantes.
- Amplía las áreas clicables al mínimo de 24x24 píxeles CSS.
- Busca
Google-Agenten tus logs y revisa qué ruta pide. - Confirma en tu WAF que no devuelves 403 a agentes legítimos.
- Pide a un agente o a una persona con lector de pantalla que complete tu tarea clave y anota dónde se atasca.
Preparar una web para agentes no es un truco nuevo: es volver a lo básico, HTML semántico, interfaz estable y acciones claras, y se nota dos veces porque también mejora la experiencia de las personas. WebMCP y UCP son la parte que llegará; la accesibilidad es la que puedes arreglar hoy.