Fecha de publicación: 22 de junio de 2026
A medida que los agentes de IA evolucionan de solo generar texto a navegar, interactuar y completar tareas complejas en tu sitio web, los desarrolladores necesitan herramientas específicas para garantizar una experiencia de alta calidad para estos usuarios no humanos. La nueva categoría de navegación con agentes de Lighthouse, junto con las mejoras en las Herramientas para desarrolladores de Chrome, proporciona auditorías deterministas y un framework de pruebas para ayudarte a crear sitios web listos para agentes.
El cambio a la Web con agentes implica dos etapas principales: agentes que buscan en la Web y agentes que usan la Web.
Cuando los agentes solo buscan sitios web, aún se aplican los principios de la optimización para motores de búsqueda (SEO). En esta entrada de blog, nos enfocamos en el trabajo que pueden hacer los desarrolladores cuando un agente interactúa directamente con el sitio web.
Audita, mejora y depura tu sitio web listo para agentes
Para que un agente de IA complete de manera confiable un flujo en tu sitio, como reservar una cita o realizar un pedido, necesita indicadores predecibles y legibles por máquina. Estas son las herramientas que te ayudarán a evaluar y mejorar esa preparación.
Audita la preparación para agentes de tu sitio web
Qué verifican las auditorías: Las auditorías se enfocan en tres áreas clave fundamentales para la interacción con máquinas:
- Accesibilidad: La accesibilidad es para los humanos primero. Los agentes dependen del árbol de accesibilidad, derivado del DOM para tecnología de accesibilidad (AT), como su modelo de datos principal. La auditoría de navegación con agentes verifica un subconjunto de categorías de la auditoría de accesibilidad que son fundamentales para la interacción con máquinas. Por ejemplo, ambas auditorías verifican que cada elemento interactivo tenga un nombre programático. Un árbol de accesibilidad con un formato correcto es la forma principal en que los agentes de IA comprenden tu página.
- Estabilidad: Mide la estabilidad visual con Cumulative Layout Shift (CLS) para garantizar que los elementos no se muevan de forma inesperada, lo que evita que los agentes hagan clics incorrectos.
- Integración de WebMCP: Verifica la disponibilidad de las herramientas de WebMCP registradas, los formularios que faltan en WebMCP declarativo y la validez del esquema. La adopción de WebMCP ayuda a los agentes a exponer de forma explícita la lógica y los formularios de tu sitio, lo que hace que la interacción sea confiable.
La puntuación: A diferencia de otras categorías de Lighthouse, en el momento de la publicación, la navegación con agentes es informativa y no comparativa. El objetivo es proporcionar indicadores prácticos (estado de aprobación o reprobación y advertencias) en lugar de una clasificación definitiva.
Para obtener más información sobre las verificaciones de auditoría específicas y lo que puedes hacer para mejorar, consulta la documentación de las auditorías de navegación con agentes para Lighthouse.
Haz que las interacciones entre el agente y el sitio web sean más rápidas y confiables
WebMCP es un estándar propuesto que tiene como objetivo exponer herramientas de estructura a los agentes de IA en sitios web existentes, lo que acelera y simplifica las interacciones de los agentes. Para obtener más información sobre la implementación, consulta Información sobre WebMCP.
Implementa las funciones más recientes con tu agente de programación preferido
Modern Web Guidance proporciona una colección de prácticas recomendadas y habilidades para ayudar a los desarrolladores a crear sitios web listos para agentes. Incluye la habilidad webmcp, que te permite delegar la implementación de las herramientas de WebMCP a tu agente de programación.
Si integras Modern Web Guidance en tu flujo de trabajo de desarrollo, puedes asegurarte de que tu aplicación se compile con estándares modernos y compatibles con agentes desde cero. Para obtener más información, consulta la documentación de Modern Web Guidance
.
Prueba y depura tu sitio web con las Herramientas para desarrolladores de Chrome para agentes
Para la depuración profunda y el desarrollo iterativo, las Herramientas para desarrolladores de Chrome para agentes ofrecen un personaje de prueba único. Te permite transformar tu IDE asistido por IA o agente de programación en un agente de navegación, lo que te brinda un alto grado de control.
Con las Herramientas para desarrolladores para agentes, puedes hacer lo siguiente:
- Simular la interacción del agente: Puedes simular los pasos precisos que tomaría un agente, "convertirte en el usuario" (o el agente) para reproducir fallas y verificar que los flujos de tu sitio web sean deterministas.
- Invocación directa de Lighthouse: Tu entorno de pruebas puede invocar directamente la herramienta
lighthouse_auditen la pestaña activa. Esto proporciona una verificación de estado instantánea y de varias categorías basada en el estado actual de la página, lo que te permite verificar las correcciones de forma iterativa en función de los estándares de navegación con agentes. - Presentación en pantalla y depuración: La herramienta ofrece capacidades detalladas de registro y presentación en pantalla, por lo que puedes ver exactamente cómo el agente percibe la página y cómo interactúa con ella. Esto expone algunos indicadores legibles por máquina, como el árbol de accesibilidad, que pueden confundir al agente.
Esto te ayuda a garantizar una experiencia de alta calidad para los usuarios no humanos antes de la implementación.
Para obtener más información sobre las capacidades y la configuración de las Herramientas para desarrolladores de Chrome para agentes, consulta nuestro repositorio de GitHub.
La siguiente configuración de ejemplo de las Herramientas para desarrolladores de Chrome para agentes (~/.gemini/config/mcp_config.json para AntigravityCLI o configurada en Antigravity) se conecta a Chrome Canary.
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--autoConnect",
"--categoryExperimentalWebmcp",
"--channel=canary"
]
}
}
}
Usa la siguiente consulta de ejemplo: "Using Herramientas para desarrolladores de Chrome MCP, go to https://googlechromelabs.github.io/webmcp-tools/demos/pizza-maker/ and create me a pizza with 10 mushrooms and 2 bell peppers; make sure to give me a summary of what you did and what tools you called."
También puedes usar las Herramientas para desarrolladores para agentes para realizar una auditoría de Lighthouse de preparación para agentes:
"I want to do an agentic lighthouse audit on https://googlechromelabs.github.io/webmcp-tools/demos/french-bistro/?notoolname using Chrome DevTools MCP; give me a full summary."
¿Qué sigue?
Para contribuir y unirte al debate, consulta el repositorio oficial de Lighthouse.
Para obtener más información sobre WebMCP, consulta la documentación de WebMCP. Para obtener más información sobre Modern Web Guidance, consulta la documentación de Modern Web Guidance. Para obtener más información sobre cómo optimizar tu sitio web para la IA generativa, consulta Cómo optimizar tu sitio web para las funciones potenciadas por IA generativa en la Búsqueda de Google.