您的网站有新类型的访问者。部分人类用户正从手动导航转向将以目标为导向的旅程委托给 AI 代理。这些自主系统可以解读输入内容，并代表用户规划和执行操作。
不过，我们的许多网站都旨在为用户提供美观的体验，具有复杂的悬停状态、不断变化的布局和流畅的动画效果。对于代理，此功能存在缺陷。
代理如何查看您的网站
代理不会在显示器上查看您的网站。它们基于网站的机器可读表示形式运行。这种表示的质量决定了模型的性能。
代理可以通过 3 种主要方式查看您的网站：屏幕截图、原始 HTML 和无障碍树。
屏幕截图
代理会拍摄渲染后网页的快照，并使用视觉模型来识别元素。根据屏幕截图，代理可以识别出右上角的搜索栏是全局搜索，而中间的方框很可能是表单字段。视觉提示非常有用，因为代理可以使用颜色、大小和邻近性来确定重要性。与小小的“帮助”链接相比，用户可能会更加谨慎地解读大大的删除按钮。不过，分析屏幕截图可能很慢且成本很高（就所用令牌而言），因此当结构令人困惑时，最好将其用作备用方案。
HTML
智能体分析 DOM 并读取 HTML。它了解元素的嵌套方式、DOM 树的逻辑层次结构、定义结构的 ID 和类等属性，以及构成网站信息主干的原始数据字符串。这有助于智能体了解元素之间的关系。如果“立即购买”按钮位于商品容器内，代理会假定该按钮属于该特定商品。
无障碍功能树
无障碍功能树是一种浏览器原生 API，可将 DOM 提炼为最重要的内容：交互元素的角色、名称和状态。这是网页的语义摘要，供辅助技术使用。对于 AI 智能体，它充当高保真地图，可忽略 CSS 的视觉“噪声”，专注于纯实用性。通过解读此树，代理可以了解每个切换开关、滑块和输入字段的功能意图。
组合模态
仅依赖单个输入会造成语义差距。例如，在 DOM 中，代理可能会看到 <div>，但不知道您实际上已使用 CSS 和 JavaScript 将其配置为功能按钮。通过屏幕截图，代理可能会识别出该按钮在屏幕上的位置，但仍然不知道该按钮的预期目标或旨在触发的操作。
因此，现代代理会结合使用多种模态。它们使用 DOM 和无障碍树来获取清晰且结构化的互动元素列表，然后将该列表与视觉呈现进行交叉对比，以了解布局、分组和视觉提示。
我们的工作是跨所有这些渠道提供清晰的信号。
打造适合代理的网站
为帮助代理浏览您的网站，请考虑以下事项：
- 界面中应清楚反映由人工或代理执行的所有必要操作。
- 确保布局稳定。如果您的网站布局不断变化，例如，商品页面上的添加到购物车按钮在每个商品类别中的位置都不同，那么拍摄屏幕截图的代理可能会感到困惑。
- 避免使用可能会隐藏互动元素的“幽灵”元素或透明叠加层。代理执行的视觉分析可能会舍弃被遮盖的节点，即使该节点看起来是透明的。
- 使用语义 HTML 设计可操作的元素。优先使用
<button>和<a>标记，而不是修改后的<div>和<span>元素。代理会将这些视为互动元素。- 如果您无法使用语义 HTML，请务必为元素提供适当的
role和tabindex。例如<div role="button">。
- 如果您无法使用语义 HTML，请务必为元素提供适当的
- 在 CSS 中设置为
cursor: pointer，这是可操作性的强烈信号。 - 在
<label>标记上添加for属性，以将其与输入相关联。这有助于 AI 智能体了解字段的用途，方法是指明直接附加到操作字符串的标签文本。 - 请确保继续用户体验历程所需的任何互动元素的可见区域大于 8 平方像素，以免被视觉分析过滤掉。
后续步骤
我们建议的所有让网站“智能体就绪”的措施，也都能让网站更适合人类用户。
让网站对 AI 代理友好，有助于重新践行其基本原则，即构建结构合理、易于访问且语义化的网站。