JavaScript 实现了高度交互和动态的网站。但它也提出了一个挑战：确保您的网站可抓取、可索引且速度快。
这就是为什么 JavaScript SEO 至关重要。
如果应用得当，这些策略可以显着提高自然搜索性能。
例如，图书零售商 Follet 在修复 JavaScript 问题后取得了显着的恢复：
这就是有效 JavaScript SEO 的影响。
在本指南中，您将：
- 了解 JavaScript SEO 简介
- 了解使用 JavaScript 进行搜索的挑战
- 了解优化 JavaScript 网站以进行自然搜索的最佳实践
什么是 JavaScript SEO？
JavaScript SEO 是优化 JavaScript 网站的过程。它确保搜索引擎可以抓取、呈现和索引它们。
将 JavaScript 网站与 SEO 最佳实践结合起来可以提高自然搜索排名。一切都不会损害用户体验。
然而，JavaScript 和 SEO 的影响仍然存在不确定性。
常见的 JavaScript 误解
| 误解 | 现实 |
|---|---|
| Google 可以完美处理所有 JavaScript。 | 由于 JavaScript 分两个阶段呈现，因此可能会发生延迟和错误。这些问题可能会阻止 Google 抓取、呈现和索引内容，从而损害排名。 |
| JavaScript 仅适用于大型网站。 | JavaScript 用途广泛，适合不同规模的网站。较小的网站可以在交互式表单、内容手风琴和导航下拉列表中使用 JavaScript |
| JavaScript SEO 是可选的。 | JavaScript SEO 是查找和索引内容的关键，尤其是在 JavaScript 较多的网站上。 |
JavaScript SEO 的好处
为 SEO 优化 JavaScript 可以带来以下几个优势：
- 提高可见性：对 JavaScript 内容进行爬网和索引可以提高搜索排名
- 增强的性能：代码分割等技术仅提供重要的 JavaScript 代码。这可以加快网站速度并减少加载时间。
- 更强的协作： JavaScript SEO 鼓励 SEO、开发人员和 Web 团队合作。这有助于改善SEO 项目计划的沟通和协调。
- 增强的用户体验： JavaScript 通过平滑的过渡和交互性增强了用户体验。它还可以加快网页之间的导航速度并使之更加动态。
旁注： JavaScript 会影响 PageSpeed 和 Core Web Vitals 分数。
搜索引擎如何呈现 JavaScript
为了了解 JavaScript 的 SEO 影响，让我们探讨一下搜索引擎如何处理 JavaScript 页面。
Google 概述了它分三个阶段处理 JavaScript 网站：
- 爬行
- 加工
- 索引
爬行
当 Google 找到某个 URL 时，它会检查robots.txt文件和元机器人标记。这是为了查看是否有任何内容被阻止爬行或呈现。
如果 Google 可以发现某个链接，则该 URL 会添加到队列中以同时进行抓取和呈现。
渲染
对于传统的 HTML 网站，内容可立即从服务器响应中获得。
在 JavaScript 网站中，Google 必须执行 JavaScript 来呈现和索引内容。由于资源需求，渲染会被推迟，直到Chromium提供可用资源。
索引
呈现后，Googlebot 会读取 HTML，向抓取列表添加新链接，并对内容编制索引。
JavaScript 如何影响 SEO
尽管 JavaScript 越来越受欢迎，但经常出现这样的问题：JavaScript 对 SEO 有害吗？
让我们来看看如果不优化 JavaScript 的搜索可能会严重影响 SEO 的方面。
渲染延迟
对于单页应用程序 (SPA)（例如 Gmail 或 Twitter，无需刷新页面即可更新内容），JavaScript 控制内容和用户体验。
如果 Googlebot 无法执行 JavaScript，它可能会显示空白页面。
当 Google 难以处理 JavaScript 时，就会发生这种情况。它会损害页面的可见性和有机性能。
要测试 Google 在无法执行 JavaScript 的情况下如何查看您的 SPA 网站，请使用网络爬虫Screaming Frog 。将渲染设置配置为“仅文本”并抓取您的网站。
注意：您需要 SEO Spider 许可证才能访问此设置。
专家提示：使用 Screaming Frog 的“禁用 JavaScript”功能。它模拟搜索引擎如何在不执行脚本的情况下抓取您的网站。这使您可以识别丢失的内容或渲染问题。
索引问题
JavaScript 框架（如 React 或 Angular，有助于构建交互式网站）可能会让 Google 更难阅读和索引内容。
例如，Follet 的在线书店将数百万页面迁移到 JavaScript 框架。
Google 在处理 JavaScript 时遇到了麻烦，导致有机性能急剧下降：
抓取预算挑战
网站有抓取预算。这是指 Googlebot 在给定时间范围内可以抓取并编制索引的页面数量。
大型 JavaScript 文件会消耗大量的爬网资源。它们还限制了谷歌探索网站上更深层次页面的能力。
核心网络生命问题
JavaScript 会影响网页主要内容的加载速度。这会影响最大内容绘制 (LCP) ，即核心网络生命力分数。
例如，查看此性能时间表：
第 4 节（“元素渲染延迟”）显示了 JavaScript 引起的元素渲染延迟。
这会对 LCP 分数产生负面影响。
JavaScript 渲染选项
渲染网页时，您可以从三个选项中进行选择：
服务器端渲染 (SSR)、客户端渲染 (CSR) 或动态渲染。
让我们来分析一下它们之间的主要区别。
服务器端渲染 (SSR)
SSR 在服务器上创建完整的 HTML。然后，它将此 HTML 直接发送到客户端，例如浏览器或 Googlebot。
这种方法意味着客户端不需要渲染内容。
因此，网站加载速度更快并提供更流畅的体验。
| SSR 的好处 | SSR的缺点 |
|---|---|
| 提高性能 | 更高的服务器负载 |
| 搜索引擎优化 | 更长的交互时间 |
| 增强的可访问性 | 实施复杂 |
| 一致的体验 | 有限的缓存 |
客户端渲染 (CSR)
在 CSR 中，客户端（例如用户、浏览器或 Googlebot）会收到一个空白 HTML 页面。然后，JavaScript 运行以生成完全呈现的 HTML。
Google 可以呈现客户端、JavaScript 驱动的页面。但是，它可能会延迟渲染和索引。
| 企业社会责任的好处 | 企业社会责任的缺点 |
|---|---|
| 减少服务器负载 | 初始加载时间较慢 |
| 增强互动性 | 搜索引擎优化挑战 |
| 提高可扩展性 | 复杂性增加 |
| 更快的页面转换 | 性能变化 |
动态渲染
动态渲染或预渲染是一种混合方法。
Prerender.io 等工具可检测 Googlebot 和其他抓取工具。然后，他们从缓存发送完全渲染的网页。
这样，搜索引擎就不需要运行 JavaScript。
与此同时，普通用户仍然可以获得企业社会责任体验。 JavaScript 被执行并在客户端呈现内容。
谷歌表示动态渲染并不是隐形。向 Googlebot 显示的内容只需与用户看到的内容相同即可。
但是，它警告说动态渲染只是一个临时解决方案。这是由于其复杂性和资源需求。
| 动态渲染的好处 | 动态渲染的缺点 |
|---|---|
| 更好的搜索引擎优化 | 复杂的设置 |
| 爬虫兼容性 | 隐身风险 |
| 优化的用户体验 | 工具依赖 |
| 可针对大型站点进行扩展 | 性能延迟 |
哪种渲染方法适合您？
正确的渲染方法取决于几个因素。
以下是帮助您确定适合您网站的最佳解决方案的关键注意事项：
| 渲染选项 | 最适合 | 何时选择 | 要求 |
|---|---|---|---|
| 服务器端渲染 (SSR) | SEO 关键网站（例如电子商务、博客）
依赖有机流量的网站 更快的核心 Web Vitals（例如 LCP） |
需要及时的索引和可见性
用户期望加载时快速、完全渲染的页面 |
强大的服务器基础设施可以处理更高的负载
SSR 框架方面的专业知识（例如 Next.js、Nuxt.js） |
| 客户端渲染 (CSR) | 高度动态的用户界面（例如仪表板、Web 应用程序）
内容不依赖于自然流量（例如登录后） |
SEO不是首要任务
专注于减少服务器负载并针对大量受众进行扩展 |
JavaScript 优化以解决性能问题
通过后备内容确保可抓取性 |
| 动态渲染 | 需要搜索引擎访问的大量 JavaScript 网站
大型动态内容网站 |
SSR 对整个站点来说是资源密集型的
需要平衡机器人爬行与以用户为中心的交互性 |
Prerender.io 等预渲染工具
Bot 检测和路由配置 定期审核以避免隐瞒风险 |
了解这些技术解决方案很重要。但最好的方法取决于您的网站如何使用 JavaScript。
您的网站适合哪里？
- 最少的 JavaScript：大多数内容都在 HTML 中（例如 WordPress 网站）。只需确保搜索引擎可以看到关键文本和链接即可。
- 中等 JavaScript：某些元素是动态加载的，例如实时聊天、基于 AJAX 的小部件或交互式产品过滤器。使用回退或动态渲染来保持内容可爬行。
- 大量 JavaScript：您的网站依赖 JavaScript 来加载大部分内容，例如使用 React 或 Vue 构建的 SPA。为了确保 Google 可以看到它，您可能需要 SSR 或预渲染。
- 完全由 JavaScript 渲染：从内容到导航的所有内容都依赖于 JavaScript（例如 Next.js、Gatsby）。您需要 SSR 或静态站点生成 (SSG)、优化的水合作用和适当的元数据处理来保持 SEO 友好。
您的网站依赖的 JavaScript 越多，优化 SEO 就越重要。
JavaScript SEO 最佳实践
那么，您的网站对用户来说看起来很棒，但是 Google 呢？
如果搜索引擎无法正确抓取或呈现您的 JavaScript，您的排名可能会受到影响。
好消息？你可以修复它。
以下是如何确保您的 JavaScript 支持的网站针对搜索进行了全面优化。
1. 确保可爬行性
避免阻止 robots.txt 文件中的 JavaScript 文件，以确保 Google 可以抓取它们。
过去，基于 HTML 的网站经常屏蔽 JavaScript 和 CSS。
现在，爬取 JavaScript 文件对于访问和渲染关键内容至关重要。
2. 选择最佳渲染方法
根据站点的需求选择正确的方法至关重要。
此决定可能取决于您的资源、用户目标和网站愿景。记住：
- 服务器端渲染：确保内容在页面加载时完全渲染并可索引。这提高了可见性和用户体验。
- 客户端渲染：在客户端渲染内容，为用户提供更好的交互性
- 动态渲染：向爬虫发送预渲染的 HTML 并为用户提供 CSR 体验
3.减少JavaScript资源
通过删除未使用或不必要的代码来减少 JavaScript 大小。即使未使用的代码也必须由 Google 访问和处理。
组合多个 JavaScript 文件以减少 Googlebot 执行所需的资源。这有助于提高效率。
专业提示：使用PageSpeed Insights查找 JavaScript 问题，例如渲染阻塞脚本。遵循其建议，例如推迟非关键脚本或缩小代码。
4.延迟脚本阻止内容
您可以推迟渲染阻塞 JavaScript 以加快页面加载速度。
使用“defer”属性来执行此操作，如下所示：
<脚本延迟src =“your-script.js”> </脚本>
这告诉浏览器和搜索引擎在主 CSS 和 JavaScript 加载后运行代码。
5. 管理 JavaScript 生成的内容
管理 JavaScript 内容是关键。它必须可供搜索引擎访问并提供流畅的用户体验。
以下是一些针对 SEO 进行优化的最佳实践：
提供后备内容
- 如果 JavaScript 失败或被禁用，请使用 <noscript> 标签显示重要信息
- 确保初始 HTML 中包含导航和标题等关键内容
例如，雅虎使用 <noscript> 标签。它显示大量 JavaScript 页面的静态产品详细信息。
优化基于 JavaScript 的分页
- 使用 HTML <a> 标签进行分页，以确保 Googlebot 可以抓取每个页面
- 使用“加载更多”按钮的 History API 动态更新 URL
- 添加 rel=”prev” 和 rel=”next” 表示分页页面关系
例如，Skechers 使用“加载更多”按钮来生成可访问的 URL：
测试和验证渲染
- 使用 Google Search Console (GSC) 的 URL 检查工具和 Screaming Frog 检查 JavaScript 内容。可以访问吗？
- 使用 Puppeteer 等浏览器自动化工具测试 JavaScript 执行，以确保正确渲染
确认动态内容正确加载
- 对延迟加载的元素使用 loading=”lazy” 并验证它们出现在渲染的 HTML 中
- 为动态加载的元素提供后备内容，以确保爬虫的可见性
例如，Backlinko 延迟加载 HTML 中的图像：
6. 创建开发人员友好的流程
与开发人员密切合作是集成 JavaScript 和 SEO 最佳实践的关键。
以下是简化流程的方法：
- 发现问题：使用 Screaming Frog 或 Chrome DevTools 等工具。他们可以发现 JavaScript 渲染问题。尽早记录这些。
- 编写可操作的票证：编写清晰的 SEO 开发票证，其中包含问题、其 SEO 影响以及解决问题的分步说明。例如，这是一个示例开发票证：
- 测试和验证修复：进行质量保证 (QA) 以确保正确实施修复。与您的团队分享更新和结果以保持一致。
- 实时协作：使用 Notion、Jira 或 Trello 等项目管理工具。这些有助于确保 SEO 和开发人员之间的顺畅沟通。
通过构建开发人员友好的流程，您可以更快地解决 JavaScript SEO 问题。这也创造了一个有助于整个团队的协作环境。
传达 JavaScript 使用的 SEO 最佳实践与其实施同样重要。
JavaScript SEO 资源 + 工具
当您学习如何使您的 javascript SEO 友好时，有几种工具可以在此过程中为您提供帮助。
教育资源
Google 提供或贡献了一些很棒的资源：
了解 JavaScript SEO 基础知识
Google 的JavaScript 基础知识文档解释了它如何处理 JavaScript 内容。
你将学到什么：
- Google 如何处理 JavaScript 内容，包括抓取、呈现和索引
- 确保基于 JavaScript 的网站针对搜索引擎进行全面优化的最佳实践
- 需要避免的常见陷阱以及提高 JavaScript 驱动网站 SEO 性能的策略
适用人群：优化 JavaScript 站点的开发人员和 SEO 专业人士。
在 Web 上呈现
web.dev 文章“ Web 上的渲染”是一个综合资源。它探讨了各种 Web 渲染技术，包括 SSR、CSR 和预渲染。
你将学到什么：
- Web 渲染技术的深入概述
- 每种渲染方法的性能影响。以及它们如何影响用户体验和搜索引擎优化。
- 根据您的目标选择正确的渲染策略的可行见解
适用对象：希望提高性能和知名度的营销人员、开发人员和 SEO。
诊断工具
尖叫青蛙和 Sitebulb
Screaming Frog或Sitebulb等爬虫程序可帮助识别影响 JavaScript 的问题。
如何？通过模拟搜索引擎如何处理您的网站。
主要特点：
- 抓取 JavaScript 网站：使用 robots.txt 配置检测被阻止或无法访问的 JavaScript 文件
- 渲染模拟：抓取并可视化 JavaScript 渲染的页面在搜索引擎中的显示方式
- 调试功能：识别渲染问题、内容丢失或资源损坏，从而妨碍正确索引
示例用例：
- 使用 Screaming Frog 的 robots.txt 设置来模拟 Googlebot。该工具可以确认关键 JavaScript 文件是否可访问。
何时使用：
- 调试与 JavaScript 相关的索引问题
- 测试预渲染或动态内容的渲染问题
Semrush 现场审核
Semrush 的Site Audit是诊断 JavaScript SEO 问题的强大工具。
主要特点：
- 可爬行性检查：识别阻碍渲染和索引的 JavaScript 文件
- 渲染洞察：检测影响搜索引擎处理内容能力的 JavaScript 相关错误
- 性能指标：突出显示核心 Web 生命体，如 LCP 和总阻塞时间 (TBT)
- 可操作的修复：提供优化 JavaScript 代码、提高速度和修复渲染问题的建议
站点审核还包括“JS 影响”报告，该报告重点关注发现与 JavaScript 相关的问题。
它突出显示了被阻止的文件、渲染错误和性能瓶颈。该报告提供了增强 SEO 的可行见解。
何时使用：
- 识别 JavaScript 引起的渲染阻塞问题
- 解决实施大型 JavaScript 实现后的性能问题
谷歌搜索控制台
Google Search Console 的检查工具可帮助分析您的 JavaScript 页面。它检查 Google 如何抓取、呈现和索引它们。
主要特点：
- 渲染验证：检查Googlebot是否成功执行并渲染JavaScript内容
- 可爬行性见解：识别阻塞的资源或影响索引的缺失元素
- 实时测试：使用实时测试确保 Google 可以看到实时更改
示例用例：
- 检查 JavaScript 渲染的页面以查看所有关键内容是否都在渲染的 HTML 中
何时使用：
- 验证 JavaScript 渲染和索引
- 排查 Google 搜索结果中的空白或不完整内容
专业提示：使用 GSC 的“覆盖范围报告”。它可以找到被 robots.txt 阻止或被大量 JavaScript 延迟的资源。定期查看此报告有助于保持最佳的爬网能力。
性能优化
您可能需要测试 JavaScript 网站的性能。这些工具详细地分解了性能：
网页测试
WebPageTest有助于分析网站性能，包括 JavaScript 如何影响加载时间和渲染。
下面的屏幕截图显示了 JavaScript 站点的高级性能指标。它包括用户何时可以看到网页。
主要特点：
- 提供瀑布图来可视化JavaScript和其他资源的加载顺序
- 测量首字节时间 (TTFB) 和 LCP 等关键性能指标
- 模拟慢速网络和移动设备以识别 JavaScript 瓶颈
使用案例：查找减慢页面加载速度并影响 Core Web Vitals 的脚本或元素。
GTMetrix
GTmetrix帮助衡量和优化网站性能，重点关注与 JavaScript 相关的延迟和效率。
主要特点：
- 通过 JavaScript 优化的可行见解来分解页面性能
- 提供具体建议以最小化和推迟非关键 JavaScript
- 通过视频播放和瀑布图可视化负载行为以查明渲染延迟
使用案例：优化 JavaScript 交付以提高页面速度和用户体验。这包括缩小、推迟或拆分代码。
Chrome 开发工具和 Lighthouse
Chrome DevTools和 Lighthouse 是免费的 Chrome 工具。他们评估网站性能和可访问性。两者都是 JavaScript SEO 的关键。
主要特点：
- JavaScript 执行分析：审核 JavaScript 执行时间。它还识别延迟渲染或影响 Core Web Vitals 的脚本。
- 脚本优化：标记代码分割、延迟加载和删除未使用的 JavaScript 的机会
- 网络和覆盖范围洞察：识别渲染阻塞资源、未使用的 JavaScript 和大文件大小
- 绩效审计： Lighthouse 衡量关键的核心网络生命力以查明需要改进的领域
- 渲染模拟：它模拟设备、限制网络速度并禁用 JavaScript。这缓解了渲染问题。
例如，下面的屏幕截图是使用 DevTools 的性能面板截取的。页面加载后，会记录各种数据以评估加载时间过长的罪魁祸首。
使用案例：
- 测试 JavaScript 密集型页面的性能瓶颈、渲染问题和 SEO 拦截器
- 识别和优化脚本，确保关键内容可抓取和可索引
专业工具
Prerender.io通过向机器人提供预渲染 HTML 来帮助大量使用 JavaScript 的网站。
这使得搜索引擎能够对内容进行抓取和索引，同时用户可以获得动态的企业社会责任体验。
主要特点：
- 预渲染内容：向 Googlebot 等搜索引擎抓取工具提供缓存的、完全渲染的 HTML 页面
- 易于集成：与 React、Vue 和 Angular 等框架兼容。它还与 NGINX 或 Apache 等服务器集成。
- 可扩展的解决方案：非常适合具有数千个页面的大型动态网站
- 机器人检测：识别搜索引擎机器人并提供优化的内容
- 性能优化：通过将渲染卸载到 Prerender.io 的服务来减少服务器负载
好处：
- 确保 JavaScript 内容的完全可抓取性和索引
- 通过消除空白或不完整的页面来提高搜索引擎排名
- 平衡 JavaScript 密集型网站的 SEO 性能和用户体验
何时使用：
- 对于单页应用程序或动态 JavaScript 框架
- 当资源有限时作为 SSR 的替代方案
立即寻找您的下一个 JavaScript SEO 机会
大多数 JavaScript SEO 问题都处于隐藏状态，直到您的排名下降。
您的网站面临风险吗？
不要等到交通损失才发现。
运行审核、修复渲染问题并确保搜索引擎看到您的内容。
想要更多实用的修复方法吗？
查看我们的PageSpeed和Core Web Vitals指南，了解加速 JavaScript 驱动的网站的可行步骤。