谷歌更新JS SEO文档，你的Canonical标签可能正在“打架”

大家好，我是Neo。

做独立站的兄弟们，尤其是用 React, Vue 这种前端框架，或者用了大量 JS 插件的 B2B/B2C 站点，今天这篇内容你们得仔细看看。

最近，谷歌悄悄更新了关于 JavaScript SEO 的官方文档，重点谈了一个非常技术细节，但又极其致命的问题——Canonical URLs（规范化链接）的处理。

这听起来可能有点枯燥，但如果我不说，你可能永远不知道为什么你的页面收录不稳定，或者为什么谷歌总是收录了错误的页面。

简单来说：如果你的 HTML 代码和 JS 代码在“打架”，谷歌就会懵圈。

什么是“双重规范化”陷阱？

首先，我们要理解谷歌是怎么看你的网站的。对于现代网站，谷歌其实会“看”两次：

  1. 第一次（First Wave）： 爬虫抓取你的 Raw HTML（服务器直接返回的原始代码）。这时候，JS 还没运行。
  2. 第二次（Second Wave）： 谷歌的渲染服务（WRS）运行页面上的 JavaScript，生成 Rendered HTML（最终用户看到的页面）。

问题就出在这两次之间。

谷歌在最新的文档中警告：Canonicalization can happen twice（规范化可能发生两次）。

如果你的 Raw HTML 里写着： <link rel="canonical" href="https://site.com/page-a" />

但是，等 JS 运行完，页面内容变了，或者某个插件自作聪明，把 Canonical 标签改成了： <link rel="canonical" href="https://site.com/page-b" />

这就出事了。谷歌收到了两个相互冲突的信号。

Neo的解读： 这就像你去办护照。你递交的申请表（Raw HTML）上写的是“张三”，但是当你站在照相机前拍照（Rendered HTML）时，你胸口挂了个牌子写着“李四”。签证官（Google）不仅会困惑，甚至可能觉得你在搞欺诈，或者干脆随便选一个（通常是选错的那个）。

谷歌的官方建议：保持一致 (Consistency)

在这次更新中，谷歌明确了 Best Practices（最佳实践）：

1. 黄金法则：Raw HTML = Rendered HTML

这是最稳妥的做法。无论你的 JS 怎么折腾，确保服务器端返回的 HTML 里的 Canonical 标签，和最终 JS 渲染后的标签，完全一致。

这样，谷歌在第一次抓取时就能确定规范链接，在第二次渲染后再次确认，信号强化，收录稳如老狗。

2. 如果非要用 JS 修改 Canonical

虽然谷歌说它支持用 JavaScript 注入 Canonical 标签（supported but not recommended），但这其实是在走钢丝。

如果你必须用 JS 来生成 Canonical 标签，谷歌建议：在 Raw HTML 里干脆不要放 Canonical 标签。

为什么要留空？因为如果 Raw HTML 里有一个旧的/错的标签，而 JS 又注入了一个新的/对的标签，这中间的时间差和冲突，足以让搜索引擎产生误判。

但是！Neo 强烈不建议这么做。 依赖 JS 来告诉谷歌哪个页面是正版，效率低且风险高。万一 JS 渲染出错了呢？万一渲染超时了呢？那你的页面就在“裸奔”。

为什么这对独立站很重要？

很多独立站（特别是 Shopify 甚至一些 WordPress 站点）安装了大量的插件。

  • 场景 A： 你的 SEO 插件在服务器端生成了一个 Canonical 标签。
  • 场景 B： 你装的一个多语言切换插件，或者货币切换插件，是通过 JS 运行的。它可能会在页面加载后，动态修改 URL 结构，顺手把 Canonical 也改了。

这时候，“神仙打架”就发生了。

Neo的实战指南：怎么检查？

别光听我说，现在就去检查你的网站。不需要懂代码，用 Google Search Console (GSC) 就行。

  1. 打开 GSC，输入你的页面 URL。
  2. 使用 URL Inspection (URL 检查) 工具。
  3. 点击 View Crawled Page (查看已抓取的页面) -> 查看 HTML 源代码 -> 搜索 canonical。这是谷歌第一次看到的。
  4. 点击 Test Live URL (测试实时 URL) -> 查看测试后的代码 -> 搜索 canonical。这是 JS 运行后谷歌看到的。

对比这两个值：

  • 如果一样：恭喜，安全。
  • 如果不一样：赶紧找你的开发或者技术服务商，这是个必须修复的 Bug。

总结

谷歌这次更新文档，其实是在强调一个核心逻辑：不要给搜索引擎制造困惑。

对于 SEO 来说，确定性 (Certainty) 是最宝贵的资产。不要让你的代码逻辑模棱两可。

Neo 划重点：

  • Canonical 标签尽量在服务器端（Server-side）就定死。
  • 千万别让 JS 去画蛇添足地修改它，除非你非常清楚自己在做什么。
  • 定期用 GSC 检查 Raw HTML 和 Rendered HTML 的一致性。

希望这篇解读能帮大家避开这个隐蔽的 SEO 坑。做独立站，细节决定成败。

参考资料：