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

前端开发 SEO 配合说明 · 进阶版

*适用角色：前端开发 / 产品经理 / SEO专员 / 后端模板开发
适用站点：导航站、影视站、内容站、资讯站*

一、SEO视角下，前端的职责边界（精确定义）#

前端负责实现：

✔ 可抓取（HTML源码中必须出现内容）
✔ 可理解（结构语义化）
✔ 可索引（正确跳转、状态码正确）
✔ 可配置（为SEO/后端预留字段）
✔ 高性能（速度 = 排名）

前端不负责：

✘ 关键词策略
✘ 提交收录
✘ 内容质量

但前端是决定 SEO 基础成败的 70% 决策者。

二、前端必须实现的 SEO 技术边界（极细节）#

1. 页面结构 · 必须实现语义化骨架#

前端必须输出完整的语义化 HTML：

理由：搜索引擎通过 DOM结构 判断页面内容层级。

2. 标题结构（H1/H2/H3）强制规范#

（1）H1 必须：#

每页唯一
在 HTML源码中存在
必须是“页面真实主题”

错误示例：
❌ 分类页 H1 = “欢迎光临”
❌ 视频页 H1 = “视频播放页面”

正确：
✔ 分类页 H1 = 分类名称
✔ 视频页 H1 = 影视剧名称
✔ 文章页 H1 = 文章标题

（2）模块标题必须使用 H2#

不一定显示，但结构必须存在：

（3）段落标题使用 H3#

用于内容块划分：

3. 链接（a标签）绝对要求#

（1）所有跳转必须使用 <a>，禁止 onclick#

错误方式（SEO无法识别为链接）：

正确：

（2）所有链接必须为绝对路径或规范路径#

✔ /article/xxx/
✔ https://example.com/xxx

不得使用：
❌ javascript:void(0)
❌ #section 当跳转用

4. 内容直出（禁止 JS 渲染主内容）#

主内容（文章正文、视频信息、导航内容）必须出现在 HTML 源码中。

禁止：

fetch() 异步加载文章正文
Vue/React 前端渲染内容
infinite scroll（无限下拉代替分页）

搜索引擎不会等待 JS 执行 → 不会看到内容。

前端必须使用：

✔ SSR（Next/Nuxt）
✔ SSG（静态构建）
✔ 后端模板渲染（PHP/Java/Python）

5. 分页结构（极细节 SEO要求）#

（1）分页 URL 必须规范化#

/category/page/2/

/category/page/3/

禁止：

❌ /category/?page=2（可作为备选，但非最佳）
❌ /category/2（语义不清晰）

（2）分页必须可点击，不可无限滚动#

爬虫无法“下拉”，必须有 <a> 的分页入口。

（3）分页 prev/next（前端模板需预留）#

（4）超页处理（必须做）#

访问 /page/999/：
✔ 返回 404 或
✔ 跳转最后一页
❌ 禁止显示空白页面且返回 200（严重SEO错误）

6. Canonical（规范化）必须可插入#

前端需在 <head> 预留：

不能写死，必须由后端动态写入。

7. 图片规范（ALT、尺寸、懒加载）#

（1）所有图片必须有 ALT 字段#

避免：
❌ alt=""
❌ alt="图片1"

（2）必须支持 WebP#

前端建议输出：

</picture>

（3）懒加载#

8. 面包屑导航（Breadcrumb）必须支持#

UI样式可自定义，但结构必须是文本：

<a href="/">首页</a> /

<a href="/category/">分类</a> /

</nav>

并配合结构化数据（前端模板需支持 JSON-LD 注入）：

9. 结构化数据（JSON-LD）前端必须支持注入#

模板中预留：

<script type="application/ld+json">
{{schema_json}}
</script>

前端不可：

❌ 清洗空格
❌ 转义 JSON
❌ 过滤 script（某些前端框架默认过滤）

三、前端必须预留的“SEO模块插槽”（模板要求）#

1. <title> 注入点#

<title>{{title}}</title>

2. <meta> 注入点#

3. 结构化 <script> 注入点#

4. canonical 注入点#

5. meta robots 注入点#

6. IndexNow 校验 key 文件不由前端处理，但需保证不被拦截#

四、SEO关键场景 · 前端细节规范（不同站点分类）#

（1）导航站（核心）#

前端必须：

所有导航链接必须是 <a> 文本
模块标题必须为 H2（可隐藏）
分类页必须有 H1
博客模块文章列表必须直出
点击统计不能影响跳转方式（避免 JS 跳转）

（2）影视站（核心）#

影视页必须包含：

视频页前端结构需求：#

H1：影片名称
封面图片 + ALT
剧情简介（正文直出）
剧照区块（ALT）
播放源跳转必须是 <a>
演员区域必须使用 <a> 链接（非 onclick）
集数列表必须为普通HTML列表

影片详情页结构化（前端必须可插入 VideoObject）：#

{

"@type": "VideoObject",

"name": "{{title}}",

"thumbnailUrl": "{{thumbnail}}",

"description": "{{description}}",

"uploadDate": "{{date}}"

}

（3）资讯/文章站#

前端需确保：

文章内容直出
H1/H2/H3 标题完整
相关文章模块支持动态渲染
内容分页（可选）
标签区（Tag）使用 <a>
内链模块 UI 可插入多条

五、SEO高危禁忌（前端必须避免）#

禁止行为	影响
用 JS 渲染主内容	70% 几率不收录
无分页无限滚动	列表页抓取深度受限
关键链接不使用 <a>	无法传递权重
大量使用 display:none 隐藏内容	被视为作弊风险
使用 iframe 显示主要内容	主内容无法抓取
大图无压缩	影响LCP，降低排名
脚本阻塞渲染	加载慢，影响移动优先索引

六、前端自检 Checklist（必须执行）#

代码结构#

☐ H1 仅1个
☐ H2/H3 层级无跳级
☐ 所有内容可在源码中看到
☐ 所有跳转均为 <a>
☐ 分页可正常点击

SEO可配置#

☐ Title 可注入
☐ Description 可注入
☐ Robots 可注入
☐ Canonical 可注入
☐ JSON-LD 可注入

性能#

☐ 图片 WebP
☐ JS 延迟执行
☐ CSS 压缩
☐ 首屏加载<2.5s

结构化#

☐ Article / VideoObject JSON-LD 完整输出
☐ BreadcrumbList 正常识别

七、前端 × SEO × 产品协作流程（落地版）#

1）产品原型阶段#

SEO提前审核结构 → 提供备注 → 前端确认可实现

2）UI阶段#

SEO审核语义结构 → 前端确认H结构呈现方式

3）开发阶段#

前端按规范实现 → 后端注入字段 → SEO提前测试

4）联调阶段#

SEO检查：

结构
Canonical
分页
JSON-LD
内链与链接行为

5）测试阶段#

产品测试 + SEO复测

6）上线阶段#

前端配合修复视觉问题/样式、保持结构不被破坏
SEO监控抓取与收录

八、结语#

前端不是 SEO 的辅助，而是 SEO 的地基架构师。
结构 = 语言
内容 = 语义
路由 = 规则
渲染 = 是否能被搜索引擎看到

只要前端严格按此进阶规范执行，网站的抓取速度、收录效率、结构质量、排名稳定性都会显著提升。