你的网站准备好迎接AI了吗？14条让Agent读懂你的实操指南

一个有意思的变化正在发生：你的网站的下一个"用户"，可能不是人类。

AI Agent越来越多地替人访问网页——帮你搜信息、比价格、抓数据、填表单。但问题是，现在大部分网站对AI极不友好。花哨的动效、嵌套的弹窗、用div模拟的假下拉框……人类看着赏心悦目，AI看到的是一堆无法解析的噪音。

核心原则只有一句话：把你的网站想象成给盲人用屏幕阅读器读的——所有内容和交互都有文本描述，AI就能读懂。

第一层：结构与语义——让AI"看懂"你的页面

1. 用语义化HTML标签 + A11Y属性

用

2. 隐藏冗余元素，节省Token

纯装饰性的SVG、背景噪声层、花哨的动画元素，加上 aria-hidden="true" 或 data-ai-hidden。冗余DOM越多，越分散AI注意力、增加Token消耗。

3. 提供稳定的data属性定位器

给关键交互元素加 data-testid 或 data-ai-action。如果AI靠CSS class定位，页面一重构脚本就废了。稳定的data属性能显著提高自动化鲁棒性。

第二层：交互设计——让AI"用得了"你的功能

4. 优先使用原生表单组件

下拉框、复选框、单选框——用浏览器原生组件，别用div模拟。原生控件有标准交互API，自动化工具可以直接调用。伪组件要展开、滚动、点击多个层级，错误率飙升。

5. 别把关键操作藏在Hover里

关键功能做成明确可见的按钮，或通过click展开。Agent是任务驱动的，不会主动试探hover状态。关键按钮默认不可见，AI根本发现不了。

6. 优先分页，而不是无限滚动

保留"上一页/下一页"的明确分页控件。无限滚动缺少终止条件，Agent很难判断什么时候该停。

7. 提供明确的加载状态

请求发送中，把按钮置为disabled，用文本标注"Saving..."或"Loading..."。Agent动作比人快，没有标准加载状态，它可能在上一步还没完成时就触发下一步。

第三层：路由与架构——让AI"走得通"你的流程

8. 慎用iframe和Shadow DOM

如果必须用，在顶层DOM保留足够的上下文和状态提示。很多DOM提取工具对iframe和Shadow DOM支持不完整，关键内容藏进去Agent可能直接"看不见"。

9. 把页面状态同步到URL

搜索词、分类、分页、筛选条件——写入URL参数。Agent经常直接改URL或重新打开链接。如果状态只存在前端内存里，它就必须从头点击一遍。

10. 错误提示必须是清晰纯文本

表单校验失败时，别只靠红框或抖动动画，把错误原因写成可读取的纯文本。没有视觉能力的Agent看不到"变红了"，但能读取文本错误提示。

第四层：进阶——为AI时代做好准备

11. 支持Programmatic Input

表单校验和联动逻辑，监听 input 与 change 事件，而不是依赖底层 keydown/keyup。自动化工具的 fill() 触发的是标准输入事件，如果你的逻辑只绑定键盘事件，Agent"填了内容"，业务校验却没执行。

12. 坚持单页面上下文原则

登录、支付、授权这类关键流程，在当前页面内完成，避免弹出新tab或窗口。多窗口增加上下文切换成本，容易让Agent丢失焦点。

13. 提供UI与API的双入口设计

在明显位置或约定路径（如 /.well-known/ai.json）提供API清单和能力索引。对AI来说，结构化API比UI更稳定、更便宜、更高效。

14. 登录验证用限流，别上来就用reCAPTCHA

reCAPTCHA对AI来说是硬障碍。如果你的业务场景需要防刷，用限流（rate limiting）就够了。

为什么这件事现在很重要

这14条技巧背后，是一个更大的趋势：网站的"用户"正在从纯人类变成人类+AI混合体。

今天，已经有大量用户通过AI Agent来浏览网页、提取信息、完成操作。如果你的网站对AI不友好，你失去的不只是一个爬虫——你失去的是一个潜在客户的AI助手。

而且，这些改动的成本极低。语义化标签、aria属性、原生表单、data定位器——这些都是前端基本功。做好了AI友好，顺便就做好了无障碍访问和SEO。一举三得。

最后：少弹窗。对人不友好，对AI也不友好。哪怕你用横幅，也别用弹窗。

本文14条技巧基于 @karminski3（KCORES LLM Arena）的原创整理，经重新归类、解读和扩展。