原文地址 ：https://cloud22.com/javascript-seo

现代 JavaScript 框架能够创建动态、快速且交互性强的网站，但也带来了独特的 SEO 挑战。若配置不当，脚本可能会阻止爬虫抓取内容、拖慢渲染速度，或导致索引不一致。

本清单概述了针对 JavaScript 进行 SEO 优化的最佳实践，共分为四个部分。每项实践均包含：

• 实践描述 – 说明该实践是什么及其重要性。
• 实施指南 – 如何正确应用该实践。
• 验证步骤 – 如何使用 Chrome 开发者工具和 Google Search Console 确认质量保证到位。

指南概要：

本指南提供了一个完整的框架，用于优化基于 JavaScript 的网站，确保爬虫能够轻松访问、渲染和理解页面内容。它涵盖了基础实践，如使用服务端渲染或静态渲染、实施渐进式增强并确保所有关键资源可被抓取；通过稳定的规范标签、结构化数据和一致的元数据来强化索引信号；通过 SEO 友好的 URL、可访问的导航和可索引的动态内容来提升可发现性；最后以技术性能优化收尾，例如推迟渲染阻塞脚本、应用代码分割、启用原生懒加载、利用缓存以及监控核心 Web 指标。这些最佳实践共同将现代 JavaScript 开发与搜索引擎要求相结合，从而打造出加载更快、排名更优并能提供卓越用户体验的网站。

目录：

1. 确保页面可被抓取和渲染
1.1 使用正确的渲染方法
如何实施正确的渲染方法
如何检查渲染效果
1.2 实施渐进式增强
如何实施渐进式增强
如何检查渐进式增强
1.3 确保导航元素存在于静态 HTML 中
如何确保导航元素存在于静态 HTML 中
如何检查导航元素是否存在于静态 HTML 中
1.4 避免阻塞关键资源
如何避免阻塞关键资源
如何验证关键资源未被阻塞

2. 优化索引信号
2.1 在初始 HTML 中发送清晰一致的索引指令
如何发送清晰一致的索引指令
如何验证索引指令清晰一致
2.2 在静态 HTML 中使用 JSON-LD 实现结构化数据
如何在静态 HTML 中使用 JSON-LD 实现结构化数据
如何检查 JSON-LD 结构化数据是否在静态 HTML 中
2.3 确保规范标签明确且稳定
如何实现明确且稳定的规范标签
如何检查规范标签是否明确且稳定

3. 优化内容发现与用户体验
3.1 使用 SEO 友好的 URL
如何通过 JavaScript 实现 SEO 友好的 URL
如何验证通过 JavaScript 实现的 URL 是否 SEO 友好
3.2 避免需要 JavaScript 的隐藏或标签页内容（对 SEO 不友好）
如何对需要 JavaScript 的隐藏或标签页内容进行 SEO 友好化处理
如何验证需要 JavaScript 的隐藏或标签页内容是否对 SEO 友好
3.3 正确处理无限滚动和懒加载
如何通过 JavaScript 实现 SEO 友好的无限滚动和懒加载
如何验证通过 JavaScript 实现的无限滚动和懒加载是否对 SEO 友好

4. 提升页面速度与渲染效率
4.1 移除渲染阻塞的 JavaScript
如何移除渲染阻塞的 JavaScript
如何测试是否存在渲染阻塞的 JavaScript
4.2 策略性地应用代码分割和懒加载脚本
如何实施代码分割和策略性懒加载
如何验证代码分割和策略性懒加载
4.3 利用浏览器缓存和内容哈希
如何实施浏览器缓存和内容哈希
如何验证浏览器缓存和内容哈希

1. 确保页面可被抓取和渲染
现代搜索引擎能够执行 JavaScript，但其渲染过程增加了额外的复杂性和时间。确保您的页面易于抓取且能正确渲染，有助于 Googlebot 和其他爬虫高效地访问、理解和索引您的内容。

