JavaScript SEO 基础排查指南

💡 核心摘要：JavaScript SEO 的核心不是“Google 能不能执行 JS”，而是关键内容和信号是否能在抓取、渲染、索引过程中稳定出现。你要重点检查服务端渲染或预渲染、唯一可抓取 URL、标题摘要、HTTP 状态码、canonical、robots meta、结构化数据、链接和懒加载。

一、理解 Googlebot 的三阶段流程

Googlebot 处理 JavaScript 网页通常经历三个阶段：抓取、渲染、索引。抓取阶段获取初始 HTML，渲染阶段执行 JavaScript 并生成页面内容，索引阶段再提取正文、链接和搜索信号。

问题常出现在阶段之间。初始 HTML 里没有关键内容，渲染依赖阻塞资源，或者 JS 修改了标题、canonical 和 robots 指令，都可能让 Google 最终看到的页面与用户看到的不一致。

💡 排查 JavaScript SEO 时，不要只看浏览器里页面能不能打开。要用 Google 能看到什么作为判断标准。

二、优先考虑服务器端渲染或预渲染

Google 可以渲染 JavaScript，但渲染需要额外资源和时间。对于依赖搜索流量的核心页面，Google 建议优先采用服务器端渲染、静态生成或预渲染，让关键内容在初始 HTML 中可见。

这不代表所有交互都不能用 JavaScript。更合理的做法是：正文、主标题、核心链接、产品信息、价格、作者、发布时间等 SEO 关键信号先随 HTML 输出，筛选、图表、个性化交互再交给客户端增强。

推荐分层

初始 HTML：正文、标题、主导航、关键链接、结构化数据
客户端 JS：交互状态、筛选体验、增强组件、个性化内容

⚠️ 如果页面必须等 API 返回后才显示主要内容，就要确认 Google 渲染阶段能访问 API、等待内容并正确索引。

三、让每个内容有唯一 URL

JavaScript 应用经常用前端路由切换页面。Google 需要能通过唯一、稳定、可抓取的 URL 访问每个独立内容，而不是只能通过点击按钮或状态切换看到不同内容。

如果页面状态代表不同文章、商品、分类或搜索入口，应使用真实 URL，并让服务器在直接访问该 URL 时返回对应内容。不要只依赖片段标识、临时状态或无链接按钮承载重要内容。

💡 单页应用也要像多页网站一样设计 URL。用户能复制、Google 能抓取、服务器能响应，才是稳定入口。

四、正确设置标题和摘要

页面标题和摘要是 Google 理解页面主题的重要信号。JavaScript 可以设置或更新 <title> 和 meta description，但必须确保渲染后每个 URL 都有唯一、准确、稳定的标题和摘要。

如果多个前端路由共用同一个标题，搜索结果可能无法区分页面主题。如果标题在渲染后才出现，还要用网址检查工具查看 Google 渲染 HTML 中是否能看到最终标题。

页面头部检查

<title>JavaScript SEO 基础排查指南</title>
<meta name="description" content="检查 JS 网站抓取、渲染、索引问题。">

⚠️ 不要让所有路由都沿用首页标题。页面级标题应随 URL 和内容变化。

五、用正确的状态码处理错误页面

JavaScript 应用不能只在页面里显示“未找到”文字。对不存在、删除或权限不可用的页面，服务器应返回合适的 HTTP 状态码，例如 404、410 或需要重定向时返回 301、302。

如果服务器始终返回 200，但页面内容显示“找不到”，Google 可能把它判断为 soft 404。对于搜索质量和索引控制来说，HTTP 状态码比页面上的提示文案更可靠。

状态码抽查

curl -I https://example.com/missing-page
curl -I https://example.com/old-url

💡 前端路由的 404 页面，也需要服务器配合返回真正的 404 或 410。

六、不要用 JavaScript 注入 canonical

canonical 是规范化的重要信号。Google 文档建议不要使用 JavaScript 向页面注入或修改 rel="canonical"，因为搜索引擎可能读取到不同版本，导致规范化判断不稳定。

更稳妥的做法是在初始 HTML 中直接输出正确 canonical。对于有参数、分页、筛选或前端路由的网站，尤其要确认每个可索引 URL 的 canonical 指向符合预期。

