您的网站有新类型的访问者。部分人类用户正从手动导航转向将以目标为导向的旅程委托给 AI 代理。这些自主系统可以解读输入内容，代表用户规划和执行操作。
不过，我们的许多网站都经过精心设计，可为用户提供美观的体验，具有复杂的悬停状态、不断变化的布局和流畅的动画效果。对于代理，此功能在功能上已损坏。
智能体如何查看您的网站
智能体并不会像人类一样，坐在显示器前浏览您的网站。它们通过网站的机器可读表示形式来进行操作。这种表示形式的质量直接决定了它们的任务表现。
智能体可以通过 3 种主要方式查看您的网站：屏幕截图、原始 HTML 和无障碍树。
屏幕截图
代理会拍摄渲染后网页的快照，并使用视觉模型来识别元素。根据屏幕截图，智能体能够识别出右上角的搜索栏属于全局搜索，而页面中间的文本框则很可能是一个表单字段。视觉线索非常有用，因为智能体可以根据颜色、尺寸和邻近度来判断重要程度。智能体在解读醒目的删除按钮时，会比对待小小的“帮助”链接更加谨慎。不过，分析屏幕截图不仅速度较慢，而且成本不菲（消耗的 token 更多），因此最好在结构令人困惑时将其用作备用方案。
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 智能体友好，有助于我们重新承诺遵守构建结构合理、易于访问且语义化的网站的基本原则。