1.1 使用正确的渲染方法
JavaScript 网站可以通过多种方式渲染：客户端渲染（CSR）、服务端渲染（SSR）、静态站点生成（SSG）或动态渲染。CSR 完全依赖浏览器执行 JavaScript，这意味着发送给 Googlebot 的 HTML 可能几乎是空的。SSR、SSG 和动态渲染则提供完全或部分预渲染的 HTML 响应，使爬虫能更轻松地正确索引您的内容。

如何实施正确的渲染方法

• 优先使用 Next.js、Nuxt.js 或 Gatsby 等框架进行 SSR 或 SSG。这些框架在客户端 JS 注水（hydration）之前会输出静态 HTML。
• 对于无法切换框架的复杂、重度使用 JavaScript 的单页应用（SPA），考虑采用动态渲染：向爬虫提供预渲染的 HTML 快照，向用户提供交互式 JS。可使用 Rendertron、Prerender.io 或 Puppeteer 等工具实现自动化。
• 配置您的服务器或 CDN，以检测爬虫用户代理并交付预渲染版本。

如何检查渲染效果

• Chrome 开发者工具：
  • 打开”查看页面源代码”，确认关键 HTML 元素（标题、元描述、标题标签、正文文本）在 JS 执行前可见。
  • 将其与”元素”面板（实时 DOM）进行比较。如果 DOM 中添加了原始源代码中没有的内容，则该内容依赖于 JS。
• Google Search Console：
  • 使用”网址检查” → “查看已抓取的页面” → “HTML”标签页。搜索关键元素或文本。
  • 如果 GSC 渲染出的 HTML 与您可见的页面内容匹配，则渲染成功。
  • 如果不匹配，使用”测试实时网址”功能查看是否是渲染或资源阻塞问题阻碍了完全索引。

1.2 实施渐进式增强
渐进式增强使用纯 HTML 构建核心结构和内容，然后通过 JavaScript 添加样式和交互层。它确保即使用户和爬虫遇到脚本执行失败或过慢的情况，也始终能获取核心内容。

如何实施渐进式增强

• 为每个页面构建一个包含以下内容的静态 HTML 骨架：
  • <title> 和 <meta> 标签
  • 标题标签（<h1>–<h3>）和关键的正文文本
  • 导航链接 (<a href="...">)
• 异步加载增强功能的脚本，以便基础内容能立即显示。
• 避免通过 JavaScript 插入关键元素（如规范标签、meta robots、hreflang）；应从一开始就将它们包含在 HTML 头部。

如何检查渐进式增强

• Chrome 开发者工具：
  • 禁用 JavaScript（设置 → 调试器 → 禁用 JavaScript）并刷新页面。页面仍应显示主要内容和导航。
• Google Search Console：
  • 检查网址，验证静态 HTML 是否显示了与用户可见内容相同的核心元素。缺少标题或文本表明页面过于依赖客户端渲染。

1.3 确保导航元素存在于静态 HTML 中
链接、菜单和分页功能同时引导用户和搜索引擎。如果它们是通过 JavaScript 动态生成的（例如，使用 onclick 事件处理程序或没有正确锚点的 React 路由器），爬虫可能无法发现更深层的页面。

如何确保导航元素存在于静态 HTML 中

• 将所有主导航元素包含在静态 HTML 层中。
• 使用 <a href="URL"> 标签，而非 onclick 或基于 JavaScript 的路由器，以暴露可抓取的路径。
• 对于 SPA，配置服务端路由或预渲染路由列表，以便每个独立网址都能通过 HTTP 访问。

如何检查导航元素是否存在于静态 HTML 中

• Chrome（或任何网页浏览器）：
  • 在”查看页面源代码”中，检查链接是否使用了正确的 <a href> 语法。
• Google Search Console：
  • 使用”网址检查” → “测试实时网址” → “查看已抓取的页面”，并验证内部链接是否出现在渲染的 HTML 中。
  • 同时检查”覆盖率” → “已排除” → “已抓取 – 当前未编入索引”，查找缺少或未链接页面的迹象。

1.4 避免阻塞关键资源
在 robots.txt 中阻止 JavaScript、CSS 或图片目录会妨碍搜索引擎完全渲染您的页面。Googlebot 需要访问这些资源以理解页面布局、文本可见性和结构化元素。

