via https://moz.com/blog/what-is-web-mcp
AI 代理正开始代表人类使用网站。
但这些网站是为人类构建的。代理并不擅长处理视觉布局，因此它们不得不猜测如何与网站交互，这不仅慢，而且容易出错。
WebMCP 改变了这一点，它让你的网站能够为代理提供一组可定义的工具，供它们直接使用。
不过，现在还为时尚早。因此，你可以在竞争对手都还没关注之前就推出这些工具。关于为什么这很重要，后面会详述。
本文将介绍 WebMCP 是什么、如何运作、与“传统 MCP”有何不同，以及如何在你的网站上实施它，确保你为代理时代做好准备。
什么是 WebMCP？
WebMCP（Web 模型上下文协议，Web Model Context Protocol）是一项由 Google 和 Microsoft 联合提出的开放网络标准草案。它允许你的网站向外暴露结构化的工具，供 AI 代理调用，例如“搜索产品”、“预订餐桌”或“开始结账”。
在 WebMCP 的语境中，工具并不是一个独立的软件、插件或新的后端数据库。它是一小段指令，通过简单的 HTML 属性或几行 JavaScript 添加到网页的现有元素上，比如结账表单或搜索栏。
这些工具完全存在于发送到用户浏览器的前端代码中，并且只在当前网页打开且活跃时才存在。你实际上是在网站已有的按钮和表单上添加了“隐形标签”，告诉 AI 该做什么，以及需要哪些数据来完成代表用户的操作。而且，由于这些工具是叠加在已有网站之上的，因此不需要重新构建，也不需要单独维护后端。
目前，大多数浏览器代理通过模拟人类操作来读取页面：截图以识别可能的操作，并读取文档对象模型（DOM）和可访问性树。可想而知，这不仅耗时，而且结果不稳定。
WebMCP 为代理提供了一条更快、更可靠的路径。当工具存在时，代理可以直接调用；当工具不存在时，它仍可以回退到旧方法。因此，添加工具不会把你锁定在任何东西上。
WebMCP 与 MCP 有何区别？
人们往往将这两者视为竞争标准，但它们解决的是不同的问题，实际上相辅相成。
“传统 MCP”在价值来自后端数据和系统时效果最好，例如 Moz 数据、Salesforce 或内部数据库。但设置一个 MCP 服务器需要实际的工作量，因为你必须构建并运行一个服务器。
WebMCP 则适用于网络的其余部分，即人们完成操作而不是提取原始数据的地方，这涵盖了从航空公司、餐厅到电商网站和 SaaS 注册等众多场景。
以下是 WebMCP 与 MCP 的并排对比：
| WebMCP | MCP |
|---|---|
| 适用于前端/页面上的操作 | 适用于后端/系统数据 |
| 轻量级，无需额外服务器 | 需要构建和维护服务器 |
| 适合电商、预订、注册等 | 适合数据库、CRM、分析工具等 |
（注：原文有表格，但此处仅作示意，翻译时需保留对比内容）
许多组织最终会同时使用两者，MCP 处理后端工作，WebMCP 处理页面工作。它们甚至共享相同的构建模块，如名称、描述、输入模式和处理器。
为什么 SEO 从业者应关注 WebMCP
代理已经开始真正使用网站，而不仅仅是读取它们。它们会为你预订餐桌或执行结账操作，而 WebMCP 正是你帮助它们完成这些操作的方式。这意味着这些操作属于你作为 SEO 的职责范围。
通过清晰的结构、扎实的标记和结构化数据来保持网站对机器的可读性，已经是你的工作的一部分。WebMCP 运用了同样的技能，告诉代理你的页面能做什么以及如何触发。
请注意，这与出现在 AI 生成答案中不同。那是“发现”环节，属于 AI 搜索优化的范畴。
（广告内容：你的品牌在 AI 搜索中被提及吗？立即在 Moz Pro 中查找 AI 引用！）
WebMCP 在代理进入你的页面后开始发挥作用。如果代理到了那里却无法采取行动，那么吸引它来就毫无意义。如果代理不得不截图你的预订表单并笨拙地摸索结账流程，那么销售会在最后一步失败。
但如果做对了，回报是双向的：
我们可以使用 WebMCP 工具将每个网站变成一个面向代理的高性能 API，同时为我们的网站用户打造令人难以置信的用户体验。
—— Tara Agyemang，Google Chrome 开发者关系工程师
WebMCP 工具的一些常见用途：
- 电商：搜索产品、按尺寸或价格筛选、加入购物车、开始结账
- 旅游和酒店：一次请求预订餐桌、房间或航班
- SaaS：开始注册、选择套餐或执行应用内操作
- 本地和专业服务：请求报价或预约
- 潜在客户开发和内容发布：新闻通讯订阅和联系表单
就个人而言？我最兴奋的是，购物时不用再在分面导航中逐个点击筛选条件了。只需告诉代理我想要什么，让它帮我筛选选项。
WebMCP 如何工作
简而言之，代理访问你的网站，发现你提供了哪些 WebMCP 工具，读取每个工具的作用，然后调用适合当前任务的工具。
有两种设置方式：HTML（用于表单）或 JavaScript（用于更复杂的场景）。
请记住，这些工具仅在页面打开时有效；没有无头或后台模式，浏览器必须保持运行。
声明式 API（HTML）
声明式 API 是更简单的实现方式，适用于已在表单中存在的操作，例如预订、注册或联系请求。
要实现它，你只需在现有表单上添加几个属性：
toolname：为工具命名tooldescription：解释工具的作用toolparamdescription（可选）：告诉代理该字段期望什么内容
之后，浏览器会将表单转变为工具。默认情况下，只有你自己的网站可以使用它。
为了看到声明式 API 的实际效果，我打开了 Google 的 Le Petit Bistro 演示，并同时打开了 Model Context Tool Inspector。这是一个 Chrome 扩展程序，可以列出页面已注册的工具，并允许你输入提示词，观察其 Gemini 驱动的测试代理调用这些工具。
提醒一下，你需要一个 Gemini API 密钥（可以使用免费额度）。
该演示是一个餐厅预订页面，包含一个预订表单，字段包括姓名、电话号码、日期和时间等。
果然，表单在 Inspector 中显示为已注册的工具，并带有其完整模式。该面板精确显示了代理在网站上可以看到哪些 WebMCP 工具。
（示意图）
该工具出现在 Inspector 中，完全是因为演示现有表单上的几个属性，这就是声明式 API 所需的全部。以下是 DevTools 的 Elements 面板中的 HTML 代码，我用箭头标出了启用 WebMCP 的属性。
（示意图）
我在 Inspector 中编写了一个提示词，执行工具，然后看到页面上的表单自动逐字段填写。
我的提示词是：“预订 2026 年 6 月 15 日晚上 7:00 的餐位，共四位客人，为生日聚会。姓名是 Matt Hollingshead，电话号码是 123-555-5555。”
（示意图）
我手动点击了“请求预订”，并收到了确认页面。
（示意图）
你表单现有的验证规则仍然适用。小酒馆表单已经要求姓名、10 位电话号码以及未来的日期和时间。代理也必须遵守同样的规则。
如果代理发送了无效数据，表单会像对待真人输入一样拒绝它。你无需为代理单独构建一套防护规则。
我刷新页面并再次输入提示词，但这次没有提供电话号码。代理识别到缺失信息，并请求我提供。
（示意图）
表单在整个过程中始终可见，提交仍然由我控制。当代理运行工具时，这个默认行为保持不变。用户看着表单被填写，在提交之前进行复核，你的设计和品牌始终呈现。
代理不必剥夺网站与用户之间的联系。相反，它们可以通过帮助网站对用户更有用来增强这种联系。
—— Khushal Sagar，Google Chrome 高级软件工程师
命令式 API（JavaScript）
当操作不是表单，或者你的工具需要根据页面内容动态变化时，请使用这种 JavaScript 方法，即命令式 API。
例如，一个 SaaS 仪表盘。一个向代理回传用户账户状态的工具并没有什么可提交的，因此表单无法做到。而“升级套餐”工具只对免费用户有意义。
你可以通过 document.modelContext.registerTool 注册每个工具，为其提供名称、描述、输入模式以及代理调用时运行的函数。
作为编写 JavaScript 的回报，工具可以随页面状态出现或消失，例如结账工具可能仅在购物车有商品时才存在。
我打开了 Google 的旅行预订演示，一个用 React 构建的航班搜索应用。在搜索页面上，Inspector 列出了一个工具 searchFlights，它使用结构化输入（如出发地、目的地、日期和乘客人数）来触发搜索。
（示意图）
现在，如果我查看 DevTools 的 Sources 面板，可以看到该应用已注册了 searchFlights 工具及其描述和 inputSchema。
（示意图）
在 Inspector 的“用户提示”字段中，我输入：“为我查找两位乘客从纽约到伦敦的往返航班，出发日期为 2026 年 7 月 10 日，返回日期为 2026 年 7 月 20 日。”
Gemini 代理读取了请求并调用了 searchFlights。当结果返回时，页面又注册了三个工具，Inspector 更新后显示了再次出现的 searchFlights，以及 listFlights（用于回读屏幕上的内容）、setFilters（按价格、航空公司或时间筛选结果）和 resetFilters（清除这些筛选条件）。
这些工具只在结果可用后出现，因为在搜索返回数据之前，没有什么可列出或筛选的。
（示意图）
网站提供工具，但代理决定调用哪些以及按什么顺序。从我的一个提示词，Gemini 测试代理按顺序使用了以下工具：
searchFlights带上航线和日期setFilters来缩小结果范围listFlights回读结果
这次它没有使用 resetFilters，因为代理的任务不需要。
在用户浏览器中的代理也会从单个请求中做同样的事情，自主选择调用，无需截图或猜测哪个下拉框是筛选器。
同样的模式也适用于单页应用流程、筛选结果列表、多步骤预订以及任何不是简单表单的场景。
如何在你的网站上实施 WebMCP
在实施 WebMCP 之前，我建议先试用 Google 的一些 WebMCP 演示来熟悉它们。然后，按照以下步骤将工具添加到你的网站。
第 1 步：审计你的网站，找出适合代理的操作
首先，列出用户访问你网站时最常执行的三到五个操作，例如预订服务、购买产品、搜索目录或订阅新闻通讯。最适合的是具有清晰输入定义的独立操作，并且用户希望代理能替他们完成。
从候选列表中选择一个简单的操作开始，比如搜索小部件、联系表单或新闻通讯订阅。将结账等高复杂度、高风险的流程留到你先完成一个简单的工具之后再说。
（广告：将 Moz 数据连接到你喜爱的 AI 工具——借助 Moz Data MCP Server，你可以将可信的 Moz 数据直接引入 AI 工作流，构建自定义仪表盘。）
第 2 步：编写并测试你的第一个工具
HTML 表单是最简单的起点，因为你可以直接修改现有表单，而无需重新创建。如上述演示所示，你可以添加以下属性：
toolname— 代理用来调用该操作的标识符，保持简短、无空格，例如toolname="search_products"。tooldescription— 用自然语言句子告诉代理该操作的作用及何时使用，例如tooldescription="按关键词搜索目录"。toolparamdescription— 添加到每个输入字段，让代理知道该字段期望什么值，例如toolparamdescription="搜索词，例如红色鞋子"。
然后进行测试。在 Chrome 中打开 chrome://flags/#enable-webmcp-testing，选择“enable WebMCP for testing”。接下来，安装 Model Context Tool Inspector，输入提示词，观察代理是否选中你的工具并正确填写参数。
如果代理出错，通常问题出在你的描述或模式上，而不是代理本身。Inspector 的“Copy trace”按钮会将完整会话导出为 JSON，因此你可以确切看到代理调用了什么。
（示意图）
之后，调整并重新测试，直到稳定可靠。
第 3 步：保护你暴露的工具
添加工具伴随着责任。当代理使用你的工具时，它是在代表你的用户行事，而它无法可靠地区分你意图显示的内容和指示它执行的操作。
这是一种提示注入（prompt injection）。如果恶意文本通过你的工具到达代理（很可能在工具返回的第三方内容中，如评论或留言），它可能会被骗去执行对用户不利的操作。
可以添加以下几项保护措施：
- 在 JavaScript 中定义工具时，对仅读取数据的工具（如搜索或列表）添加
readOnlyHint。代理默认认为工具会更改某些内容，除非另有说明，因此标记只读工具可以减少不必要的确认提示。 - 同样在工具定义中，对任何返回用户生成或外部内容（如评论或留言）的工具添加
untrustedContentHint，这样代理会将这些文本视为可疑内容，而不是可执行的指令。 - 在表单上，对于关键操作（如预订、购买或账户变更），请关闭
toolautosubmit。如果开启此属性，代理无需用户点击提交即可提交表单，这就去掉了人工复核环节。关闭此属性（默认状态）则始终需要用户复核并确认。
处理这些是向代理暴露工具的正常组成部分，就像清理用户输入是构建表单的正常组成部分一样。
第 4 步：尽早发布
一旦你的工具在 Inspector 中正常工作，你就可以将它们展示给真实访客。由于 WebMCP 仍在最终定稿中，Chrome 通过一个有时间限制的试用版来逐步推出，你需要主动加入。这允许你注册自己的域名，并在正式网站上提供服务，而不仅仅是在本地机器上测试。
请记住，目前真正能够使用这些工具的代理仍然很有限。现在不要把它当作流量来源，而更像是提前占位，等它被大众采用时你已先行一步。
从你构建的低风险工具开始，并查阅 Chrome 的 WebMCP 文档，了解当前注册方式以及哪些浏览器和代理目前支持它。
不要等到 WebMCP 变得紧迫才行动
如果你在移动端转型期间从事过 SEO，你会记得当时的情况。在 Google 将其作为排名因素之前，很多年都觉得“移动友好”是可选的，而那些早早准备起来的网站庆幸自己做了。
WebMCP 正处于类似的时刻：网站可以部署它，但大多数还没有行动。
那些早行动的网站，当某个用户的代理出现来预订、购买或注册时，它们能真正发挥作用，而其他网站则会在最后一步失败。