Claude Code 开发一个 SEO 工具网站：从需求到上线完整实战

用 Claude Code 开发 SEO 工具网站，最重要的不是让 AI 直接生成一堆页面，而是把“工具网站”拆成可验证的产品模块：用户输入什么、系统检测什么、报告如何展示、哪些建议可解释、上线后如何被搜索引擎正确理解。只有需求清楚，Claude Code 才能稳定生成结构、代码和测试。

本文用一个轻量 SEO 检测工具网站作为例子，讲清从需求到上线的完整流程。还没完成 Claude Code 或开发环境配置的读者，可以先看本站 安装部署教程 和 环境配置教程；如果你想把 AI 编程应用到真实项目，可以继续阅读 实战工作流。

摘要

使用 Claude Code 开发 SEO 工具网站，推荐流程是：先写产品规格，明确目标用户、核心工具、输入方式、输出报告和不做的功能；再让 Claude Code 生成页面信息架构，包括首页、工具页、结果页、帮助页和隐私说明；接着分批实现核心检测逻辑，例如标题长度、meta description、H1/H2 结构、canonical、robots、sitemap、图片 alt、内部链接和移动端基础检查；然后补充报告展示、评分规则、错误提示、历史记录或导出功能；最后按照 Google Search Central 的基础 SEO 建议检查标题、描述、可抓取性、结构化数据、移动端体验和 Search Console 监控。整个过程要让 Claude Code 先给计划，再改代码，每一批改动后运行测试、检查 diff 和上线清单。

正文

先定义 SEO 工具网站的定位

SEO 工具网站可以做得很复杂，也可以从一个小工具开始。新手更适合先做一个“页面 SEO 检查器”：用户输入 URL 或粘贴 HTML，系统输出标题、描述、标题层级、图片 alt、链接、canonical 和基础建议。这样功能边界清楚，便于 Claude Code 分批开发。

第一步：写清需求规格

不要直接对 Claude Code 说“帮我开发一个 SEO 网站”。先写一份需求规格，说明目标用户、输入方式、输出字段、评分规则和限制。

我要开发一个轻量 SEO 工具网站。
目标用户：站长、内容编辑、独立开发者。
核心功能：输入网页 URL 或 HTML，输出页面 SEO 检查报告。
检查项：title、meta description、H1/H2、canonical、图片 alt、内部链接、robots、sitemap 提示。
输出：分数、问题列表、优化建议、优先级。
限制：不要抓取登录页面，不保存用户隐私数据，建议必须可解释。

这一步决定后续所有代码结构。需求越具体，Claude Code 越不容易跑偏。

第二步：确定页面结构

一个 SEO 工具网站不需要一开始就做很多页面。建议先做四类页面：首页、工具页、结果页、帮助文档页。首页说明工具价值；工具页提供输入和检测；结果页展示报告；帮助页解释每个检测项的意义。

请先设计网站信息架构，不要写代码：
1. 首页包含哪些区块
2. 工具页表单如何设计
3. 结果页如何展示 SEO 报告
4. 帮助页解释哪些检测项
5. 移动端布局注意事项

第三步：选择技术栈

技术栈取决于你的部署方式。轻量工具可以使用 Next.js、Astro、Nuxt、Laravel、WordPress 插件或纯前端加后端 API。让 Claude Code 根据你现有项目选择，而不是让它随意引入新框架。

如果你已有前端项目，可以这样问：

请先读取当前项目技术栈，不要改文件。
说明它适合如何实现 SEO 检测工具：
- 页面路由怎么加
- API 接口放哪里
- 测试命令是什么
- 是否需要新增依赖
- 最小可行版本怎么做

第四步：先做最小可行版本

第一个版本不要追求全功能。建议 MVP 只做：URL/HTML 输入、基础解析、检查 title、description、H1、图片 alt、内部链接数量和建议输出。等逻辑稳定后，再加结构化数据、性能检测、历史记录和导出。

第五步：让 Claude Code 先给开发计划

在真正写代码前，让 Claude Code 输出分批计划：

请为这个 SEO 工具网站给出开发计划，先不要改文件。
要求：
1. 第一批只做页面骨架和表单
2. 第二批实现基础检测逻辑
3. 第三批实现报告展示
4. 第四批补测试和错误处理
5. 第五批做上线前 SEO 检查
每批都说明涉及文件、验证方式和风险。

第六步：实现检测逻辑

核心检测逻辑要可解释。不要只输出一个神秘分数，要告诉用户为什么扣分、如何修正、优先级是什么。常见检测项包括：

• title 是否存在，长度是否合理，是否重复堆砌关键词。
• meta description 是否存在，是否能概括页面内容。
• 是否只有一个 H1，H2/H3 层级是否清晰。
• 图片是否有 alt 文本。
• canonical 是否存在且格式正确。
• 页面是否有内部链接和必要的可访问链接文本。

提示词可以这样写：

请实现基础 SEO 检测逻辑。
输入：HTML 字符串。
输出：JSON 报告，包括 score、issues、warnings、recommendations。
检查项：title、meta description、H1 数量、heading 层级、图片 alt、canonical、内部链接。
要求：每个 issue 必须有 message、severity、why、how_to_fix。