如何避免阻塞关键资源

• 切勿在 robots.txt 中使用 Disallow 指令阻止 /js/、/css/ 或 /images/ 等文件夹。
• 检查 CDN 子域名的 robots.txt 文件，确保共享资源不会被意外阻止。
• 使用页面级的 meta robots 标签来管理索引，而不是阻止整个目录。

如何验证关键资源未被阻塞

• Chrome（或任何网页浏览器）：
  • 加载 robots.txt 文件，查找任何包含 /js/、/css/ 或 /images/ 文件路径的 Disallow 语句。
• Google Search Console：
  • 在”索引” → “页面”下，查看”已被 robots.txt 屏蔽”的报告。
  • 在”网址检查” → “查看已抓取的页面” → “更多信息”中，检查 JavaScript 控制台消息部分是否有关于被阻止资源的信息。
  • 使用”测试实时网址”验证之前被阻止的资源现在是否可以正确加载。

总结： 通过将服务端渲染或静态渲染与渐进式增强、未阻塞的资源以及完整的 HTML 输出相结合，您可以确保 Googlebot 和其他爬虫能够高效地访问和渲染您的内容。这些实践为 JavaScript SEO 优化的所有其他方面奠定了坚实的基础。

2. 优化索引信号
搜索引擎依赖明确、一致的信号来确定页面的索引方式、排名及其与其他页面的关系。在 JavaScript 环境中，这些信号在渲染后很容易被更改或隐藏，从而导致抓取效率低下或索引错误。本节的目标是确保所有指令、元数据和结构化数据在初始 HTML 响应中既稳定又可被获取。

2.1 在初始 HTML 中发送清晰一致的索引指令
索引指令（如规范标签、meta robots 标签和链接属性（如 hreflang、prev/next））告知 Google 应索引、合并或忽略哪些页面。若在初始 HTML 送达后通过 JavaScript 添加或更改这些指令，爬虫可能永远无法看到正确的指示。
例如，如果您的 HTML 包含一个 <meta name="robots" content="noindex"> 标签，但随后通过 JavaScript 更改为 “index”，Google 不太可能返回重新渲染该页面，导致该页面始终被排除在索引之外。

如何发送清晰一致的索引指令

• 将所有 meta robots、规范标签和 hreflang 标签置于服务端渲染或预渲染的 HTML <head> 中。
• 切勿使用客户端 JavaScript 覆盖这些内容。
• 每个页面保持一个规范 URL。
• 对于内容的单一版本使用自引用的规范标签，对于重复内容使用不同的规范标签。
• 通过静态 HTML 元标签（而非脚本逻辑）来管理 “noindex” 和 “nofollow” 状态。

如何验证索引指令清晰一致

• Chrome 开发者工具：
  • 打开”网络” → “文档”请求 → “响应”标签页，确认原始 HTML 中存在 <meta name="robots"> 和 <link rel="canonical">。
  • 比较”元素”（DOM）视图，确保脚本没有重写它们。
• Google Search Console：
  • 使用”网址检查” → “查看已抓取的页面” → “HTML”标签页，并搜索 robots 或 canonical。
  • 如果值与您的源代码不同，请检查是否有脚本注入或标签管理规则覆盖了它们。

2.2 在静态 HTML 中使用 JSON-LD 实现结构化数据
结构化数据有助于搜索引擎理解您内容的含义，从而实现 FAQ、面包屑导航或产品信息片段等富媒体搜索结果。通过 JavaScript 添加结构化数据可能有效，但前提是它在首次渲染时就能可靠地呈现。将其静态地包含在初始 HTML 中可保证在抓取期间被发现。

如何在静态 HTML 中使用 JSON-LD 实现结构化数据

