JavaScript SEO 完整解决方案
JavaScript SEO 不是“给 SPA 加个 title”这么简单。
它是一套围绕搜索引擎工作方式建立的工程体系：
- 搜索引擎能不能抓到？（Crawl）
- 能不能正确渲染？（Render）
- 能不能正确理解与收录？（Index）
- 能不能稳定更新？（Refresh）
现代站点多是 Nuxt/Next/React/Vue 驱动，若你没有一套系统方案，很容易出现：
- 页面在浏览器里正常，但搜索引擎看到空壳
- 收录了，但 canonical/分页/结构化数据混乱
- 新内容更新慢、旧内容不刷新
- 性能指标差导致排名受影响
这篇文章给一套“从架构到细节”的完整解决方案，并提供上线检查清单。
1. 先理解搜索引擎的三步：抓取、渲染、索引
简化模型：
- 抓取：拿到 HTML
- 渲染：执行/解析必要资源，获得 DOM
- 索引：抽取可索引信息（标题、正文、链接、结构化数据）
JS 应用的风险主要出在第 2 步：
- 渲染是昂贵的
- 资源加载/执行失败会导致渲染失败
因此，“能 SSR/SSG 的内容就不要依赖客户端渲染”是基本原则。
2. 选型：SSR / SSG / ISR / 预渲染怎么选？
2.1 规则：可索引内容优先静态化
- 内容页（文章、产品详情）：优先 SSG/ISR
- 列表页：SSG/ISR + 分页
- 个性化页（用户中心）：不索引，可 CSR
2.2 各模式优缺点
| 模式 | SEO 友好 | 成本 | 适用 |
|---|---|---|---|
| CSR | 较差/不稳定 | 低 | 非索引页面 |
| SSR | 好 | 中/高 | 动态但可缓存 |
| SSG | 最好 | 低 | 内容型页面 |
| ISR | 好 | 低/中 | 内容更新频繁 |
| 预渲染 | 介于 CSR 与 SSG | 中 | SPA 迁移过渡 |
3. 最关键的 6 件事：JS SEO 体系的骨架
3.1 确保可访问的 HTML（SSR/SSG）
目标：
- 不执行 JS 也能看到核心内容
- 重要链接在 HTML 中可抓取（不是点击后才出现）
3.2 元信息：title/description/canonical/robots
每个可索引页面至少要正确输出：
<title><meta name="description"><link rel="canonical"><meta name="robots">（必要时 noindex）
常见坑：
- canonical 指向错误（导致重复收录或权重分散）
- 多语言站点缺
hreflang
3.3 结构化数据（Schema.org）
结构化数据是 JS SEO 的“理解层”。
- 文章：Article
- 面包屑：BreadcrumbList
- 产品：Product
要点：
- 用 JSON-LD
- 保证与页面内容一致（不要造假）
3.4 站点地图（sitemap）与更新策略
sitemap.xml是发现新内容的高效入口- 更新频繁时，sitemap 也要频繁更新
3.5 内链与信息架构
- 列表页、专题页是权重分发的核心
- 不要让内容“孤岛化”（只有搜索能到）
3.6 可观测性：你必须能回答“搜得到吗？”
建议建立：
- 抓取日志（服务端 access log 识别 bot）
- 渲染错误监控（SSR error）
- 收录状态监控（Search Console）
4. Nuxt/Next 的落地要点（工程视角）
4.1 路由与页面输出
- 列表/详情页使用 SSG/ISR
- 对 query 参数做规范化（避免重复内容）
4.2 处理重复内容：canonical + 参数治理
典型重复来源：
utm_*?sort=?page=
策略：
- 把无意义参数 301 到规范 URL
page分页要有规范化链接（prev/next）
4.3 404/410 与删除策略
- 内容下线：用 410（更明确）
- 软删除：返回 404 但要避免被缓存为 200
5. 渲染与性能：Core Web Vitals 会影响 SEO
SEO 不再只是“内容”。
当你的 CWV 很差时：
- 体验差导致跳出率高
- 排名可能受影响
因此 JS SEO 必须与性能一起治理：
- LCP（内容出现快）
- INP（交互不卡）
- CLS（不抖）
6. JS SEO 的常见“致命坑”清单
- 页面只有骨架，正文靠客户端渲染
- 关键链接被 JS 隐藏/点击后才出现
- title/description 在客户端动态设置
- canonical 指向错误或缺失
- sitemap 不更新
- robots/noindex 配置错误
7. 上线检查清单（可复制）
- 关键页面在无 JS 时是否可见核心内容
- title/description/canonical 是否正确
- 结构化数据是否与内容一致
- sitemap 是否覆盖所有可索引页面
- robots/noindex 是否符合预期
- 是否存在重复内容（参数/多路径）
- 404/410 是否正确
- Core Web Vitals 是否达标（至少 p75）
总结
JavaScript SEO 的正确做法是：
- 用 SSR/SSG/ISR 把可索引内容静态化
- 用元信息与结构化数据让搜索引擎“理解”
- 用 sitemap 与内链让内容“被发现”
- 用可观测性保证“可验证与可演进”