第七步：避免伪 SEO 建议

SEO 工具最容易产生的问题是建议看起来专业，但无法解释或不符合实际。你应该要求 Claude Code 的建议基于可观察数据，不要伪造搜索量、排名、点击率或外链数据。没有接入真实数据源时，只能输出页面级检查建议。

请不要生成无法验证的数据，例如搜索量、排名、外链数量。
如果没有真实数据源，只输出基于页面 HTML 的检查结论。
每条建议必须说明依据。

第八步：补报告展示页面

结果页要让用户快速看懂问题。建议分成总分、关键问题、优化建议、检测详情、下一步行动。严重问题放在顶部，低优先级建议放后面。

可以让 Claude Code 生成组件：

请实现 SEO 报告结果页组件：
1. 顶部显示总分和概览
2. 按 severity 分组展示问题
3. 每条建议包含原因和修复方法
4. 支持复制报告
5. 移动端布局清晰
6. 不要使用难以维护的复杂动画

第九步：加入基础 SEO 页面设置

开发 SEO 工具网站，本身也要做好 SEO。Google Search Central 建议页面标题要准确描述页面内容，description 可以帮助搜索引擎理解页面摘要，站点也应确保可抓取、移动端体验良好。你可以让 Claude Code 给每个页面补 title、description、canonical、sitemap 和 robots 配置。

请为网站补基础 SEO 设置：
- 首页 title 和 description
- 工具页 title 和 description
- canonical URL
- robots.txt
- sitemap.xml
- Open Graph 基础字段
- 合理的语义化 heading 结构

第十步：测试和错误处理

测试至少覆盖三类场景：正常 HTML、缺失关键标签、异常输入。错误处理也要明确，例如 URL 抓取失败、HTML 为空、页面无法解析、跨域或超时。

请为 SEO 检测逻辑补测试：
1. 完整 HTML 应返回高分
2. 缺少 title 应返回严重问题
3. 多个 H1 应返回警告
4. 图片缺少 alt 应返回建议
5. 空 HTML 应返回可读错误
6. 不要 mock 掉核心检测逻辑

第十一步：上线前检查

上线前不要只看页面能打开。要检查基础 SEO、性能、移动端、错误页、可访问性、sitemap、robots、analytics 或 Search Console 监控。

请生成上线前检查清单：
1. title、description、canonical
2. robots.txt 和 sitemap.xml
3. 404 页面和错误提示
4. 移动端显示
5. 性能和首屏加载
6. 表单异常输入
7. 隐私说明
8. Search Console 验证
9. 部署环境变量
10. 回滚方式

第十二步：让 Claude Code 总结发布说明

开发完成后，让 Claude Code 输出发布说明，便于记录版本：

请总结本次 SEO 工具网站开发：
1. 已完成的页面
2. 已实现的检测项
3. 技术栈和核心文件
4. 已运行的测试
5. 上线前仍需人工检查的事项
6. 后续迭代建议

完整实战提示词模板

下面是一段可以直接复制使用的提示词：

请帮我开发一个 SEO 工具网站。
当前阶段先给计划，不要立即改文件。

目标：
开发一个页面 SEO 检测工具，用户输入 URL 或 HTML，输出可解释的 SEO 报告。

核心功能：
- title 检查
- meta description 检查
- H1/H2 层级检查
- 图片 alt 检查
- canonical 检查
- 内部链接检查
- 分数、问题、建议和优先级

限制：
- 不伪造搜索量、排名、外链数据
- 不保存用户隐私数据
- 不引入不必要依赖
- 建议必须可解释

请先输出：
1. 产品信息架构
2. 技术实现方案
3. 分批开发计划
4. 检测逻辑数据结构
5. 测试计划
6. 上线 SEO 检查清单
等我确认后再写代码。

后续可以迭代哪些功能

MVP 上线后，可以继续迭代关键词密度提示、结构化数据检查、页面速度建议、批量 URL 检查、报告导出、历史记录、团队协作和 API 接口。但每次迭代都要保持可解释，不要输出没有数据来源的结论。更多排查与迭代方法可以阅读本站 问题排查教程。

FAQ

Claude Code 能直接开发完整 SEO 工具网站吗？

可以辅助完成，但不建议一次性生成全部功能。更稳妥的做法是先做 MVP，再分批增加检测项、报告页、测试和上线监控。

SEO 工具网站第一版应该做哪些功能？

建议先做 title、meta description、H1、图片 alt、canonical 和内部链接检查。这些都能基于页面 HTML 解释清楚，适合作为第一版。

没有真实数据源能做关键词排名分析吗？

不应该伪造排名或搜索量。没有接入真实数据源时，只能做页面级 SEO 检查和内容建议，不能输出假排名数据。

上线前最重要的检查是什么？

要确认页面可访问、移动端可用、title 和 description 合理、sitemap 和 robots 正常、错误处理清楚，并配置 Search Console 或日志监控。

Claude Code 生成的 SEO 建议可靠吗？

需要审查。可靠建议应基于可观察数据，并说明依据和修复方法。无法验证的数据应标注为无法判断，不能当成事实。