JavaScript SEO：如何为搜索引擎优化 JS
了解 Google 如何处理 JavaScript，并如何为抓取、渲染与索引优化网站。
什么是 JavaScript SEO？
JavaScript SEO 是技术 SEO 的一部分，专注于让用 JavaScript 构建的网站更便于搜索引擎抓取、渲染和索引。
常见任务包括以下几项：
- 优化通过 JavaScript 注入的内容
- 正确实现懒加载
- 遵循内链最佳实践
- 预防、发现并修复 JavaScript 问题
和其他任务。
注意：如需复习 JavaScript 基础知识，请阅读我们的指南：什么是 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 来索引页面。
服务端渲染 vs. 客户端渲染 vs. 动态渲染
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 在客户端（即浏览器或 Googlebot）使用文档对象模型（DOM）渲染。
与在服务端渲染中直接从 HTML 文档接收内容不同，你得到的是一份只有基本骨架的 HTML 和一个 JavaScript 文件，后者由浏览器渲染出网站其余的部分。
多数使用 CSR 的网站都拥有复杂的用户界面或大量交互。
查看这份指南，了解如何设置客户端渲染。
动态渲染
动态渲染是服务端渲染的一种替代方案。
它会检测那些可能对 JS 生成内容有问题的机器人，并向它们提供一个不含 JavaScript 的服务端渲染版本。
同时，向用户展示客户端渲染的版本。
动态渲染是一种变通手段，并非 Google 推荐的方案。它会给 Google 带来额外、不必要的复杂度和资源开销。
如果你的网站规模很大、内容变化迅速且需要快速索引，可以把它纳入考虑。
或者，如果你的网站依赖需要访问页面内容的社交媒体和聊天应用。
又或者，对你网站很重要的爬虫无法支持你 JS 的某些特性。
但客观来说，动态渲染很少是长期的解决方案。有关设置动态渲染和一些替代方案，可以从Google 的指南中了解更多。
注意：Google 一般不会把动态渲染视为“伪装”（即向搜索引擎和用户呈现不同内容的行为）。尽管动态渲染出于其他原因并不理想，但它不太可能违反 Google 垃圾内容政策中列出的伪装规则。
如何让网站的 JavaScript 内容对 SEO 友好
可以遵循若干步骤，确保搜索引擎正确抓取、渲染和索引你的 JS 内容。
使用 Google Search Console 查找错误
Googlebot 基于 Chrome 的最新版本构建，但它的行为方式并不与浏览器完全相同。
这意味着，网站上线并不意味着 Google 一定能渲染它的内容。
Google Search Console（GSC）中的网址检查工具可以检查 Google 能否渲染你的页面。
在最顶部输入你想测试的页面 URL，然后按回车。
然后，点击最右侧的“测试实际网址”按钮。
一两分钟后，工具会显示一个“实际测试”标签页。此时点击“查看测试的页面”，就会看到该页面的代码和一张截图。
点击“更多信息”标签页，检查是否存在差异或缺失的内容。
Google 无法渲染 JS 页面的一个常见原因，是网站的 robots.txt 文件阻止了渲染。这往往是出于意外。
把以下代码添加到 robot.txt 文件中，以确保没有关键资源被阻止抓取：
注意：Google 不会把 .js 或 .css 文件编入搜索结果，它们用于渲染网页。
没有任何理由阻止这些关键资源。这么做可能导致内容无法被渲染，进而无法被索引。
确保 Google 正在索引 JavaScript 内容
确认页面渲染正常后，就要确保它们正在被索引。
可以在 GSC 中或直接在搜索引擎上检查这一点。
要在 Google 上检查，就使用“site:”指令。例如，把下面的 yourdomain.com 替换为你想测试的页面 URL：
如果页面已被索引，你就会看到它作为一条结果出现。就像这样：
如果没有，说明该页面不在 Google 的索引中。
如果页面已被索引，就检查某段由 JavaScript 生成的内容是否也被索引了。
同样，使用“site:”指令，并附上页面上一小段 JS 内容。
例如：
你是在检查这段具体的 JS 内容是否已被索引。如果已被索引，你就会在摘要片段中看到它。
就像这样：
也可以用 GSC 来查看 JavaScript 内容是否被索引。同样使用网址检查工具。
这一次，不是测试实际网址，而是点击“查看已抓取的页面”按钮，并检查该页面的 HTML 源代码。
在 HTML 代码中扫描 JavaScript 内容的片段。
如果看不到你的 JS 内容，可能有几个原因：
- 内容无法被渲染
- 由于 JS 是在发生点击时才生成指向该 URL 的内链，该 URL 无法被发现
- 在 Google 索引内容时页面超时
运行网站审计
定期对网站运行审计是一项技术 SEO 最佳实践。
Semrush 网站审计能像 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）。
更进一步
把学到的 JavaScript SEO 知识付诸实践，就能朝着打造高效、排名出色且深受用户喜爱的网站大步迈进。
准备好深入探索了吗？
我们建议阅读以下内容，以进一步了解 JS 和技术 SEO：
- JavaScript 命令速查表
- 如何用 JavaScript 重定向 URL
- 可抓取性、可索引性与 SEO