---
title: "WebMCP优化网站的技术方法"
url: "https://www.seosiguan.com/post/2398.html"
id: "https://www.seosiguan.com/post/2398.html"
language: "zh-Hans"
---

WebMCP（Web模型上下文协议）正在成为AI识别理解网站的主要策略，很快会成为AI控制网站的标准接口协议，这意味着GEO就需要WebMCP的技术方案，大家有必要掌握这项专门的技术，让能力贴近AI场景。

## 网站如何使用WebMCP？
**方法一：引入式**

<script&nbsp;type="module"&nbsp;src="https://example.com/webmcp.js"&nbsp;data-mcp-url="https://example.com/mcp/"></script>访问时直接读取MCP服务端的工具，所以这个方法是需要后端有对应服务支持，如：webmcp.js是支持库，data-mcp-url指向的是MCP服务端地址。

**方法二：命令式**

navigator.modelContext.registerTool({
&nbsp;&nbsp;name:&nbsp;&#39;searchProducts&#39;,
&nbsp;&nbsp;description:&nbsp;&#39;按关键词搜索信息&#39;,
&nbsp;&nbsp;parameters:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;&#39;object&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;properties:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;keyword:&nbsp;{&nbsp;type:&nbsp;&#39;string&#39;,&nbsp;description:&nbsp;&#39;搜索关键词&#39;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;required:&nbsp;[&#39;keyword&#39;]
&nbsp;&nbsp;},
&nbsp;&nbsp;handler:&nbsp;async&nbsp;({&nbsp;keyword&nbsp;})&nbsp;=>&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;results&nbsp;=&nbsp;await&nbsp;fetch(`/api/search?q=${keyword}`).then(r&nbsp;=>&nbsp;r.json());
&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{&nbsp;results&nbsp;};
&nbsp;&nbsp;}});使用`navigator.modelContext`接口（Chrome浏览器或是Chromium内核的146版以上），这是jquery代码样式。

**方法三：声明式**

<form&nbsp;method="modelcontext">
&nbsp;&nbsp;<input&nbsp;type="text"&nbsp;name="query"&nbsp;toolname="search"&nbsp;/>
&nbsp;&nbsp;<button&nbsp;type="submit">搜索</button></form>这是在前端代码的标签中添加WebMCP指定的特殊属性，可以让AI-Agent直接调用函数控制。

**仔细检查并且完善安全性。**

这是个至关重要的问题，由于是对外放权由AI操控，这难免会存在风险，但是如果能够完善安全限制，控制权限的范畴，那么就可以放心了，而且可以根据网站的性质，选择合适的方法，举例：引入式可以用于功能网站、命令式可以用于简易表单提交的网站、声明式可以用于常规的标准网站。

**结语：**不要重复或是叠加使用不同的WebMCP技术方法，会造成AI的错误以及混乱，甚至会导致破坏性，这就很不利于网站的GEO了，具体还需针对性的执行操作。