内容
# mcp-web-validator
[](https://www.npmjs.com/package/mcp-web-validator)
[](https://opensource.org/licenses/MIT)
**摘要搜索引擎优化工具** 套件中的一部分。
产品首页：[digestseo.com/validator-mcp](https://digestseo.com/validator-mcp/)
· 支持：[digestseo.com/support](https://digestseo.com/support/)
公开的、只读的 ChatGPT 应用托管在
`https://web-validator-mcp.digestseo.com/mcp`。它接受您明确提供的 HTML、CSS 和授权的公开
网址；下面的本地 MCP 仍然是用于工作区文件和响应式截图的选项。
一个 **模型上下文协议（MCP）服务器** ，它支持 AI 编码助手（例如 Claude、Cursor、ChatGPT 等）验证 HTML/CSS 标记是否符合官方 W3C 规范引擎，并直接在本地工作区执行技术 SEO/可访问性审计。
---
## 💬 工作原理（视觉流程）
想象一下向您的 AI 编码助手提问：
> **用户：** *"我刚刚完成了主页的构建。您可以验证它，检查 SEO 问题，并获取响应式截图以查看它是否正确显示吗？"*
以下是助手如何使用 `mcp-web-validator` 审计代码并呈现结果的精确流程：
### 1️⃣ 步骤 1：技术和 SEO 评分卡
助手自动运行 `generate_validation_report` ，该报告聚合标准规格并直接在聊天中输出类似 PageSpeed 的统一评分卡：
# 📋 网页验证和 SEO 审计报告 — 🟢 **92**/100
*为：`index.html` 生成*
#### ⚡ 页面健康评分（PageSpeed 启发）
| 评分卡 | 状态 | 评分 |
| :--- | :---: | :---: |
| **W3C HTML 验证** | 🟠 需要改进 | **88** / 100 |
| **SEO 和可访问性** | 🟠 警告 | **88** / 100 |
| **链接完整性** | 🟢 一切正常 | **100** / 100 |
### 2️⃣ 步骤 2：响应式视口截图审计
助手使用 `capture_screenshots` 启动本地 Puppeteer，以跨多个设备渲染页面：
| 桌面版（1440x900） | 平板电脑版（768x1024） | 移动版（375x812） |
| :---: | :---: | :---: |
| 🖥️ `desktop.png` | 📟 `tablet.png` | 📱 `mobile.png` |
---
## ✨ 功能
- **HTML 验证**：利用官方 W3C Nu HTML 检查器 API（无需 API 密钥）。
- **CSS 验证**：调用 W3C Jigsaw CSS 验证器 API 以调试样式表。
- **技术 SEO 检查**：审计标题/描述长度、视口响应性、标题层次结构、Open Graph 元数据和图像替代文本属性。
- **损坏链接检查器**：扫描 HTML 文档中的损坏内部或外部网址。
- **模式验证器**：解析和验证嵌入的 JSON-LD 结构化模式。
- **视觉视口审计**：使用本地无头 Puppeteer 浏览器捕获响应式布局截图（桌面版、平板电脑版、移动版）以进行设计审计。
---
## 🛠️ 暴露的工具
1. `validate_local_html`
- **参数**：`filePath: string` （本地 HTML 文件的绝对或相对路径）
- **描述**：将本地 HTML 提交到 W3C Nu 检查器并返回语法错误/警告。
2. `validate_url`
- **参数**：`url: string` （要审计的实时公开网址）
- **描述**：验证实时页面标记是否符合 W3C 标准。
3. `validate_local_css`
- **参数**：`filePath: string` （CSS 文件的绝对或相对路径）
- **描述**：检查本地 CSS 语法是否符合 W3C Jigsaw API。
4. `audit_seo_metadata`
- **参数**：`htmlContent: string` （原始 HTML 字符串）
- **描述**：执行快速的本地 SEO 审计（标题、描述、标题、图像、替代文本标签）。
5. `check_broken_links`
- **参数**：`htmlContent: string` ， `baseUrl?: string`
- **描述**：测试文档中的所有链接以检测 404 或损坏的网址。
6. `validate_schema_markup`
- **参数**：`htmlContent: string`
- **描述**：验证 JSON-LD 模式语法。
7. `generate_validation_report`
- **参数**：`htmlFilePath: string` ， `cssFilePath?: string` ， `baseUrl?: string`
- **描述**：自动运行所有检查（HTML/CSS 语法、SEO 审计、JSON-LD、损坏链接）并生成具有 PageSpeed 启发的评分的统一 Markdown 报告卡。
8. `capture_screenshots`
- **参数**：`targetPath: string` （本地 HTML 文件或 HTTP(S) 网址的路径）， `outputDir?: string` ， `viewports?: Array<{ name: string, width: number, height: number }> `
- **描述**：在本地无头浏览器中渲染目标并在桌面版、平板电脑版和移动版视图中保存截图。
---
## 🚀 配置
### 1. Claude 桌面版
将以下内容添加到您的 `claude_desktop_config.json` 中：
* **Windows**： `%APPDATA%\Claude\claude_desktop_config.json`
* **macOS**： `~/Library/Application Support/Claude/claude_desktop_config.json`
```json
{
"mcpServers": {
"mcp-web-validator": {
"command": "npx",
"args": ["-y", "mcp-web-validator"]
}
}
}
```
### 2. Cursor
在 **Cursor** 中使用此功能，请导航到 **设置 > 功能 > MCP**：
1. 点击 **+ 添加新的 MCP 服务器**。
2. 设置名称：`mcp-web-validator`
3. 设置类型：`command`
4. 设置命令：`npx -y mcp-web-validator`
### 3. 开发/本地执行
要本地运行和测试服务器：
```bash
git clone https://github.com/AKzar1el/mcp-web-validator.git
cd mcp-web-validator
npm install
npm run build
node dist/index.js
```
---
## 📄 许可证
该项目根据 MIT 许可证授权 - 有关详细信息，请参阅 LICENSE 文件。
