JavaScript SEO 调试：比较 Raw HTML、Rendered DOM 与 Googlebot 输出
JavaScript SEO 问题通常不会主动报警。
页面在浏览器里看起来很好。内容出现了，按钮能点，schema 也能在 DevTools 某处找到。
但 crawler 可能收到不同版本：
- 很薄的 raw HTML
- 缺失内部链接
- 很晚才注入的 schema
- 错误 canonical
- 重定向差异
- 移动端遗漏内容
这套调试流程会比较 raw HTML、rendered DOM 和 crawler 输出，帮助你找到真实问题。
三种视图
Raw HTML
Raw HTML 是 JavaScript 运行前服务器返回的第一份响应。
检查是否包含：
- Title
- Meta description
- Canonical
- H1
- 主体内容摘要
- 重要链接
- 结构化数据
- Robots directives
如果 raw HTML 几乎为空，页面高度依赖渲染。
Rendered DOM
Rendered DOM 是 JavaScript 执行后的页面状态。
检查：
- 主体内容是否出现？
- Metadata 是否变化？
- Schema 是否被注入？
- 链接是否是真 anchor？
- 不同设备内容是否不同？
- Hydration 是否替换服务端内容？
可以使用浏览器 DevTools 和支持渲染 JavaScript 的 crawler。
Googlebot 或 Bot 视图
Crawler 视图测试特定 bot 如何接收页面。
检查：
- HTTP 状态
- 重定向链
- 最终 URL
- User-agent 差异
- 渲染内容
- 被阻止资源
- 移动端输出
可以使用 Bot Simulator 和可用的 Search Console inspection 工具。
调试清单
| 元素 | Raw HTML | Rendered DOM | Bot view |
|---|---|---|---|
| Title | 存在 | 相同或有意变化 | 相同 |
| Meta description | 存在 | 相同或有意变化 | 相同 |
| Canonical | 正确 | 未被覆盖 | 正确 |
| H1 | 存在 | 存在 | 存在 |
| 主体内容 | 有足够上下文 | 完整内容 | 完整内容 |
| 内部链接 | 可抓取 anchor | 仍是 anchor | 可见 |
| Schema | 有效 JSON-LD | 未重复 | 可见 |
| Meta robots | 正确 | 未变化 | 正确 |
目标不是三种视图完全一样，而是关键 SEO 信号稳定。
常见 JavaScript SEO 失败点
Canonical 注入太晚
如果 canonical 在渲染后才注入，crawler 可能看到错误 URL 或没有 canonical。尽量把 canonical 放在服务端 HTML 中。
链接用 click handler 构建
搜索系统需要可抓取链接。重要导航应使用带 href 的真实 anchor。
Hydration 导致 Schema 重复
一些框架会在 hydration 或路由切换时重复 JSON-LD。重复 schema 会增加验证和维护混乱。
移动端内容差异
Google 主要使用移动端内容进行索引。如果桌面端有重要内容，但移动端隐藏或删除，排名可能受影响。
JavaScript 修改 Robots Tags
不要依赖客户端脚本修复 robots 指令。索引决策应在 HTML 或 HTTP header 中清楚表达。
什么时候使用 SSR 或 SSG
对依赖自然搜索的页面，服务端渲染或静态生成通常更稳。
优先给这些页面使用 SSR 或 SSG：
- 产品页
- 价格页
- 博客文章
- 文档
- 分类页
- 国际化 landing page
- 任何目标为 AI 搜索可见性的页面
Client-side rendering 可以工作，但关键 SEO 元素不应该依赖脆弱 API 调用链。
Fennec 工作流
对高价值 JavaScript 页面：
- 运行 Technical SEO 审计。
- 用 Bot Simulator 模拟 Googlebot smartphone。
- 比较 raw HTML 和 rendered DOM。
- 验证 Schema Markup。
- 检查 Canonical 和 Core Web Vitals。
- 记录模板问题，而不只是单个 URL 问题。
模板级修复会在大量页面上复利。
总结
JavaScript SEO 调试，本质是比较。
把 raw HTML、rendered DOM 和 crawler 输出并排看。稳定 title、canonical、robots、内容、链接和 schema 等关键信号。
如果页面对搜索重要，就让它的重要 SEO 内容尽早、可靠地出现。
