针对JavaScript的SEO优化指南

了解 JavaScript SEO 基础知识

是否怀疑 JavaScript 问题可能导致您的网页或网页上的部分内容无法显示在 Google 搜索结果中？请参阅我们的问题排查指南，了解如何解决 JavaScript 相关问题。

JavaScript 是网络平台的重要组成部分，因为它提供的很多功能可将网络转变成一个非常强大的应用平台。请设法让用户能够通过 Google 搜索轻松找到您的由 JavaScript 提供支持的网络应用，这样做有助于您在用户搜索您的网络应用所提供的内容时找到新用户并再度吸引现有用户。虽然 Google 搜索使用常青 Chromium 来运行 JavaScript，但您可从几个方面进行优化。

本指南将介绍 Google 搜索如何处理 JavaScript，以及与针对 Google 搜索改进 JavaScript 网络应用相关的最佳实践。

Google 如何处理 JavaScript

Google 对 JavaScript 网络应用的处理流程分为 3 大阶段：

抓取

呈现

编入索引

Googlebot 从抓取队列中获取网址，对其进行抓取，然后将其传递到处理阶段。在处理阶段，Googlebot 会提取重新回到抓取队列的链接，并将网页加入呈现队列。网页从呈现队列进入呈现器，呈现器将所呈现的 HTML 传递回处理阶段，从而将内容编入索引并提取链接以将其放入抓取队列中。

Googlebot 会将网页加入队列以进行抓取和呈现。当某个网页正在等待被抓取/被呈现时，这种状态很难直接判断出来。

当 Googlebot 尝试通过发出 HTTP 请求从抓取队列中抓取某个网址时，它首先会检查您是否允许抓取。Googlebot 会读取 robots.txt 文件。如果此文件将该网址标记为“disallowed”，Googlebot 就会跳过向该网址发出 HTTP 请求的操作，然后会跳过该网址。

接下来，Googlebot 会解析 HTML 链接的 href 属性中其他网址的响应，并将这些网址添加到抓取队列中。若不想让 Googlebot 发现链接，请使用 nofollow 机制。

您可以使用 JavaScript 将链接注入 DOM，前提是此类链接遵循适用于可供抓取的链接的最佳实践。

抓取网址并解析 HTML 响应非常适用于经典网站或服务器端呈现的网页（在这些网站或网页中，HTTP 响应中的 HTML 包含所有内容）。某些 JavaScript 网站可能会使用应用 Shell 模型（在该模型中，初始 HTML 不包含实际内容，并且 Google 需要执行 JavaScript，然后才能查看 JavaScript 生成的实际网页内容）。

Googlebot 会将所有网页都加入呈现队列，除非 robots meta 标记或标头告知 Google 不要将网页编入索引。网页在此队列中的存在时长可能会是几秒钟，但也可能会是更长时间。一旦 Google 的资源允许，无头 Chromium 便会呈现相应网页并执行 JavaScript。Googlebot 会再次解析所呈现的链接 HTML，并将找到的网址加入抓取队列。Google 还会使用所呈现的 HTML 将网页编入索引。

请注意，依然建议您采取服务器端呈现或预呈现，因为：(1) 它可让用户和抓取工具更快速地看到您的网站内容；(2) 并非所有漫游器都能运行 JavaScript。

用独特的标题和摘要描述网页

独特的描述性 元素和有用的元描述可帮助用户快速找到符合其目标的最佳结果。我们的指南中解释了怎样才算是良好的 元素和元描述。

您可以使用 JavaScript 设置或更改元描述及 元素。

Google 搜索可能会根据用户的查询显示不同的标题链接。当标题或描述与网页内容的相关度较低时，或者当我们在网页中找到了与搜索查询更相符的替代项时，就会发生这种情况。详细了解为什么搜索结果标题可能与网页的 元素不同。

编写兼容的代码

浏览器提供了很多 API，而 JavaScript 是一种快速演变的语言。Google 对所支持的 API 和 JavaScript 功能有一些限制。若要确保您的代码与 Google 兼容，请遵循我们的 JavaScript 问题排查指南。

