via https://moz.com/blog/javascript-seo-guide
Web 正处于前端开发的黄金时代，JavaScript 和技术 SEO 正在经历复兴。 作为一家屡获殊荣的数字营销机构的技术 SEO 专家和网络开发爱好者，我想根据行业最佳实践和我自己的机构经验分享我对现代 JavaScript SEO 的看法。 在本文中，您将学习如何在 2021 年优化基于 JS 的网站进行搜索优化
什么是 JavaScript SEO？
JavaScript SEO 是技术 SEO 的学科，它专注于优化使用 JavaScript 构建的网站，以便搜索引擎可见。 它主要关注：
优化通过 JavaScript 注入的内容，以供搜索引擎抓取、呈现和索引。
针对基于 JavaScript 框架（例如 React、Angular 和 Vue）构建的网站和 SPA（单页应用程序）的排名问题进行预防、诊断和故障排除。
通过链接最佳实践确保网页可被搜索引擎发现。
改进页面解析和执行 JS 代码的页面加载时间，以简化用户体验 (UX)。
JavaScript 如何影响 SEO？
JavaScript 会影响以下对 SEO 很重要的页面元素和排名因素：
渲染内容
链接
延迟加载的图像
页面加载时间
元数据通过链接最佳实践确保网页可被搜索引擎发现。
改进页面解析和执行 JS 代码的页面加载时间，以简化用户体验 (UX)。
什么是JavaScript驱动的网站?
当我们谈论基于 JavaScript 构建的网站时，我们并不是指简单地向 HTML 文档添加一层 JS 交互性（例如，向静态网页添加 JS 动画时）。 在这种情况下，JavaScript 驱动的网站指的是何时通过 JavaScript 将核心或主要内容注入到 DOM 中。
如何检查网站是否是用 JavaScript 构建的
您可以使用BuiltWith 或Wappalyzer 等技术查找工具快速检查网站是否基于JavaScript 框架构建。 您还可以在浏览器中“检查元素”或“查看源代码”来检查 JS 代码。 您可能会发现的流行 JavaScript 框架包括：
谷歌的Angula框架
Facebook的React框架
Evan You 的 Vue
核心内容的 JavaScript SEO
举个例子：现代 Web 应用程序是基于 JavaScript 框架构建的，例如 Angular、React 和 Vue。 JavaScript 框架允许开发人员快速构建和扩展交互式 Web 应用程序。 我们来看看 Angular.js 的默认项目模板，Angular.js 是 Google 出品的流行框架。
在浏览器中查看时，这看起来像一个典型的网页。 我们可以看到文本、图像和链接。 但是，让我们更深入地了解一下代码的内幕：
现在我们可以看到这个 HTML 文档几乎完全没有任何内容。 页面正文中只有 app-root 和一些脚本标签。 这是因为这个单页应用程序的主要内容是通过 JavaScript 动态注入到 DOM 中的。 换句话说，这个应用程序依赖于 JS 来加载关键的页面内容！
潜在的 SEO 问题：任何呈现给用户但不呈现给搜索引擎机器人的核心内容都可能存在严重问题！ 如果搜索引擎无法完全抓取您的所有内容，那么您的网站可能会被竞争对手超过。 我们稍后会更详细地讨论这个问题。
内部链接的 JavaScript SEO
除了动态地将内容注入到 DOM 中，JavaScript 还会影响链接的可抓取性。 Google 通过抓取在页面上找到的链接来发现新页面。
作为最佳实践，Google 特别建议使用带有 href 属性的 HTML 锚标记链接页面，并为超链接包含描述性锚文本：
However, Google also recommends that developers not rely on other HTML elements — like div or span — or JS event 但是，Google 还建议开发人员不要依赖其他 HTML 元素（如 div 或 span）或链接的 JS 事件处理程序。 这些被称为“伪”链接，根据谷歌官方指南，它们通常不会被抓取
尽管有这些指南，一项独立的第三方研究表明 Googlebot 可能能够抓取 JavaScript 链接。 尽管如此，根据我的经验，我发现将链接保留为静态 HTML 元素是最佳做法。
潜在的 SEO 问题：如果搜索引擎无法抓取并跟踪指向关键页面的链接，那么您的页面可能会错过指向它们的有价值的内部链接。 内部链接可帮助搜索引擎更有效地抓取您的网站并突出显示最重要的页面。 最坏的情况是，如果您的内部链接实施不正确，那么 Google 可能很难发现您的新页面（在 XML 站点地图之外）。
用于延迟加载图像的 JavaScript SEO
JavaScript 还会影响延迟加载图像的可抓取性。 这是一个基本的例子。 此代码片段用于通过 JavaScript 在 DOM 中延迟加载图像：
Googlebot 支持延迟加载，但它不像人类用户在访问您的网页时那样“滚动”。 相反，Googlebot 只是在抓取网络内容时将其虚拟视口的大小调整为更长。 因此，“滚动”事件监听器永远不会被触发，内容也永远不会被爬虫发现。
这是一个更适合 SEO 的代码示例：
此代码显示 IntersectionObserver API 在任何观察到的元素变得可见时触发回调。 它比滚动事件侦听器更灵活、更强大，并且受现代 Googlebot 的支持。 此代码之所以有效，是因为 Googlebot 如何调整其视口的大小以“查看”您的内容（见下文）。
您还可以在浏览器中使用本机延迟加载。 Google Chrome 支持此功能，但请注意，它仍是一项实验性功能。 最坏的情况是，它会被 Googlebot 忽略，并且所有图像都会加载
：
Google Chrome 中的原生延迟加载。
潜在的 SEO 问题：与未加载核心内容类似，确保 Google 能够“看到”页面上的所有内容（包括图像）很重要。 例如，在具有多行产品列表的电子商务网站上，延迟加载图像可以为用户和机器人提供更快的用户体验！
关于页面速度的 Javascript SEO
Javascript 也会影响页面加载时间，这是 Google 移动优先索引中的官方排名因素。 这意味着缓慢的页面可能会损害搜索排名。 我们如何帮助开发人员改善这种情况？
缩小 JavaScript
将非关键 JS 推迟到主要内容在 DOM 中呈现之后
内联关键 JS
以较小的有效载荷提供 JS
潜在的 SEO 问题：缓慢的网站会给每个人，甚至是搜索引擎带来糟糕的用户体验。 谷歌本身推迟加载 JavaScript 以节省资源，因此确保提供给客户的任何内容都经过编码并有效交付以帮助保护排名非常重要。
元数据的 JavaScript SEO
此外，重要的是要注意，使用诸如 react-router 或 vue-router 之类的路由器包的 SPA 必须采取一些额外的步骤来处理诸如在路由器视图之间导航时更改元标记之类的事情。这通常由 Node.js 包处理，如 vue-meta 或 react-meta-tags。
什么是路由器视图？以下是在 React 中链接到单页应用程序中不同“页面”的五个步骤：
当用户访问 React 网站时，会向服务器发送 ./index.html 文件的 GET 请求。
然后服务器将 index.html 页面发送到客户端，其中包含启动 React 和 React Router 的脚本。
然后在客户端加载 Web 应用程序。
如果用户单击链接进入新页面 (/example)，则会向服务器发送对新 URL 的请求。
React Router 在请求到达服务器之前拦截请求并处理页面本身的更改。这是通过在本地更新呈现的 React 组件并更改客户端的 URL 来完成的。
换句话说，当用户或机器人点击 React 网站上的 URL 链接时，他们不会被提供多个静态 HTML 文件。相反，托管在根 ./index.html 文件上的 React 组件（如页眉、页脚和正文内容）只是被重新组织以显示不同的内容。这就是它们被称为单页应用程序的原因！
潜在的 SEO 问题：因此，重要的是使用 React Helmet 之类的包，以确保在浏览 SPA 时为用户提供每个页面或“视图”的唯一元数据。否则，搜索引擎可能会为每个页面抓取相同的元数据，或者更糟的是，根本没有！
从更大的角度来看，这一切如何影响搜索引擎优化？接下来，我们需要了解 Google 是如何处理 JavaScript 的。
Google 如何处理 JavaScript？
为了了解 JavaScript 如何影响 SEO，我们需要了解 GoogleBot 抓取网页时到底发生了什么：
爬行=> 渲染 =>收录
首先，Googlebot 会逐页抓取其队列中的网址。爬虫向服务器发出 GET 请求，通常使用移动用户代理，然后服务器发送 HTML 文档。 然后，Google 决定呈现页面的主要内容所需的资源。通常，这意味着只抓取静态 HTML，而不抓取任何链接的 CSS 或 JS 文件。为什么？ 据谷歌网站管理员称，谷歌机器人已经发现了大约 130 万亿个网页。大规模渲染 JavaScript 的成本可能很高。批量下载、解析和执行 JavaScript 所需的绝对计算能力是巨大的。 这就是 Google 可能会推迟渲染 JavaScript 的原因。当计算资源可用时，任何未执行的资源都会排队等待 Google Web Rendering Services (WRS) 处理。 最后，谷歌会在 JavaScript 执行后索引任何呈现的 HTML。
Google 抓取、呈现和索引过程。 换句话说，谷歌分两波抓取和索引内容
第一波索引，或即时抓取网络服务器发送的静态HTML
第二波索引，或延迟抓取通过 JavaScript 呈现的任何其他内容
Google wave indexing. Source: Google I/O’18
谷歌Wave索引。资料来源：Google I/O’18
最重要的是，依赖于 JS 来呈现的内容可能会遇到谷歌抓取和索引的延迟。这过去需要几天甚至几周的时间。例如，Googlebot 过去运行在过时的 Chrome 41 渲染引擎上。然而，他们近年来显著改进了其网络爬虫。
Googlebot 最近于 2019 年 5 月升级到最新稳定版本的 Chromium 无头浏览器。这意味着他们的网络爬虫现在是“常青树”，并且完全兼容 ECMAScript 6 (ES6) 及更高版本，或者最新版本的 JavaScript。
那么，如果 Googlebot 现在在技术上可以运行 JavaScript，我们为什么还要担心索引问题？ 简短的回答是抓取预算。由于计算资源有限，谷歌对其抓取给定网站的频率有速率限制。我们已经知道 Google 推迟 JavaScript 执行以节省抓取预算。
虽然抓取和渲染之间的延迟已经减少，但不能保证 Google 会实际执行在其 Web 渲染服务队列中排队等待的 JavaScript 代码。 以下是 Google 可能不会真正运行您的 JavaScript 代码的一些原因：
在 robots.txt 中被阻止 超时 错误 因此，当核心内容依赖于 JavaScript 但不是由 Google渲染呈现时，JavaScript 可能会导致 SEO 问题。
实际应用：电子商务的 JavaScript SEO
电子商务网站是通过 JavaScript 注入的动态内容的真实示例。例如，在线商店通常通过 JavaScript 将产品加载到类别页面上。
JavaScript 可以允许电子商务网站动态更新其类别页面上的产品。这是有道理的，因为他们的库存由于销售而处于不断变化的状态。但是，如果 Google 不执行您的 JS 文件，它真的能够“看到”您的内容吗？
对于依赖在线转化的电子商务网站来说，如果他们的产品没有被谷歌索引可能是灾难性的。
如何测试和调试 JavaScript SEO 问题
您现在可以采取以下步骤来主动诊断任何潜在的 JavaScript SEO 问题：
使用 Google 的网站管理员工具可视化页面。这有助于您从 Google 的角度查看页面。
使用站点搜索运算符检查 Google 的索引。通过手动检查 Google，确保您的所有 JavaScript 内容都已正确编入索引。
使用 Chrome 的内置开发工具进行调试。比较和对比谷歌“看到”的（源代码）与用户看到的（渲染代码），并确保它们总体上保持一致。 您还可以使用方便的第三方工具和插件。我们很快就会讨论这些。
谷歌网站管理员工具
确定 Google 在尝试呈现您的网页时是否遇到技术问题的最佳方法是使用 Google 网站管理员工具测试您的网页，例如：
Search Console 中的网址检查工具 移动友好测试
谷歌移动友好测试。 目标只是直观地比较和对比浏览器中可见的内容，并查找工具中显示内容的任何差异。
这两个 Google 网站管理员工具都使用与 Google 相同的常青 Chromium 渲染引擎。 这意味着它们可以为您提供 Googlebot 在抓取您的网站时实际“看到”的内容的准确视觉表示。
还有第三方技术 SEO 工具，例如 Merkle 的获取和渲染工具。 与谷歌的工具不同，这个网络应用程序实际上为用户提供了整个页面的全尺寸屏幕截图。
站点搜索命令提示符
或者，如果您不确定 Google 是否将 JavaScript 内容编入索引，您可以使用网站：Google 上的搜索运算符进行快速检查
复制并粘贴任何您不确定 Google 是否在 site: 运算符和您的域名之后编入索引的内容，然后按回车键。 如果您能在搜索结果中找到您的页面，那就不用担心！ Google 可以很好地抓取、呈现和索引您的内容。 如果没有，则意味着您的 JavaScript 内容可能需要一些帮助才能获得可见性。
这是 Google SERP 中的样子：
Chrome Dev Tools
可用于测试和调试 JavaScript SEO 问题的另一种方法是 Chrome 网络浏览器中可用的开发人员工具的内置功能。
右键单击网页上的任意位置以显示选项菜单，然后单击“查看源代码”以在新选项卡中查看静态 HTML 文档。
也可以右击后点击“Inspect Element”查看DOM中实际加载的内容，包括JavaScript。
比较和对比这两个角度，看看是否有任何核心内容只加载到 DOM 中，而不是在源代码中进行硬编码。 还有第三方 Chrome 扩展程序可以帮助做到这一点，例如 Chris Pederick 的 Web Developer 插件或 Jon Hogg 的 View Rendered Source 插件。
如何修复 JavaScript 渲染问题
在诊断出 JavaScript 渲染问题后，您如何解决 JavaScript SEO 问题？答案很简单：通用 Javascript，也称为“同构”JavaScript。
这是什么意思？这里的通用或同构是指能够在服务器或客户端上运行的 JavaScript 应用程序。 有几种不同的 JavaScript 实现比客户端渲染对搜索更友好，以避免将 JS 卸载给用户和爬虫：
服务器端渲染 (SSR)。这意味着每个请求都会在服务器上执行 JS。实现 SSR 的一种方法是使用 Node.js 库，如 Puppeteer。但是，这会给服务器带来很大压力。 混合渲染。这是服务器端和客户端呈现的组合。核心内容在发送到客户端之前在服务器端呈现。任何额外的资源都被卸载到客户端。
动态渲染。在此变通方法中，服务器检测发出请求的客户端的用户代理。例如，然后它可以将预渲染的 JavaScript 内容发送到搜索引擎。任何其他用户代理都需要在客户端呈现其内容。例如，Google 网站管理员推荐了一种流行的开源解决方案，称为 Renderton，用于实现动态渲染。
增量静态再生，或在站点部署后更新静态内容。这可以通过像 Next.js for React 或 Nuxt.js for Vue 这样的框架来完成。这些框架有一个构建过程，可以将 JS 应用程序的每个页面预渲染为静态资产，您可以从 S3 存储桶之类的东西中提供这些资产。通过这种方式，您的网站可以获得服务器端渲染的所有 SEO 优势，而无需服务器管理！
这些解决方案中的每一个都有助于确保，当搜索引擎机器人发出抓取 HTML 文档的请求时，它们会收到网页的完全呈现版本。 然而，其中一些在 Web 基础设施已经构建之后可能非常难以甚至不可能实施。 这就是为什么在设计下一个 Web 应用程序的架构时牢记 JavaScript SEO 最佳实践很重要的原因。
请注意，对于基于内容管理系统 (CMS) 构建的网站，该系统已经预渲染了大多数内容，例如 WordPress 或 Shopify，这通常不是问题。
关键要点 回顾
本指南提供了一些关于 JavaScript SEO 的一般最佳实践和见解。 然而，JavaScript SEO 是一个复杂而微妙的研究领域。 我们建议您通读 Google 的官方文档和故障排除指南，了解更多 JavaScript SEO 基础知识。 有兴趣了解有关优化 JavaScript 网站以进行搜索的更多信息吗？ 在下面发表评论。
网络已经从纯 HTML 转变为 SEO，您可以接受它。 向 JS 开发者学习并与他们分享 SEO 知识。 JS 不会消失。