# AI 智能体与你的网站

> 浏览器智能体通过截图、原始 HTML 和无障碍树读取网站。web.dev 建议让操作可见、语义清晰：用真按钮和链接、给输入框加标签、布局保持稳定。这些做法对人同样友好。

- URL: https://geo.casa/zh-cn/implementation/ai-agents/
- 概念 · 官方文档已说明
- 审核于: 2026-10-25

## AI 智能体是什么

> **官方文档已说明:**
> 「AI 智能体是可以代替人执行任务的自主系统，例如预订餐位或比较产品规格。」浏览器智能体访问网站的方式可能包括：分析截图等视觉渲染结果、检查 DOM 结构、解读无障碍树。
>
> 参考来源: [Google Search Central: Optimizing your website for generative AI features on Google Search](https://developers.google.com/search/docs/fundamentals/ai-optimization-guide)

Google 把这一点定位为可选项：与业务相关、并且有余力时再去了解。

## 智能体如何看页面

> **官方文档已说明:**
> 「智能体主要通过三种方式查看你的网站：截图、原始 HTML 和无障碍树。」现代智能体会结合使用这三者。DOM 和无障碍树提供结构化的可交互元素列表，再与视觉渲染结果对照，以理解布局和分组。
>
> 参考来源: [web.dev (Google): Build agent-friendly websites](https://web.dev/articles/ai-agent-site-ux)

## 做法

> **官方文档已说明:**
> web.dev 指南建议：
>
> - 避免幽灵元素，即遮挡可交互元素的透明覆盖层。
> - 使用语义化 HTML：用 `<button>` 和 `<a>`，不用改造过的 `<div>` 和 `<span>`。做不到时，加上合适的 `role` 和 `tabindex`。用 `for` 把 `<label>` 关联到输入框。
> - 让可交互元素可见，并且「大于 8 平方像素」。
> - 确保布局稳定，让操作出现在可预期的位置。
>
> 参考来源: [web.dev (Google): Build agent-friendly websites](https://web.dev/articles/ai-agent-site-ux)

> **官方文档已说明:**
> 「我们为让网站『便于智能体使用』而提出的所有建议，同样会让网站对人更好用。」
>
> 参考来源: [web.dev (Google): Build agent-friendly websites](https://web.dev/articles/ai-agent-site-ux)

## 尚未确立的结论

- 便于智能体使用，是否会影响网站被 AI 搜索选中或引用的频率。这些做法针对的是智能体在网站上完成任务。
- WebMCP、通用商务协议（UCP）等新兴协议尚处于提案或早期阶段，行为可能变化。

## 本站的做法

页面是服务端渲染的语义化 HTML，使用真正的链接和按钮。页面通过了自动化的 WCAG 2.1 AA 审计，智能体读取的正是同一棵无障碍树。

## 参考来源

- [Google Search Central: Optimizing your website for generative AI features on Google Search](https://developers.google.com/search/docs/fundamentals/ai-optimization-guide)
- [web.dev (Google): Build agent-friendly websites](https://web.dev/articles/ai-agent-site-ux)