如果您使用功能检测机制检测到您所需的某个浏览器 API 缺失了，我们建议您使用差异化呈现和 polyfill。由于无法对一些浏览器功能使用 polyfill，因此我们建议您查看 polyfill 文档以了解是否存在某些限制条件。

使用有意义的 HTTP 状态代码

Googlebot 会通过 HTTP 状态代码确定抓取网页时是否出现了问题。

如需告知 Googlebot 无法抓取某个网页或无法将某个网页编入索引，请使用有意义的状态代码（例如：404 表示找不到网页，401 代码表示必须登录才能访问网页）。您可以使用 HTTP 状态代码告知 Googlebot 某个网页是否已移至新网址，以便系统相应地更新索引。

下面列出了 HTTP 状态代码及其对 Google 搜索的影响。

避免单页应用中出现 soft 404 错误

在客户端呈现的单页应用中，路由通常实现为客户端路由。在这种情况下，使用有意义的 HTTP 状态代码可能是无法实现或不实际的。为避免在使用客户端呈现和路由时出现 soft 404 错误，请采用以下策略之一：

使用 JavaScript 重定向至服务器响应 404 HTTP 状态代码（例如 /not-found）的网址。

使用 JavaScript 向错误页面添加 。

以下是重定向方法的示例代码：

以下是 noindex 标记方法的示例代码：

使用 History API 而非片段

只有当链接是包含 href 属性的 HTML 元素时，Google 才能抓取您的链接。

对于实现客户端路由的单页应用，请使用 History API 在 Web 应用的不同视图之间实现路由。为确保 Googlebot 能够解析并抓取您的网址，请避免使用片段加载不同的网页内容。以下示例是一个不好的做法，因为 Googlebot 无法可靠地解析网址：

不过，您可以通过实现 History API，确保 Googlebot 可以访问您的网址：

正确注入 rel="canonical" 链接标记

您可以使用 JavaScript 注入 rel="canonical" 链接标记，但我们不建议这样做。在呈现网页时，Google 搜索会提取注入的规范网址。下例展示了如何使用 JavaScript 注入 rel="canonical" 链接标记：

使用 JavaScript 注入 rel="canonical" 链接标记时，请确保这是网页上唯一的 rel="canonical" 链接标记。不正确的实现方式可能会创建多个 rel="canonical" 链接标记或更改现有的 rel="canonical" 链接标记。存在冲突或有多个 rel="canonical" 链接标记可能会导致意外结果。

谨慎使用 robots meta 标记

您可以通过 robots meta 标记阻止 Google 将某个网页编入索引或跟踪链接。例如，在网页顶部添加以下 meta 标记可阻止 Google 将该网页编入索引：

您可以使用 JavaScript 将 robots meta 标记添加到网页中或更改其内容。以下示例代码展示了如何使用 JavaScript 更改 robots meta 标记以防止在 API 调用未返回内容时将当前网页编入索引。

Google 在运行 JavaScript 之前，如果在 robots meta 标记中遇到 noindex，便不会呈现相应网页，也不会将其编入索引。

如果 Google 遇到 noindex 标记，就会跳过呈现和 JavaScript 执行步骤。由于 Google 会在这种情况下跳过您的 JavaScript，因此您没有机会从网页上移除标记。

使用 JavaScript 更改或移除 robots meta 标记可能无法实现预期效果。如果 robots meta 标记最初包含 noindex，Google 会跳过呈现和 JavaScript 执行步骤。如果您确实希望将网页编入索引，请勿在原始网页代码中使用 noindex 标记。

使用长效缓存

使用结构化数据

在您的网页上使用结构化数据时，您可以使用 JavaScript 生成所需的 JSON-LD 并将其注入网页中。请务必测试您的实现效果，避免出现问题。

遵循网络组件最佳实践

Google 支持网络组件。当 Google 呈现某个网页时，它会扁平化 shadow DOM 和 light DOM 内容。这意味着 Google 只能看到在所呈现的 HTML 中可见的内容。若要确保 Google 在您的内容呈现后仍能看到该内容，请使用移动设备适合性测试或网址检查工具并查看所呈现的 HTML。