推荐写法

<link rel="canonical" href="https://example.com/article/javascript-seo">

⚠️ canonical 不适合在客户端渲染后再临时补。它应该是服务器输出的稳定页面信号。

七、谨慎使用 robots meta

JavaScript 可以添加或修改 robots meta，但这会带来时序风险。如果初始 HTML 中有 noindex，Google 看到后可能不会等待 JavaScript 移除它。这样页面即使渲染后看起来可索引，也可能已经被排除。

需要控制索引时，优先让服务器输出最终意图。如果页面应该可索引，就不要在初始 HTML 放临时 noindex 再依赖 JS 删除；如果页面不应索引，则让服务器和渲染结果保持一致。

💡 robots 指令要稳定、明确、前后一致。临时状态不适合放进可抓取页面的初始 HTML。

八、让链接可被发现

Google 主要通过 HTML 链接发现页面。重要链接应使用标准 <a href="...">，而不是只绑定点击事件、按钮、无 href 链接或需要用户交互才能出现的状态。

前端导航可以保留交互体验，但底层仍应输出可抓取的链接。对于分页、分类、相关文章、产品详情和核心转化页，尤其要确保 Google 不依赖执行复杂交互才能发现 URL。

可抓取链接

<a href="/blog/javascript-seo-basics">JavaScript SEO 基础</a>

⚠️ onclick 不是链接发现机制。重要页面不要只藏在事件处理里。

九、处理懒加载和缓存

懒加载可以改善性能，但不要让关键正文、图片或链接只能在用户滚动、点击或复杂交互后才出现。Google 支持部分懒加载模式，但实现必须让内容在渲染和测试工具中可见。

对 JavaScript 和 CSS 资源，可以使用内容哈希文件名并设置长期缓存。这样既能提升加载效率，也能在内容变更时通过新文件名让 Google 获取最新资源，避免旧 JS 影响渲染结果。

💡 懒加载适合非首屏增强内容。首屏主题、正文入口和核心链接应尽量直接可见。

十、检查结构化数据和 Web Components

结构化数据可以由 JavaScript 生成，但要确保渲染后的 HTML 中包含有效、完整、符合政策的标记。上线前应用富媒体结果测试和网址检查工具确认 Google 实际看到的数据。

如果使用 Web Components，重要文本内容应放在 light DOM 中，或者确保 Google 渲染后能读取最终内容。不要把关键内容封闭在难以提取的组件状态里。

⚠️ 结构化数据必须匹配页面可见内容。用 JS 动态生成时，更要防止字段缺失、延迟加载失败或与正文不一致。

📌 核心收获

• ✓ Googlebot 会抓取、渲染、索引：JS 问题常发生在阶段之间。
• ✓ 核心内容应尽早可见：SSR、静态生成和预渲染比纯客户端渲染更稳。
• ✓ 每个内容需要唯一 URL：前端路由也要能被直接访问和抓取。
• ✓ 状态码不能只靠前端文案：不存在页面要返回真实 404 或 410。
• ✓ canonical 和 robots 要稳定：不要依赖 JS 临时注入或移除关键索引信号。
• ✓ 链接要用标准 <a href>：重要 URL 不应只藏在点击事件里。
• ✓ 结构化数据要用工具验证：以 Google 渲染后看到的结果为准。

🚀 立刻行动

1. 用网址检查工具测试一个核心 JS 页面，查看 Google 渲染后的 HTML 是否包含正文、标题和主链接。
2. 打开页面源代码，确认初始 HTML 中是否已有主要内容、canonical、meta description 和结构化数据。
3. 抽查 5 个前端路由，确认直接访问 URL 时服务器能返回对应页面，而不是统一空壳。
4. 用 curl -I 检查删除页、旧 URL 和不存在 URL 是否返回正确状态码。
5. 搜索代码中的 noindex、canonical 和 <title> 更新逻辑，确认不会被客户端时序破坏。
6. 检查主导航、分页、相关文章和产品链接是否使用标准 <a href>。
7. 用富媒体结果测试验证 JS 生成的结构化数据是否完整且与可见内容一致。

来源：JavaScript SEO 基础知识 | 本文为知识提炼与重新表达