AIEO
开发者与 Agent

Agent 友好网站与 WebMCP：和 GEO 有什么不同

先说结论

GEO 关注网站的信息是否容易被检索、理解和引用；Agent 友好网站还要关注 AI 是否能可靠地操作界面并完成任务。

两者有重叠，但目标不同：

方向核心问题典型结果
SEO/GEO页面能否被发现、理解、引用展示、引用、访问
Agent UXAgent 能否识别控件并完成流程搜索、填写、比较、提交
MCP已连接应用如何调用外部能力工具和数据调用
WebMCP网页如何显式暴露工具给支持的 Agent页面内结构化操作能力

不要因为做了 WebMCP，就认为页面会获得更高搜索排名；也不要因为 SEO 做得好，就认为 Agent 能稳定完成结账。

一、Agent 如何“看”网页

web.dev 将常见表示概括为：

  • 截图：看布局、视觉分组和提示；
  • DOM / HTML：理解结构与属性；
  • 可访问性树：理解控件的角色、名称和状态。

现代 Agent 可能组合使用这些信息。只对其中一种友好，仍可能在另一种表示中丢失语义。

二、最有效的基础工作仍是语义 HTML

不推荐：

<div class="buy" onclick="checkout()">立即购买</div>

推荐：

<button type="button" aria-label="购买 Pro 月付套餐">
  立即购买
</button>

原因不是“AI 喜欢 button 标签”，而是原生元素能为人、浏览器、辅助技术和 Agent 提供更稳定的角色与行为。

表单也要有明确标签

<label for="workspace-name">工作区名称</label>
<input id="workspace-name" name="workspaceName" autocomplete="organization" />

避免只用视觉占位符表达字段含义。占位符会消失，也可能无法形成稳定的可访问名称。

三、稳定布局和状态同样重要

检查：

  • 关键按钮是否在不同状态中频繁移动；
  • 是否有透明覆盖层制造“看得见却点不到”的元素；
  • 模态框打开后，焦点是否进入正确位置；
  • 加载、成功、失败和禁用状态是否可识别；
  • 控件是否足够可见，不是极小热点；
  • 相同动作是否始终使用一致名称。

对 Agent 友好的页面，通常也更容易被人理解和使用。

四、WebMCP 能解决什么

Chrome 开发者文档将 WebMCP 描述为仍在积极开发的拟议 Web 标准。它允许页面通过 JavaScript 或 HTML 注解显式声明工具，让支持该 API 的 Agent 更准确地发现和执行页面能力。

概念示意：

工具：search_products
输入：category, max_price
作用：在当前网站中查询符合条件的产品

相较让 Agent 猜测哪个输入框和按钮对应动作，显式工具可以减少界面推断。

但要保留三个边界：

  1. 只有支持 WebMCP 的 Agent 才能使用；
  2. API 尚在演进，兼容性和行为可能变化；
  3. 它不能替代语义 HTML、可访问性和清晰 DOM。

五、敏感动作必须保留确认

可读取动作：

  • 搜索公开产品；
  • 获取套餐参数；
  • 计算公开报价。

高风险动作：

  • 下单和付款；
  • 删除账号或数据；
  • 修改权限；
  • 发送消息或邀请；
  • 提交具有法律意义的表单。

高风险工具应该：

  1. 明确展示将要发生的动作；
  2. 展示对象、数量、价格或影响范围；
  3. 请求用户确认；
  4. 在服务端重新认证和授权；
  5. 返回可审计的结果；
  6. 支持合理的撤销或补救路径。

不要让 Agent 仅凭网页中的一段文本取得操作授权。网页内容可能过期，也可能包含恶意指令。

六、一个 Agent 友好检查流程

第 1 层：无需 Agent 的人类检查

  • 键盘能否完成核心任务；
  • 标签、错误提示和状态是否清楚；
  • 页面在不同屏幕下是否稳定；
  • 关键限制是否在提交前可见。

第 2 层：结构检查

  • 使用原生语义控件；
  • 检查 accessibility tree 中的 role、name、state；
  • 检查 DOM 层级能否表达对象归属；
  • 检查隐藏、遮挡和重复元素。

第 3 层：Agent 任务测试

固定任务，例如：

找到支持代码导出的最低价格套餐，说明限制，但不要购买。

记录：

  • Agent 看到了哪些页面状态；
  • 选择了哪些控件或工具；
  • 是否正确读取限制；
  • 是否在付款前停止；
  • 错误发生在哪一步。

第 4 层：WebMCP 实验

如果目标用户使用的 Agent 确实支持 WebMCP，再针对有限、低风险任务进行试验，并保留传统界面路径。

可直接复制的 Agent 友好检查表

## Agent 友好网站检查

### 语义与可访问性
- [ ] 交互使用 button、a、input 等原生元素
- [ ] 所有表单字段都有持久、关联的 label
- [ ] 控件在可访问性树中有正确 role、name、state
- [ ] 关键动作可通过键盘完成

### DOM 与视觉
- [ ] DOM 层级能表达控件所属对象
- [ ] 没有透明覆盖层或幽灵元素
- [ ] 关键控件清晰可见且布局稳定
- [ ] 加载、成功、失败和禁用状态明确

### 安全
- [ ] 读取动作与写入动作分开
- [ ] 付款、删除、授权等动作要求明确确认
- [ ] 服务端重新验证身份、权限和参数
- [ ] 每次敏感动作保留审计结果