如果该内容在所呈现的 HTML 中不可见，Google 将无法将其编入索引。

以下示例会创建一个网络组件，以便在其 shadow DOM 内显示 light DOM 内容。确保 light DOM 和 shadow DOM 内容均能显示在所呈现的 HTML 中的一种方法是使用 Slot 元素。

呈现后，Google 可以将此内容编入索引：

修正图片和延迟加载的内容

图片在带宽和性能方面的开销可能会非常高昂。一种可取的策略是：使用延迟加载方法，仅在用户即将看到图片时才加载图片。若要确保以方便用户搜索的方式实现延迟加载，请遵循我们的延迟加载指南。

以可访问性为设计宗旨

针对用户（而不仅仅针对搜索引擎）创建网页。在设计网站时要考虑用户的需求，包括那些使用不支持 JavaScript 功能的浏览器的用户（例如使用屏幕阅读器或旧版移动设备的用户）。测试网站可访问性的其中一种最简单的方法是：在停用 JavaScript 后通过浏览器预览网站，或在纯文本浏览器（例如 Lynx）中查看网站。以纯文本形式查看网站还可帮助您找出 Google 难以看到的其他内容，例如图片中嵌入的文字。

解决与 Google 搜索相关的 JavaScript 问题

本指南介绍了如何识别和解决一些 JavaScript 问题，这些问题可能会导致您的网页（或 JavaScript 网页上的特定内容）无法显示在 Google 搜索结果中。虽然 Google 可以运行 JavaScript，但您在设计网页和应用时需要考虑一些差异和限制，以顺应抓取工具访问和呈现您的内容的方式。我们的 JavaScript SEO 基础知识指南详细介绍了如何针对 Google 搜索优化 JavaScript 网站。

Googlebot 经过精心设计，是一名优秀的网上公民。它的主要任务是抓取网站，同时确保其抓取操作不会导致网站的用户体验下降。Googlebot 及其网页呈现服务 (WRS) 组件会不断分析和识别对基本网页内容没有贡献的资源，并且可能不会抓取此类资源。例如，对基本网页内容没有贡献的报告和错误请求，以及在提取基本网页内容时不使用或没必要使用的其他类似类型的请求。客户端分析可能无法完整或准确地体现您网站上的 Googlebot 和 WRS 活动。使用 Search Console 可以监控您网站上的 Googlebot 和 WRS 活动及反馈。

如果您怀疑 JavaScript 问题可能会导致您的网页或 JavaScript 网页上的特定内容无法显示在 Google 搜索结果中，请按以下步骤操作。如果您不确定 JavaScript 是否是主要原因，请按照我们的一般调试指南确定具体问题。

1、如需测试 Google 抓取和呈现网址的效果，请使用 Search Console 中的移动设备适合性测试或网址检查工具。您可以查看已加载的资源、JavaScript 控制台输出和异常、呈现的 DOM 以及更多信息。

警告：请勿使用缓存链接调试网页。建议改用网址检查工具，因为该工具会检查网页的最新版本。

此外，我们还建议您收集和审核用户（包括 Googlebot）在您网站上遇到的 JavaScript 错误，确定可能会影响内容呈现效果的潜在问题。

以下示例演示了如何记录全局 onerror 处理程序中记录的 JavaScript 错误。请注意，某些类型的 JavaScript 错误（如解析错误）无法使用此方法进行记录。

2、请务必防范 soft 404 错误。在单页应用 (SPA) 中，这可能会非常困难。为防止将错误网页编入索引，您可以使用以下一种或两种策略：

重定向至服务器响应 404 状态代码的网址。

添加 robots meta 标记或将其更改为 noindex。

SPA 使用客户端 JavaScript 处理错误时，通常会报告 200 HTTP 状态代码，而不是相应的状态代码。这会导致错误网页被编入索引并可能会显示在搜索结果中。

3、Googlebot 可能会拒绝用户权限请求。