• 直接在 HTML <head> 或 <body> 顶部附近使用 JSON-LD 格式。
• 通过服务端或预渲染生成 Schema 对象：html<script type=”application/ld+json”> { “@context”: “https://schema.org”, “@type”: “Organization”, “name”: “Example Inc”, “url”: “https://www.example.com” } </script>
• 避免使用标签管理器或延迟的 JS 函数异步注入 Schema。

如何检查 JSON-LD 结构化数据是否在静态 HTML 中

• Chrome 开发者工具：
  • 打开”网络” → “文档”请求 → “响应”标签页，确认原始 HTML 中存在 JSON-LD 代码段。
  • 比较”元素”（DOM）视图，确保脚本没有重写它。
• Google Search Console：
  • 导航到”增强功能” → “富媒体搜索结果”报告，或使用”网址检查” → “查看测试过的页面”。
  • 确认结构化数据类型出现在”检测到的项目”下。
  • 使用富媒体搜索结果测试工具或 Schema 标记验证工具进行验证。

2.3 确保规范标签明确且稳定
规范标签指示哪个版本的页面是权威版本。JavaScript 框架有时会创建多个 URL 变体、查询参数、片段标识符或虚拟路由来显示相同内容。如果没有一致的规范标签，Google 可能会索引重复内容，或将抓取预算浪费在冗余 URL 上。

如何实现明确且稳定的规范标签

• 在每个页面的 HTML <head> 中生成一个自引用的 <link rel="canonical">。
• 对于备用视图或筛选视图，将规范链接设置为主版本。
• 确保框架（例如 React Router, Vue Router）能通过静态输出或 SSR 输出规范链接。
• 避免通过客户端路由或查询字符串操作来修改规范 URL。

如何检查规范标签是否明确且稳定

• Chrome 开发者工具： 验证规范标签出现在静态 HTML 响应中，并且在渲染后的 DOM 中保持不变。
• Google Search Console：
  • 使用”网址检查” → “页面索引” → “规范”查看 Google 认为哪个网址是规范的。
  • 如果”用户声明的规范网址”与”Google 选择的规范网址”不同，请检查服务器输出。

总结： 通过在初始 HTML 中保持所有索引指令、结构化数据和规范信号的稳定，您可以帮助搜索引擎理解您网站的结构，而不会因 JavaScript 可能引入的延迟或混淆而受影响。
这些措施可以最大限度地减少渲染开销，节省抓取预算，并确保您的内容在 Google 索引中得到一致的呈现。

3. 优化内容发现与用户体验
即使页面渲染正确，您的内容仍必须能够被爬虫发现、抓取和读取。搜索引擎主要通过链接和可见的 HTML 进行导航，而非用户交互或脚本。以下实践旨在确保您的 JavaScript 不会隐藏或分割有价值的页面内容。

3.1 使用 SEO 友好的 URL
SEO 友好的 URL 是简洁、静态且具有描述性的（例如，使用 /products/blue-widget/，而非 /products#id=blue）。JavaScript 框架有时会使用哈希片段（如 /#about）或查询参数来动态加载路由。然而，搜索引擎通常会忽略片段标识符，并将此类 URL 视为同一页面，这意味着您的内部内容可能永远无法被索引。

如何通过 JavaScript 实现 SEO 友好的 URL

• 在框架（如 React Router）中使用基于历史记录的路由（BrowserRouter），而非基于哈希的路由（HashRouter）。
• 为所有页面生成静态、唯一的 URL（例如，使用 /services/seo/，而非 /services?type=seo）。
• 配置服务器以正确处理这些路由（通过 SSR 或回退到页面本身），并返回 200 状态码。
• 避免使用从不更新 URL 的纯客户端导航。

如何验证通过 JavaScript 实现的 URL 是否 SEO 友好

• Chrome 开发者工具：
  • 在网站中导航，观察地址栏。每个页面都应具有唯一的、可抓取的路径，且不以 # 结尾。
• Google Search Console：
  • 检查”覆盖率” → “已排除”报告中是否存在”重复项，未用户选择规范网址”。
  • 如果许多 URL 仅因片段或参数不同，请更新路由或规范标签设置。
  • 对内部页面使用”网址检查”，以验证 Google 是否将其视为有效、可索引的路径。

3.2 避免需要 JavaScript 的隐藏或标签页内容（对 SEO 不友好）
标签页界面、手风琴式菜单或动态隐藏的部分通常依赖 JS 来显示内容。虽然 Google 可以渲染这些内容，但隐藏文本的权重可能会被降低，并且其他搜索引擎可能完全无法渲染。如果重要的关键词或内容细节仅在交互后才加载，它们将面临不被索引的风险。

如何对需要 JavaScript 的隐藏或标签页内容进行 SEO 友好化处理

• 即使内容最初被 CSS 隐藏（例如 display:none），也应将其包含在初始 HTML 中，而不是通过 JS 注入。
• 如果 JS 动态插入内容，请使用 SSR 或预渲染在服务端提供这些内容。
• 将对 SEO 至关重要的关键词放在可见的、首屏区域的内容中。

如何验证需要 JavaScript 的隐藏或标签页内容是否对 SEO 友好

• Chrome 开发者工具：
  • 查看”页面源代码”并搜索标签页内的文本（例如，产品规格或 FAQ）。如果找不到，则说明内容仅由 JS 加载。
  • 禁用 JS 并重新加载页面；关键文本仍应出现在 HTML 中。
• Google Search Console：
  • 使用”网址检查” → “查看已抓取的页面” → “HTML”标签页，并搜索隐藏的文本。
  • 如果文本不存在，请确保数据是通过服务端渲染或预渲染提供的。

3.3 正确处理无限滚动和懒加载
无限滚动会在用户滚动时加载新内容，而爬虫可能永远无法触及这些内容。搜索引擎可以模拟有限的滚动操作，但仅依靠 JS 来显示新条目会导致产品或文章未被索引的风险。

如何通过 JavaScript 实现 SEO 友好的无限滚动和懒加载

• 为无限滚动搭配分页 URL（例如 /blog/page/2/）。
• 在 HTML 中包含正确的 <link rel="next"> 和 <link rel="prev"> 标签。
• 确保每批加载的内容也可以通过唯一的 URL 访问（例如 /blog/page/3/）。
• 对图片和 iframe 使用 loading="lazy" 属性实现懒加载。
• 对于其他元素的懒加载，可使用 Intersection Observer API，但需提供包含相同内容的 <noscript> 回退元素。

如何验证通过 JavaScript 实现的无限滚动和懒加载是否对 SEO 友好

• Chrome 开发者工具：
  • 使用”设备工具栏”模拟”不滚动”或有限的视口。如果后续内容消失，则很可能无法被索引。
  • 在”网络”面板中，确认新的内容请求发生在可被抓取的 URL 上。
• Google Search Console：
  • 使用”网址检查” → “测试实时网址”来检查内容的最后一”页”，确认其作为独立页面存在。
  • 如果只有第一批内容被索引，请实施分页替代方案，并在 XML 站点地图中相应更新这些分页 URL。

总结： JavaScript 可以增强用户体验，但绝不能妨碍内容的可发现性。通过使用静态、可抓取的 URL；避免仅依赖 JS 的交互；并确保隐藏或无限滚动的内容也能通过可索引的页面访问，您可以使搜索引擎能够像用户一样看到并跟踪您网站的结构。这些措施能加强抓取路径，提高关键词覆盖率，并保护您网站的有机搜索可见性。

4. 提升页面速度与渲染效率
快速加载、高效渲染的页面对用户和爬虫都至关重要。页面速度通过 Google 的核心 Web 指标直接影响排名，而过多的 JavaScript 或渲染阻塞资源则会延迟索引和影响可用性。

以下最佳实践可确保您的 JavaScript 提升而非阻碍性能。

4.1 移除渲染阻塞的 JavaScript
渲染阻塞 JavaScript 是指那些在加载和执行完成之前会阻止浏览器显示页面内容的脚本。由于 Googlebot 在无头 Chrome 环境中渲染页面，过多或同步的脚本会延迟页面变为可见和可索引的速度。这会降低核心 Web 指标的评分，并减少抓取效率。

如何移除渲染阻塞的 JavaScript

• 将 <script> 标签置于 <body> 末尾，或使用 defer/async 属性：
  <script src="/app.js" defer></script>
• 拆分大型脚本，并异步加载非关键代码。
• 仅内联初始渲染必需的小型关键 JS。
• 对于第三方脚本，使用异步加载或带有加载条件的标签管理器。

如何测试是否存在渲染阻塞的 JavaScript

• Chrome 开发者工具：
  • 打开”性能”面板 → 记录页面加载 → 查看”首次绘制”之前的”脚本评估”事件。
  • 在”网络”面板中，按”JS”过滤，并检查是否存在大型阻塞请求（在”DOMContentLoaded”之前有长时间空白）。
• Google Search Console：
  • 在”页面体验” → “核心 Web 指标”中，查看”减少未使用的 JavaScript”或”消除渲染阻塞资源”建议。
  • 使用”网址检查” → “测试实时网址” → “查看测试过的页面”，确认主要内容是否快速完整地显示。

4.2 策略性地应用代码分割和懒加载脚本
代码分割将 JavaScript 拆分成更小的、基于路由的代码块，使用户和爬虫仅下载当前页面所需的内容。懒加载则将非关键脚本或资源延迟到需要时再加载。两者结合可减少初始负载大小，改善可交互性，并加快渲染速度。

如何实施代码分割和策略性懒加载

• 在 React、Next.js 或 Vue 等框架中，使用动态导入：
  const ProductCard = React.lazy(() => import('./ProductCard'));
• 仅当图片、视频及首屏以下部分进入视口时，才使用 Intersection Observer API 加载它们。
• 拆分供应商捆绑包（例如，分析库、轮播图库），使每个页面仅导入其所需部分。
• 对于关键 CSS/JS，考虑内联小段代码，并延迟加载较大的模块。

如何验证代码分割和策略性懒加载

• Chrome 开发者工具：
  • 打开”网络” → “JS”，确认在导航或滚动时脚本是逐步加载的。
  • 使用”覆盖率”标签页测量”未使用的字节数”，未使用比率过高意味着代码分割有待改进。
• Google Search Console：
  • 在”核心 Web 指标”和”页面体验”报告中监控”可交互时间”的改善情况。
  • 更改后重新运行”网址检查” → “测试实时网址”；验证内容是否持续加载和渲染。

4.3 利用浏览器缓存和内容哈希
缓存将常用的 JavaScript 文件存储在用户浏览器中，以避免重复下载。然而，搜索引擎也会积极缓存 JS 资源。当 JS 更改但文件名保持不变时，爬虫可能会继续使用旧版本，从而导致更新延迟。在文件名中添加内容哈希可强制浏览器和爬虫获取最新版本。

如何实施浏览器缓存和内容哈希

• 配置您的构建工具（如 Webpack、Vite 等）以输出带哈希的文件名：
  main.2a846fa617c3361f.js
vendor.117e1c5c1e1838c3.js
• 更新您的 HTML 模板或清单文件以自动引用这些带哈希的文件。
• 在服务器或 CDN 中设置缓存标头：
  Cache-Control: max-age=31536000, immutable
• 部署新代码时，新的哈希值会触发重新获取。

如何验证浏览器缓存和内容哈希

• Chrome 开发者工具：
  • 打开”网络” → 右键点击 JS 文件 → “响应头”。确认存在较长的 max-age 值且文件名中包含唯一哈希。
  • 重新加载页面两次；文件应从缓存中加载（显示”（memory cache）”标签）。
• Google Search Console：
  • 重大更新后，使用”网址检查” → “测试实时网址”验证 Googlebot 是否获取了最新的 JS 资源。
  • 在”设置” → “抓取统计信息”中监控抓取状态，确保部署后更新的资源被重新请求。

总结： 提升速度和渲染效率需要在性能与交互性之间取得平衡。
通过延迟非必要脚本、智能分割代码、使用原生懒加载、有效利用缓存以及优化核心 Web 指标，您可以确保用户和搜索引擎都能获得快速、稳定且易于索引的网站体验。
一个优化良好的 JavaScript 环境不仅能获得更好的排名，还能让访客停留更长时间，从而巩固其他所有 SEO 工作的成效。