### WebMCP 实验
- [ ] 已确认目标 Agent 支持该能力
- [ ] 将其标记为实验能力，不宣传为通用标准
- [ ] 保留语义 HTML 和传统交互路径
- [ ] 不把支持 WebMCP 等同于 GEO 排名收益

本篇行动清单

  • 先优化语义 HTML 和可访问性；
  • 用真实任务测试 Agent，而非只看页面截图；
  • 记录失败步骤和页面状态；
  • 对敏感动作保留显式确认；
  • WebMCP 只在支持环境中小范围试验；
  • 将 Agent 操作指标与搜索引用指标分开。

本章统一工作流

1. 定义业务目标和问题规则
2. 用 MCP 暴露最小、明确、可授权的能力
3. 用 Skill 组织步骤、证据和停止条件
4. 生成带 ruleId 的问题实例
5. 由人确认事实及高风险动作
6. 执行修改并记录版本
7. 按相同条件复核
8. 将结果标为通过、未通过或数据不足

最小落地方案

如果你只有一名创始人和一个 Vibe Coding 项目，不需要立即搭建复杂平台。先做：

  1. 一份 rules.md，定义 10 个最重要问题；
  2. 一个只读抓取工具；
  3. 一个包含步骤和停止条件的 SKILL.md；
  4. 一份统一问题模板；
  5. 一个发布前人工确认点；
  6. 一张每周复核表。

自动化的第一目标不是少点几次鼠标，而是让每个结论都能回到证据。

术语表

术语通俗解释
Agent能理解目标、选择工具并执行多步任务的 AI 应用
MCPAI 应用与外部工具、资源和提示交互的协议
MCP Host承载 Agent 并管理连接、权限与上下文的应用
MCP ClientHost 内与某个 MCP Server 建立连接的组件
MCP Server通过 MCP 提供 Tools、Resources、Prompts 的程序
Tool可调用的具体动作
Resource可读取的上下文或数据
Prompt服务端提供的可复用交互模板
Skill可复用的任务说明、规则、模板和资源集合
JSON Schema描述并约束结构化输入或输出的格式
ruleId一个检查规则的稳定标识
issueId某次检查发现的具体问题实例标识
WebMCP仍在演进的网页工具声明方案，面向支持它的 Agent
Accessibility tree浏览器提供的可访问角色、名称、状态等结构

参考资料与适用边界

官方资料

  1. Model Context Protocol：Architecture overview
    用于说明 Host、Client、Server、Tools、Resources、Prompts、数据层和传输层。本文引用固定日期版本；其他版本可能不同。

  2. Model Context Protocol Specification
    MCP 最新规范入口。实施时应选择并记录固定版本，而不是长期依赖 latest。

  3. MCP Authorization
    用于远程 HTTP MCP 的授权边界。其规则不能机械套用到本地 stdio，也不能替代业务级权限。

  4. MCP Security Best Practices
    用于说明令牌、授权、代理和最小权限等安全风险。规范并不证明某一实现已正确落实。

  5. MCP Transports
    用于区分本地 stdio 与远程 Streamable HTTP。HTTP 可调用不等于可以被公网 Agent 自动发现。

  6. Agent Skills Specification
    用于 SKILL.md、必填字段、目录和渐进加载说明。部分可选字段仍可能因客户端实现而异。

  7. Evaluating skill output quality
    用于真实用例、基线、断言、盲评和迭代评估方法。这些是推荐实践，不是 Skill 格式有效性的强制条件。

  8. web.dev：Build agent-friendly websites
    用于语义 HTML、DOM、截图和可访问性树等 Agent UX 建议。它讨论网页可操作性，不是 GEO 排名指南。

  9. Chrome Developers：WebMCP
    用于说明 WebMCP 的拟议标准和实验状态。支持范围、API 与行为可能变化，不能宣称为所有浏览器和 Agent 的通用能力。

使用边界

  • MCP 规范连接和交换上下文，不替代业务语义、数据治理和模型推理；
  • Skill 可以提升流程一致性，但不能保证排名、引用或转化；
  • JSON Schema 能校验结构，不能验证业务事实必然正确；
  • WebMCP 与 Agent UX 不等于 SEO/GEO，也没有本章资料支持排名收益承诺；
  • 所有平台能力、版本和权限应在实际环境再次核验；
  • 本章示例为教学模板，不应未经安全审查直接部署到生产环境。

最后更新于

让文档、检测规则和修复任务共用一套问题定义

上一篇

MCP 与 Skills：概念及 AIEO 的规划

MCP 和 Agent Skills 到底是什么，AIEO 计划如何用它们组织报告与修复流程，以及哪些东西今天还不存在。

让文档、检测规则和修复任务共用一套问题定义

上一篇

本章速查与总结

下一篇

本页目录

先说结论一、Agent 如何“看”网页二、最有效的基础工作仍是语义 HTML表单也要有明确标签三、稳定布局和状态同样重要四、WebMCP 能解决什么五、敏感动作必须保留确认六、一个 Agent 友好检查流程第 1 层：无需 Agent 的人类检查第 2 层：结构检查第 3 层：Agent 任务测试第 4 层：WebMCP 实验可直接复制的 Agent 友好检查表本篇行动清单本章统一工作流最小落地方案术语表参考资料与适用边界官方资料使用边界