需要用户权限的功能不适用于 Googlebot 或所有用户。例如，如果您需要 Camera API，而 Googlebot 无法向您提供相机。在这种情况下，应为用户提供一种方式，使其无需授予相机访问权限便能访问您的内容。

4、请勿使用片段网址加载不同的内容。

SPA 可能会使用片段网址（例如 https://example.com/#/products）加载不同的视图。自 2015 年起，我们已弃用 AJAX 抓取方案，因此您不能提供片段网址让 Googlebot 抓取。我们建议您使用 History API 根据 SPA 中的网址加载不同的内容。

5、不要依赖数据持久性来提供内容。和常规浏览器一样，WRS 会加载每个网址（请参阅 Google 搜索的工作原理，简要了解 Google 如何发现内容），并遵从服务器和客户端重定向。不过，在网页加载过程中，WRS 不会保留状态：

在网页加载过程中，系统会清除本地存储空间和会话存储空间中的数据。

在网页加载过程中，系统会清除 HTTP Cookie。

6、使用内容指纹避免 Googlebot 缓存问题。

7、确保您的应用针对其所需的所有关键 API 使用功能检测，并在适用情况下提供后备行为或 Polyfill。

某些网页功能可能不会被所有用户代理采用，而一些用户代理可能会刻意停用特定功能。例如，如果您在浏览器中使用 WebGL 呈现照片效果，功能检测会显示 Googlebot 不支持 WebGL。若要修复此问题，您可以跳过照片效果呈现步骤或使用服务器端呈现来预呈现照片效果，这样一来，所有用户（包括 Googlebot）都可访问您的内容。

8、确保您的内容适用于 HTTP 连接。

Googlebot 会使用 HTTP 请求从您的服务器检索内容。它不支持其他类型的连接，例如 WebSockets 或 WebRTC 连接。为避免此类连接出现问题，请务必提供用于检索内容的 HTTP 回退机制，并使用强大的错误处理和功能检测机制。

9、确保网络组件能按预期呈现。使用移动设备适合性测试或网址检查工具检查呈现的 HTML 是否包含您期望的所有内容。

WRS 会扁平化 light DOM 和 shadow DOM。如果您使用的网络组件没有针对 light DOM 内容使用 机制，请参阅相应网络组件的文档以了解详情，或使用其他网络组件。如需了解详情，请参阅网络组件最佳做法。

10、修正此核对清单中的内容后，请再次使用 Search Console 中的移动设备适合性测试或网址检查工具测试您的网页。

如果问题已解决，系统会显示一个绿色对勾标记，并且不会显示任何错误。

修正延迟加载的内容

推迟加载非关键性内容或不可见内容（通常也称为“延迟加载”）是一种常见的用于提升性能和用户体验的最佳实践。要了解详情，请参阅“网站开发基础”网站上与延迟加载图片和视频相关的指南。但是，如果实现不当，此技术可能会在无意中使内容对 Google 不可见。本文档介绍了如何确保 Google 可以抓取延迟加载的内容并将其编入索引。

当内容在视口中可见时对其进行加载

若要确保 Google 能看到您网页上的所有内容，请确保每当相关内容在视口中可见时，您的延迟加载实现策略便会加载所有这些内容。下面几个示例说明了如何实现上述目的：

原生延迟加载图片和 iframe

IntersectionObserver API 和 polyfill

支持在数据进入视口时加载数据的 JavaScript 库

支持分页加载以实现无限滚动

如果要实现无限滚动体验，请务必支持分页加载。分页加载对用户很重要，因为它允许用户分享您的内容并与之再次互动。此外，通过分页加载，Google 可以显示指向内容中特定位置（而不是无限滚动页面顶部）的链接。

若要支持分页加载，请为每个部分提供唯一的链接，便于用户直接分享和加载。我们建议在动态加载内容时使用 History API 来更新网址。

测试

配置好实现策略后，请确保该策略能够正常运行。一种方法是使用 Puppeteer 脚本在本地测试实现效果。Puppeteer 是一个控制无头 Chrome 的 Node.js 库。要运行此脚本，您需要 Node.js。请使用以下命令检出并运行此脚本：

