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