知识库 / 阶段 3 · 技术 SEO 与开发协作 / 搜索引擎优化（SEO） ↗ / 第 034 节

🍆 从产品原型到上线，按 SEO 友好视角的全流程细化规范」

从产品原型到上线，按 SEO 友好视角的全流程细化规范#

一、产品原型阶段（PM主导）#

目标：在「画原型」时，就把 SEO 需要的页面类型、结构、字段、URL逻辑考虑进去，而不是开发完再补。

1. 需要明确的基础信息#

  • ✔ 站点类型：导航 / 资讯 / 影视 / 工具 / 混合

  • ✔ 页面类型：

    • 首页

    • 列表页（分类 / 标签 / 搜索结果）

    • 详情页（文章 / 视频 / 单页）

    • 专题页 / 合集页

    • 功能页（登录、注册、下载等，一般 noindex）

  • ✔ 哪些页面允许被搜索引擎索引，哪些不允许（如登录页）

2. 原型里必须体现的 SEO 关键点#

  1. 每种页面的“主标题位置”

    • 对应后面 H1、Title 的源头

    • 原型中要标注：这是页面主标题（H1）

  2. 分类、标签、搜索等路径结构

    • 原型中要定义清楚：

      • 分类如何展示

      • 标签如何点击

      • 列表是否分页（必须有分页结构）

  3. URL 规划（写在原型/说明里）

    • 例如：

      • /category/xxx/

      • /category/xxx/page/2/

      • /article/xxxx/

      • /video/xxxx/

    • 明确是否用英文、拼音、ID，保证稳定且不乱变

  4. 是否需要专题 / 合集页（SEO权重页）

    • 导航站：资源合集、专题导航

    • 影视站：片单合集、演员合集、主题合集

    • 在原型中要把这些当“一级内容产品”规划出来

  5. SEO字段在原型中要标注为“可配置项”

    • Title

    • Description

    • H1（主标题）

    • 封面图 / 缩略图

    • 标签 / 分类

    • Canonical（逻辑说明即可）

✅ 产出：
《产品原型 + SEO字段说明》文档
《页面类型与URL结构表》

二、UI 设计阶段（设计主导，SEO/前端参与）#

目标：设计稿好看，但不能牺牲结构、可读性和可点击性。

1. 设计稿需保留的结构#

  • 主标题区域：视觉可调，但不能丢 / 替换为纯图片

  • 副标题 / 小标题：给 H2 / H3 预留位置

  • 面包屑导航的位置

  • 列表 + 分页区域

  • 推荐/相关文章模块位置

2. SEO相关设计规范#

  1. 文本必须是文本，不要做成图片字

    • 标题、导航、分类名、按钮文案都要是可选中文本。

  2. 按钮 / 导航必须可以做成 <a> 链接

    • 尤其是导航站 & 影视站的条目列表。

  3. 弹窗与遮挡

    • 不允许「一打开页面就全屏遮挡内容」的弹窗设计（严重影响体验和SEO）。

  4. 移动端优先

    • 设计需保证移动端体验良好，文字可读、按钮好点。

✅ 产出：
《UI设计稿（含结构标注）》
《多端（PC/移动）交互说明》

三、前端开发阶段（前端主导，SEO协同）#

目标：页面结构语义化、可抓取、可索引。

1. HTML结构与标签#

  • <h1>：每页唯一，对应主标题

  • <h2>/<h3>：用于内容结构（模块标题、分段标题）

  • <a>：所有可点击跳转必须使用，而不是 div + onclick

  • 图片 <img>：预留 alt 属性

2. 分页与列表#

  • 分页使用普通链接：/page/2/ /page/3/

  • 不使用纯 JS 无限滚动；如有“加载更多”，也要提供普通分页路径

  • 列表页源码中要有所有条目，不可完全靠 JS 拉取

3. 内容直出#

  • 文章、视频信息等 必须在HTML源码中出现

  • 不允许主内容通过 Ajax 异步加载后才出现（爬虫看不到）

4. SEO增强点#

  • 预留 <head> 区域供后端写：

    • <title>

    • <meta name="description">

    • <link rel="canonical">

    • 结构化数据 JSON-LD <script type="application/ld+json">

✅ 产出：
可访问的前端页面（联调或静态版）
《前端结构说明文档（可选）》

四、后端开发阶段（后端主导）#

