产品开发交互与 SEO 友好规划（V1.0）#

适用角色：产品经理 / 前端开发 / 后端开发 / SEO专员 / 管理员
适用站点类型：导航站 / 内容站 / 影视站 / 工具站 / CMS类系统

一、文档目的#

确保产品在规划阶段就充分兼容 SEO 原则，使设计与开发的每一个功能，均符合搜索引擎的抓取逻辑、理解逻辑、展示逻辑。

SEO不是开发完成后“补救”，而是：

产品规划阶段就要为 SEO 留接口、留结构、留空间。

本规范用于统一产品、开发、SEO三方的工作模式，提高项目实施效率，并从根源保障可抓取、可索引、可排名。

二、SEO与产品开发交互的核心原则#

以下「五大原则」必须在产品交互与设计阶段明确：

1. 结构可读原则（Structure First）#

所有核心内容必须以 HTML 原生结构呈现，禁止纯JS渲染、禁止Ajax主内容加载。

2. URL 规范原则（URL Consistency）#

URL在产品规划时确定，不得随意更改，不得暴露无意义参数。

3. 页面唯一性原则（Canonical Rule）#

每个页面必须有唯一、可索引的主URL。
分类页、详情页、专题页均需规范化页面结构。

4. 模块可配置原则（Editable SEO Fields）#

TDK（Title/Description）、H1/H2、ALT、canonical、meta robots 必须支持后台配置。

5. 模板复用原则（Template Standardization）#

同类型页面（如新闻详情页、影视视频页、导航分类页）必须统一模板结构，这样有利于搜索引擎快速理解站点布局。

三、产品规划阶段（PRD阶段）需确定的SEO要素#

产品经理在写 PRD 时，必须列出以下内容并确认 SEO 可配置：

① 页面类型与结构#

• 详情页

• 列表页

• 分类页

• 专题页

• 搜索页

• 标签页

• 工具页

PRD中需明确：

✔ 每种页面的 核心内容字段
✔ 页面是否可被索引（index / noindex）
✔ 是否需要结构化数据
✔ 是否需要分页

② URL规划（必须先定）#

URL格式必须标准化：

/category/

/category/page/2/

/video/xxx/

/tag/keyword/

/article/xxxx/

禁止：

• 动态参数： ?id=123

• 多种格式混用

• 分类名可变（导致大量404）

URL 一旦确定，开发全程不得随意改动。

③ SEO核心字段在PRD中必须预留配置项#

④ 多设备交互（SEO重要）#

UI需保证：

✔ 移动端优先（Google/Bing移动优先索引）
✔ PC / Mobile 结构一致
✔ 禁止首屏大面积广告遮挡

⑤ 内容模块是否需要自动化#

PRD中需明确：

• 相关文章自动关联

• 推荐模块自动生成

• 评论/标签自动更新

• Sitemap自动生成

• IndexNow自动推送

• 内链模块是否走算法推荐

这些必须与开发提前讨论。

四、设计阶段（UI/交互）需遵循的SEO规范#

设计师必须知道的 SEO 友好规则：

① H 标签不可丢失（可隐藏但不可取消）#

H1 必须存在。
视觉上无法展示 → 用 CSS “移出屏幕”。

② 链接必须为 <a> 标签（不能用 DIV+JS）#

尤其是导航站、内容列表、影视剧集列表。

错误：

<div onclick="window.location='/article/12'">文章</div>

正确：

<a href="/article/12">文章</a>

③ 禁止使用无限滚动加载（Infinite Scroll）#

新闻列表、影视列表必须有「分页」。
无限滚动 = 搜索引擎抓不完内容。

④ 图片必须能设置 ALT 字段#

UI 必须预留 ALT 字段规范。
影视海报、封面图必须可加 ALT。

⑤ 结构化数据必须可插入（UI留位）#

例如：

• Article

• VideoObject

• BreadcrumbList

• FAQ

在设计阶段必须预留逻辑结构。

五、开发阶段必须实现的 SEO 技术标准#

这是最关键的部分。

① 服务器端渲染（SSR）或静态化（SSG）#

禁止主内容依赖 JS 渲染。
视频站、新闻站、导航站必须主内容直出。

② 状态码规范#

③ Canonical 自动生成#

• 分类第一页 → 自己

• 分页页 → 指向自身

• 避免重复内容被收录

④ Sitemap 自动更新#

新增、删除、修改内容 → 自动写入 sitemap。

⑤ IndexNow 自动推送机制#

自动推送：

• 新内容

• 内容更新

• 删除内容（410）

需记录推送日志。

⑥ 内链模块模板化开发#

所有内容页必须支持：

• 相关文章模块

• 推荐内容模块

• 专题入口模块

• 分类反向链接

导航站要求更高，需要模块内链。

⑦ 结构化数据 JSON-LD 自动输出#

后台字段 → 前端模板自动渲染：

• Article

• VideoObject

• WebSite + SearchAction

• BreadcrumbList

六、SEO与产品开发的工作流（完整协作流程）#

① PRD阶段（产品 → SEO）#

• 产品提交页面结构

• SEO审核可抓取性、URL规则、字段可配置性

• 输出《SEO需求说明》

② 设计阶段（UI → SEO）#

• 设计稿提交前给 SEO 审核

• SEO确认 H 标签、大纲、分页可见、模块结构

③ 开发阶段（开发 → SEO）#

• 开发完成 Alpha 版本

• SEO测试：

  • 可抓取性

  • 结构化

  • 内链输出

  • Canonical

  • 状态码

  • 分页

  • robots / sitemap

④ 上线前（SEO → 产品 → 开发）#

• SEO输出《上线检查清单》

• 产品确认体验

• 开发修复细项

⑤ 上线后（管理员 → SEO）#

• 管理员每日巡查收录

• SEO监控 IndexNow、抓取频率

• 产品记录反馈 → 迭代优化

七、不同站点类型的交互与SEO规划重点#

1）导航站#

重点规划：

• 分类结构

• 模块标题（H2）

• 链接全部 <a>

• 博客模块支撑导航主题

• 去路点击统计数据为SEO优化提供依据

2）影视站#

重点规划：

• 视频详情页结构

• VideoObject字段

• 演员页、合集页、标签页

• 剧集分页结构

• 剧情文本内容块

• 多模板统一化

3）资讯站#

重点规划：

• 文章模板统一

• 分页结构

• 面包屑

• 专题页建设（带动整站权重）

八、总结：产品开发与SEO本质是协同关系#

产品设计的每一个页面
= 搜索引擎看到的“节点”

开发输出的每一个结构
= 搜索引擎理解站点的“规则”

SEO提供的每一个规范
= 搜索引擎认可的“语义标签”

三者协作，才会出现：

✔ 抓取稳定
✔ 收录快速
✔ 权重提升
✔ 内容被看见
✔ 流量稳定增长