什么是 JavaScript SEO？
JavaScript SEO 是技术 SEO 的一部分，专注于使使用 JavaScript 构建的网站更容易被搜索引擎抓取、渲染和索引。
常见任务包括以下内容：
- 优化通过 JavaScript 注入的内容
- 正确实现延迟加载
- 遵循内部链接最佳实践
- 预防、查找和修复 JavaScript 问题
和别的。
注意：如果您需要刷新有关基本 JS 的知识，请阅读我们的指南：什么是 JavaScript 以及您用它做什么？
Google 如何抓取和索引 JavaScript？
Google 分三个阶段处理 JS：
- 爬行
- 渲染
- 索引
Google 的网络爬虫（称为 Googlebot）对页面进行排队以进行爬行和呈现。
它会抓取队列中的每个 URL。
Googlebot 发出请求。然后服务器发送 HTML 文档。
接下来，Googlebot 决定渲染页面内容所需的资源。
这意味着它会抓取 HTML。不是 JS 或 CSS 文件，因为渲染 JavaScript 需要大量资源。
想想 Googlebot 下载、读取和运行近20 亿个网站上的数万亿个页面的 JS 所需的所有计算能力。
因此，Google 推迟渲染 JavaScript。它将所有未执行的内容排队，以便稍后在资源可用时进行处理。
一旦资源允许，无头 Chromium（没有用户界面的 Chrome 浏览器）就会渲染页面并执行 JavaScript。
Googlebot 再次处理渲染的 HTML 链接。并将其找到的 URL 放入队列以供爬行。
在最后一步中，Google 使用呈现的 HTML 来索引页面。
服务器端渲染与客户端渲染与动态渲染
Google JavaScript 索引问题很大程度上取决于您的网站呈现此代码的方式：服务器端、客户端或动态呈现。
服务器端渲染
服务器端渲染 (SSR) 是指在服务器上渲染 JavaScript。然后将呈现的 HTML 页面提供给客户端（浏览器、Googlebot 等）。
例如，当您访问网站时，您的浏览器会向保存该网站内容的服务器发出请求。
处理请求后，您的浏览器将返回呈现的 HTML 并将其显示在屏幕上。
SSR 倾向于帮助页面提高 SEO 性能，因为：
- 它可以减少加载页面主要内容所需的时间
- 它可以减少损害用户体验的布局变化
但是，SSR 可能会增加页面允许用户输入所需的时间。
这就是为什么一些大量使用 JS 的网站选择在某些页面而不是其他页面使用 SSR。
在这样的混合模型下，SSR 通常保留用于对 SEO 目的重要的页面。客户端渲染（CSR）通常是为需要大量用户交互和输入的页面保留的。
但对于开发人员来说，实施 SSR 通常很复杂且具有挑战性。
尽管如此，还是有一些工具可以帮助实施 SSR：
- 用于 React 框架的 Gatsby 和 Next.JS
- Angular 框架的 Angular Universal
- 用于 Vue.js 框架的 Nuxt.js
阅读本指南以了解有关设置服务器端渲染的更多信息。
客户端渲染
CSR 与 SSR 相反。在这种情况下，JavaScript 使用文档对象模型 ( DOM )在客户端（在本例中为浏览器或 Googlebot）呈现。
您不会像服务器端渲染那样从 HTML 文档接收内容，而是获得带有 JavaScript 文件的基本 HTML，该 JavaScript 文件使用浏览器渲染网站的其余部分。
大多数使用企业社会责任的网站都有复杂的用户界面或许多交互。
查看本指南以了解有关如何设置客户端渲染的更多信息。
动态渲染
动态渲染是服务器端渲染的替代方案。
它检测可能对 JS 生成的内容有问题的机器人，并提供不带 JavaScript 的服务器渲染版本。
同时向用户展示客户端渲染的版本。
动态渲染是一种解决方法，而不是 Google 推荐的解决方案。它给谷歌带来了额外的、不必要的复杂性和资源。
如果您有一个大型网站，其内容快速变化并且需要快速索引，您可以考虑使用动态呈现。
或者，如果您的网站依赖于需要访问页面内容的社交媒体和聊天应用程序。
或者如果对你的网站重要的爬虫无法支持你的JS的某些功能。
但实际上，动态渲染很少是长期解决方案。您可以从Google 指南中了解有关设置动态渲染和一些替代方法的更多信息。
注意： Google 通常不认为动态渲染是“伪装”（向搜索引擎和用户呈现不同内容的行为）。虽然动态渲染由于其他原因并不理想，但它不太可能违反Google 垃圾邮件政策中概述的 隐藏规则。
如何使您网站的 JavaScript 内容对 SEO 友好
您可以按照几个步骤来确保搜索引擎正确抓取、渲染和索引您的 JS 内容。
使用 Google Search Console 查找错误
Googlebot 基于 Chrome 的最新版本。但它的行为方式与浏览器不同。
这意味着启动您的网站并不能保证 Google 可以呈现其内容。
Google Search Console (GSC)中的 URL 检查工具可以检查 Google 是否可以呈现您的页面。
在最顶部输入您要测试的页面的 URL。然后按回车键。
然后，单击最右侧的 “测试实时 URL ”按钮。
一两分钟后，该工具将显示“实时测试”选项卡。现在，单击“查看测试页面”，您将看到该页面的代码和屏幕截图。
单击“更多信息”选项卡检查是否有任何差异或缺失的内容。
Google 无法渲染 JS 页面的一个常见原因是您网站的robots.txt文件阻止了渲染。常常不小心。
将以下代码添加到 robots.txt 文件中，以确保不会阻止抓取重要资源：
User-Agent: GooglebotAllow: .jsAllow: .css注意： Google 不会在搜索结果中索引 .js 或 .css 文件。它们用于呈现网页。
没有理由阻止这些关键资源。这样做会阻止您的内容被渲染，进而阻止被索引。
确保 Google 正在为 JavaScript 内容编制索引
确认页面正确呈现后，请确保它们已被编入索引。
您可以在 GSC 或搜索引擎本身上检查这一点。
要检查 Google，请使用“site:”命令。例如，将下面的 yourdomain.com 替换为您要测试的页面的 URL：
site:yourdomain.com/page-URL/如果该页面已编入索引，您将看到它显示为结果。就像这样：
如果不这样做，则该页面不在 Google 索引中。
如果页面已编入索引，请检查 JavaScript 生成的内容的一部分是否已编入索引。
再次使用“site:”命令并在页面上包含一段 JS 内容。
例如：
site:yourdomain.com/page-URL/ "snippet of JS content"您正在检查 JS 内容的这个特定部分是否已被索引。如果是，您将在代码片段中看到它。
像这样：
您还可以使用 GSC 查看 JavaScript 内容是否已索引。再次使用 URL 检查工具。
这次，不是测试实时 URL，而是单击“查看爬网页面”按钮。并检查页面的 HTML 源代码。
扫描 HTML 代码以获取 JavaScript 内容片段。
如果您看不到 JS 内容，可能有以下几个原因：
- 内容无法渲染
- 无法发现 URL，因为点击时 JS 会生成指向它的内部链接
- Google 为内容编制索引时页面超时
进行现场审核
定期对您的网站进行审核是技术 SEO最佳实践。
Semrush 的Site Audit工具可以像 Google 一样抓取 JS。即使它是在客户端呈现的。
首先，输入您的域，然后单击“创建项目”。
然后，在爬虫设置中为 JS 渲染 选择“启用”。
抓取后，您将在“问题”选项卡下找到所有问题。
常见的 JavaScript SEO 问题以及如何避免它们
以下是一些最常见的问题，以及一些 JavaScript SEO 最佳实践：
- 阻止 robots.txt 文件中的 .js 文件可以阻止 Googlebot 抓取这些资源。这意味着它无法渲染和索引它们。允许对这些文件进行爬网以避免此问题。
- Google 不会等待很长时间 JavaScript 内容就会呈现。由于超时错误，您的内容可能不会被编入索引。
- 搜索引擎不会点击按钮。使用内部链接帮助 Googlebot 发现您网站的网页。
- 使用 JavaScript 延迟加载页面时，不要延迟加载应索引的内容。设置延迟加载时，主要关注图像而不是文本内容。
- Google 通常会忽略哈希值，因此请确保为您网站的网页生成静态 URL。确保您的 URL 如下所示：(yourdomain.com/web-page)。不像这样（yourdomain.com/#/web-page）或这样（yourdomain.com#web-page）。