运行此脚本后，请手动查看其创建的屏幕截图，以确保截图中包含您希望能被 Google 看到且编入索引的所有内容。

您还可以使用 Search Console 中的网址检查工具查看系统是否已加载所有图片。请检查屏幕截图和所呈现的 HTML，确保系统加载了您的图片。

将动态呈现作为临时解决方法

动态呈现是一种临时解决方法，而非长期的解决方案，用于解决搜索引擎中 JavaScript 生成的内容的相关问题。我们建议您使用服务器端呈现、静态呈现或 hydration 作为解决方案。

在某些网站上，在浏览器中执行 JavaScript 时，JavaScript 会在网页上生成其他内容。这称为客户端呈现。虽然 Google 搜索执行 JavaScript，但 Google 搜索中的 JavaScript 功能存在限制，因此某些网页的内容可能无法在所呈现的 HTML 中显示。其他搜索引擎可能会选择忽略 JavaScript 而看不到 JavaScript 生成的内容。

对于 JavaScript 生成内容不可供搜索引擎访问的网站，动态呈现是一种临时解决方法。动态呈现服务器会检测 JavaScript 生成内容时可能存在问题的漫游器，并向这些漫游器提供未启用 JavaScript 的服务器呈现版本，同时向用户显示客户端呈现的内容版本。

动态呈现是一种临时解决方法，而非建议的解决方案，因为它会带来额外的复杂性和资源要求。

应使用动态渲染的网站

动态渲染是一种临时解决方法，适用于由 JavaScript 生成、可编入索引且快速变化的公开内容，或使用您关注的抓取工具不支持的 JavaScript 功能的内容。并非所有网站都需要使用动态渲染，并且有比动态渲染更好的解决方案，如这篇关于在网页上渲染的文章中所述。

了解动态呈现的运作方式

要采用动态呈现，您的网络服务器必须能够检测抓取工具（例如，通过检查用户代理）。来自抓取工具的请求将路由到呈现器，来自用户的请求将以正常方式进行处理。如果需要，动态呈现器会提供适合抓取工具的内容版本，例如，它可能会提供静态 HTML 版本。您可以选择为所有网页启用动态呈现器，也可以逐个网页启用动态呈现器。

一个显示动态呈现运作方式的示意图。在该示意图中，服务器直接向浏览器提供初始 HTML 和 JavaScript 内容。相反，在该示意图中，服务器向呈现器提供初始 HTML 和 JavaScript，然后呈现器将初始 HTML 和 JavaScript 转换为静态 HTML。转换完内容后，呈现器将静态 HTML 提供给抓取工具。

动态呈现不属于伪装真实内容

Googlebot 通常不会将动态呈现视为伪装真实内容。只要您的动态呈现显示的是类似内容，Googlebot 便不会将动态呈现视为隐藏真实内容。

设置动态呈现后，您的网站可能会显示错误页面。Googlebot 不会将这些错误页面视为隐藏真实内容，也不会将错误视为任何其他错误页面。

使用动态呈现为用户和抓取工具提供完全不同的内容会被视为隐藏真实内容。例如，某个网站向用户提供有关猫的页面，但向抓取工具提供有关狗的页面，则该网站会被视为隐藏真实内容。

实现动态呈现

要为您的内容设置动态呈现，请遵循我们的通用指南。您需要参考具体的配置详情，因为不同实现方式的配置详情会有很大差别。

1、安装并配置动态渲染器（例如 Puppeteer、Rendertron 或 prerender.io），以便将内容转换为更便于抓取工具使用的静态 HTML。

2、选择您希望接收您的静态 HTML 的用户代理，并参考具体的配置详情，了解如何更新或添加用户代理。以下是 Rendertron 中间件中常见用户代理的列表示例：

3、如果预呈现会拖慢服务器速度，或者预呈现请求非常多，请考虑为预呈现的内容实现缓存功能，或验证相应请求是否来自合法的抓取工具。