目标：让所有 SEO 配置“可配置、可模板化、可自动化”。

1. URL 路由 & 状态码#

  • 路由按原型 & 规划实现，不随意更换

  • 页面状态码：

    • 正常：200

    • 永久跳转：301

    • 不存在：404

    • 删除：410（可选，但对SEO友好）

  • 错误页不要返回 200（假404）

2. TDK 与 SEO字段接口#

后端提供统一 SEO 配置模块：

  • 每个页面可单独配置：

    • title

    • description

    • H1（一般来源于内容字段）

  • 提供 TDK 模板（文章页、分类页、专题页等）

3. 内链与模块数据#

  • 相关文章模块：后台或算法自动选出 N 条

  • 推荐内容模块

  • 专题入口、分类入口

  • 底部 Footer 固定链接

4. 结构化数据 + IndexNow#

  • JSON-LD 模板（Article/VideoObject/BreadcrumbList等）

  • IndexNow 自动推送：

    • 新增内容

    • 更新内容

    • 删除内容

5. sitemap & robots 管理#

  • 自动生成 sitemap（分模块亦可）

  • 后台可控制 robots.txt 内容

  • 提供可手动刷新 sitemap 的入口（可选）

✅ 产出：
可联调环境（带数据）
《接口说明与SEO字段映射表》

五、SEO配置与检查阶段（SEO主导）#

目标：在正式测试前，先把 SEO 框架调通。

1. 基础检查#

  • 页面源代码检查：

    • 是否有 H1

    • 是否有正确的 canonical

    • 是否输出结构化数据（JSON-LD）

  • URL 是否符合规划

  • 列表 / 分页是否按页码展示

2. 数据配置#

  • 配置代表性页面的 Title / Description

  • 为重要分类 / 专题配置合理文案

  • 影视/文章页补全：

    • 发布时间

    • 作者 / 站点名

    • 封面图

    • 简要描述

3. 工具验证#

  • 用 Bing / Google 检测：

    • 结构化数据是否识别

    • robots 是否无误屏蔽主内容

  • 首批 URL 测试 IndexNow 推送是否成功

✅ 产出：
《SEO预检查报告》
必要的修改建议列表

六、产品 BUG 测试阶段（测试 / 产品 / SEO 联合）#

目标：不仅测功能，还要测 “可被搜索引擎正常使用”。

1. 功能类常规测试（略）#

  • 表单、按钮、跳转、数据、权限等

2. SEO相关测试项（强烈建议写进测试用例）#

  • 路由是否一致且无乱码

  • 所有重要页面是否能被匿名访问（不强制登录才能看）

  • 404 页面是否真实返回 404

  • 是否存在：

    • 死链

    • 循环跳转

    • 大面积空内容页

  • 是否有以下危险情况：

    • 首页或核心列表被 noindex

    • robots.txt 屏蔽了需要抓取的目录

    • canonical 全都指向首页

✅ 产出：
《测试报告（含SEO项）》
修复单列表（分开发 / 前端 / SEO配置）

七、上线阶段（运维 / 开发 / SEO / 产品）#

目标：上线过程不“断结构、不断路”。

1. 上线前 Checklist#

  • DNS、证书（HTTPS强制跳转）正常

  • 主域名统一（www / 非www 二选一 + 301）

  • robots.txt 已校验

  • sitemap.xml 可访问

  • 重要URL（首页、分类页、几个详情页）手动访问无异常

2. 上线后首日动作（SEO重点）#

  • 通过 IndexNow 推送一批核心URL

  • 提交 sitemap 至 Bing / Google（如用）

  • 观察服务器日志：

    • 是否有搜索引擎访问

    • 是否大量500/404

3. 产品 & 数据观察#

  • PV / UV 是否正常进入

  • 主流程（访问 → 浏览 → 跳转）是否成立

  • 是否出现异常页面暴增（404、空白页）

✅ 产出：
《上线执行记录》
《首周 SEO & 流量观察记录》

八、后续迭代与复盘（持续优化）#

这一段更多是“流程闭环”：

  • 每周：SEO + 产品同步一次

    • 新需求是否影响结构？

    • 是否需要新增页面类型 / URL？

    • 是否有需要模板化的新内容形式？

  • 每月：复盘

    • 收录走势

    • 搜索流量变化

    • 哪些模块表现好 / 差

    • 是否需要改版模板 / 内链策略