4、确定用户代理需要桌面版内容还是移动版内容。使用动态提供内容，以便根据情况提供桌面版本或移动版本。请参阅以下示例，了解配置如何确定用户代理需要桌面版内容还是移动版内容：

在此示例中，使用 if (!isPrerenderedUA) {...} 提供常规的客户端呈现内容。如果需要，请使用 else { servePreRendered(isMobileUA)} 提供移动版本。

5、将服务器配置为向您选择的抓取工具提供静态 HTML。您可以通过多种方法完成此项配置，具体取决于您的技术。以下是一些示例：

将来自抓取工具的请求重定向到动态呈现器。

在部署过程中进行预呈现，并使您的服务器向抓取工具提供静态 HTML 内容。

将动态呈现机制内置到自定义服务器代码中。

将来自预渲染服务的静态内容提供给抓取工具。

为服务器使用中间件（例如，rendertron 中间件）。

验证配置

实现动态呈现后，请对网址进行以下测试，验证一切是否如预期一样正常运作：

1、使用移动设备适合性测试测试移动版内容，确保 Google 可以看到您的内容。

成功：您的移动内容与您希望用户看到的内容一致。

重试：如果您看到的内容与预期不符，请参阅“问题排查”部分。

2、使用网址检查工具测试桌面版内容，确保在呈现的网页上也可以看到这些内容（呈现的网页是 Google 所看到的网页样貌）。

成功：桌面版内容与您希望用户看到的内容一致。

重试：如果您看到的内容与预期不符，请参阅“问题排查”部分。

3、如果您使用结构化数据，请使用富媒体搜索结果测试测试结构化数据能否正确渲染。

成功：结构化数据与您预期的显示效果一致。

重试：如果结构化数据与您预期的显示效果不一致，请参阅“问题排查”部分。

问题排查

如果移动设备适合性测试显示您的内容有错误，或者您的内容未显示在 Google 搜索结果中，请尝试解决最常见的问题。如果您仍遇到问题，请在 Google 搜索中心帮助社区中发新帖提问。

内容不完整或看起来不同

导致问题的原因：您的呈现器可能未正确配置，或者您的网页应用可能与您的呈现解决方案不兼容。有时，超时也可能会导致内容无法正确呈现。

解决问题：请参阅所用呈现解决方案的文档，调试您的动态呈现设置。

响应时间较长

导致问题的原因：使用无头浏览器按需呈现网页经常会导致响应用时较长，而这可能会导致抓取工具取消请求且不将您的内容编入索引。此外，响应时间较长还可能会导致抓取工具在抓取您的内容并将其编入索引时降低抓取速度。

解决问题

在构建流程中，为预呈现的 HTML 设置缓存，或为内容创建静态 HTML 版本。

确保在配置中启用缓存（例如，通过将抓取工具指向缓存）。

借助移动设备适合性测试或 webpagetest 等测试工具（使用 Google 抓取工具用户代理列表中的自定义用户代理字符串），检查抓取工具能否快速获取您的内容。您的请求不应超时。

网络组件无法按预期呈现

导致问题的原因：Shadow DOM 已与网页的其余部分隔离开来。呈现解决方案（如 Rendertron）无法看到被隔离的 shadow DOM 内的内容。如需了解详情，请参阅网络组件最佳做法。

解决问题

为自定义元素和 shadow DOM 加载 webcomponents.js polyfills。

使用移动设备适合性测试或网址检查工具检查相应内容是否显示在渲染现解决方案所渲染的 HTML 中。

缺少结构化数据

导致问题的原因：如果缺少结构化数据用户代理，或者输出中未包含 JSON-LD 脚本标记，可能会导致结构化数据错误。

解决问题

使用富媒体搜索结果测试进行测试，确保结构化数据出现在网页上。然后配置用户代理，以便使用桌面版或移动版 Googlebot 测试预渲染的内容。

确保 JSON-LD 脚本标记包含在内容的动态呈现 HTML 中。有关详情，请参阅所用呈现解决方案的文档。