网络正处于前端开发的鼎盛时期，JavaScript和技术搜索引擎优化正在经历复兴。在本文中，您将了解如何在2021年优化JS驱动的网站。
什么是JavaScript SEO？
JavaScript SEO是技术SEO的范畴，专注优化使用JavaScript构建的网站，以提高搜索引擎准确率。它主要涉及：
- 优化通过JavaScript注入的内容，以便搜索引擎进行爬行、渲染和索引。
- 针对基于JavaScript框架（如React、Angular和Vue）构建的网站和SPA（单页应用程序）的排名问题进行预防、诊断和故障排除。
- 通过链接最佳实践，确保搜索引擎可以发现网页。
- 改善页面解析和执行JS代码的页面加载时间，以简化用户体验（UX）。
JavaScript对搜索引擎来说是好是坏？
这要看情况！JavaScript对现代网络至关重要，并使构建网站可扩展且易于维护。然而，JavaScript实现可能会损害搜索引擎的可见性。
JavaScript如何影响搜索引擎优化？
JavaScript可能会影响以下对搜索引擎优化很重要的页面元素和排名因素：
- 渲染内容
- 链接
- 延迟加载图像
- 页面加载时间
- 元数据
什么是JavaScript驱动的网站？
当我们谈论基于JavaScript构建的网站时，我们不是指简单地向HTML文档添加一层JS交互性（例如，在向静态网页添加JS动画时）。在这种情况下，JavaScript驱动的网站是指通过JavaScript将核心或主要内容注入DOM。
这个模板被称为应用程序外壳，是渐进式Web应用程序（PWA）的基础。接下来我们将探索这一点。
检查网站是否使用JavaScript构建
您可以使用BuiltWith或Wappalyzer等技术查找工具快速检查网站是否基于JavaScript框架构建。您还可以在浏览器中“检查元素”或“查看源”来检查JS代码。您可能会发现的流行的JavaScript框架包括：
核心内容的JavaScript SEO
这里有一个例子：现代Web应用程序正在JavaScript框架上构建，如Angular、React和Vue。JavaScript框架允许开发人员快速构建和扩展交互式Web应用程序。让我们看看谷歌制作的流行框架Angular.js的默认项目模板。
在浏览器中查看时，这看起来像一个典型的网页。我们可以看到文本、图像和链接。然而，让我们更深入地探索一下代码：
现在我们可以看到，这个HTML文档几乎完全没有任何内容。页面正文中只有应用根和一些脚本标签。这是因为这个单页应用程序的主要内容是通过JavaScript动态注入DOM的。换句话说，此应用程序依赖于JS加载页面上的密钥内容！
潜在的搜索引擎优化问题：任何呈现给用户但不呈现给搜索引擎机器人的核心内容都可能存在严重问题！如果搜索引擎无法完全抓取您的所有内容，那么您的网站可能会被忽略，取而代之的是竞争对手。我们稍后将更详细地讨论这个问题。
内部链接的JavaScript SEO
除了动态地向DOM注入内容外，JavaScript还可以影响链接的爬行性。谷歌通过在页面上抓取链接来发现新页面。
作为最佳做法，谷歌特别建议使用带有href属性的HTML锚标签链接页面，并为超链接包含描述性锚文本：
然而，谷歌还建议开发人员不要依赖其他HTML元素（如div或span）或JS事件处理程序来获取链接。根据谷歌的官方指南，这些被称为“伪”链接，它们通常不会被抓取：
尽管有这些准则，但一项独立的第三方研究表明，Googlebot或许能够抓取JavaScript链接。尽管如此，根据我的经验，我发现将链接保留为静态HTML元素是最好的做法。
潜在的搜索引擎优化问题：如果搜索引擎无法爬行并关注您关键页面的链接，那么您的页面可能会错过指向它们的有价值的内部链接。内部链接有助于搜索引擎更有效地抓取您的网站，并突出显示最重要的页面。最坏的情况是，如果您的内部链接实现不正确，那么谷歌可能根本难以发现您的新页面（在XML网站地图之外）。
延迟加载图像的JavaScript SEO
JavaScript还可以影响延迟加载的图像的可爬行性。这里有一个基本的例子。此代码片段用于通过JavaScript在DOM中延迟加载图像：
Googlebot支持延迟加载，但它不像用户访问您的网页时那样“滚动”。相反，Googlebot只需调整其虚拟视口的大小，使其在抓取网页内容时更长。因此，“滚动”事件侦听器永远不会触发，爬虫也永远不会呈现内内容。
以下是一个更方便搜索引擎优化的代码示例：
此代码显示，当任何观察到的元素可见时，IntersectionObserver API会触发回调。它比滚动事件侦听器更灵活、更稳固，并得到现代谷歌机器人的支持。此代码之所以有效，是因为Googlebot如何调整其视口的大小以“查看”您的内容（见下文）。
您还可以在浏览器中使用本机延迟加载。但会被谷歌机器人忽略，所有图像都会被加载：
潜在的搜索引擎优化问题：与未加载的核心内容类似，请务必确保谷歌能够“查看”页面上的所有内容，包括图像。例如，在拥有多行产品列表的电子商务网站上，延迟加载图像可以为用户和机器人提供更快的用户体验！
页面速度的Javascript SEO
Javascript还可能影响页面加载时间，这是谷歌移动优先指数中的官方排名因素。这意味着慢速页面可能会损害搜索排名。我们如何帮助开发人员缓解这种情况？
- 最小化JavaScript
- 将非关键JS推迟到在DOM中呈现主要内容之后
- 内联关键JS
- 以更小的有效负载服务JS
潜在的搜索引擎优化问题：网站速度缓慢，会给每个人造成糟糕的用户体验，甚至搜索引擎也是如此。谷歌本身推迟加载JavaScript以节省资源，因此必须确保提供给客户端的任何服务都经过编码并高效交付，以帮助保护排名。
元数据的JavaScript SEO
此外，请务必注意，使用react-router或vue-router等路由器包的SPA必须采取一些额外步骤来处理在路由器视图之间导航时更改元标签等事情。这通常使用Node.js软件包处理，如vue-meta或react-meta-tags。
什么是路由器视图？以下是链接到单个页面应用程序中的不同“页面”如何在React中分五个步骤操作：
- 当用户访问React网站时，将向服务器发送./index.html文件的GET请求。
- 然后，服务器将index.html页面发送到客户端，其中包含启动React和React路由器的脚本。
- 然后将Web应用程序加载到客户端。
- 如果用户单击链接进入新页面（/示例），则会向服务器发送新URL的请求。
- React路由器在请求到达服务器之前拦截它，并处理页面本身的更改。这是通过本地更新渲染的React组件和更改URL客户端来实现的。
换句话说，当用户或机器人关注React网站上URL的链接时，他们不会收到多个静态HTML文件。相反，根./index.html文件中托管的React组件（如页眉、页脚和正文内容）只是正在重新组织以显示不同的内容。这就是为什么它们被称为单页应用程序！
潜在的搜索引擎优化问题：因此，请务必使用React Helmet等软件包，以确保在浏览SPA时为每个页面或“视图”为用户提供唯一的元数据。否则，搜索引擎可能会为每个页面抓取相同的元数据，或者更糟的是，根本没有！
从大局来看，这一切对搜索引擎优化有什么影响？接下来，我们需要了解谷歌如何处理JavaScript。
适用于电子商务的JavaScript SEO
电子商务网站是通过JavaScript注入的动态内容的真实示例。例如，在线商店通常通过JavaScript将产品加载到类别页面。
JavaScript可以允许电子商务网站动态更新其类别页面上的产品。这是有道理的，因为他们的库存因销售而处于不断变化的状态。然而，如果谷歌不执行您的JS文件，它实际上能够“查看”您的内容吗？
对于依赖在线转换的电子商务网站来说，不将其产品由谷歌索引可能是灾难性的。
谷歌如何处理JavaScript？
为了了解JavaScript如何影响SEO，我们需要了解GoogleBot抓取网页时会发生什么：
- 爬行
- 渲染
- 索引
首先，Googlebot逐页地抓取队列中的URL。爬虫通常使用移动用户代理向服务器发出GET请求，然后服务器发送HTML文档。
然后，谷歌决定渲染页面主要内容需要哪些资源。通常，这意味着只抓取静态HTML，而不是任何链接的CSS或JS文件。为什么？
据谷歌网站管理员称，谷歌机器人发现了大约130万亿个网页。大规模渲染JavaScript可能很昂贵。批量下载、解析和执行JavaScript所需的纯粹计算能力是巨大的。
这就是为什么谷歌可能会将渲染JavaScript推迟到以后。随着计算资源的可用，任何未执行的资源都会排队等待谷歌网络渲染服务（WRS）处理。
[caption id="attachment_930" align="aligncenter" width="955"]
谷歌爬行、渲染和索引过程[/caption]
最后，谷歌将在JavaScript执行后对任何渲染的HTML进行索引。
换句话说，谷歌分两波地抓取和索引内容：
- 第一波索引，或Web服务器发送的静态HTML的即时爬行
- 第二波索引，或通过JavaScript渲染的任何其他内容的延迟爬行
底线是谷歌在爬行和索引时可能会延迟渲染依赖JS的内容。过去这需要几天甚至几周的时间。近年来，他们显著改善了网络爬虫。Googlebot目前与ECMAScript 6（ES6）及更高版本或最新版本的JavaScript完全兼容。
那么，如果谷歌机器人现在可以在技术上运行JavaScript，为什么我们仍然担心索引问题？
简而言之就是爬行配额。即由于计算资源有限，谷歌对他们爬行给定网站的频率有限制。我们已经知道谷歌推迟执行JavaScript，以节省爬行预算。
虽然爬行和渲染之间的延迟已经减少，但不能保证谷歌会实际执行在其Web渲染服务队列中排队等待的JavaScript代码。
以下是谷歌可能实际上从未运行过您的JavaScript代码的一些原因：
- 被阻止在robots.txt中
- 超时
- 错误
因此，当核心内容依赖于JavaScript但不由谷歌渲染时，JavaScript可能会导致SEO问题。
如何测试和调试JavaScript SEO问题
以下是您今天可以采取的主动诊断任何潜在的JavaScript SEO问题的步骤：
- 使用谷歌的网站管理员工具可视化页面。这有助于您从谷歌的角度查看页面。
- 使用网站搜索运营商检查谷歌的索引。通过手动检查谷歌，确保您的所有JavaScript内容都已正确索引。
- 使用Chrome的内置开发工具进行调试。比较和对比谷歌“看到”（源代码）和用户看到的内容（渲染代码），并确保它们总体上保持一致。
您还可以使用方便的第三方工具和插件。我们很快就会讨论这些。
谷歌网站管理员工具
确定谷歌在尝试渲染页面时是否遇到技术困难的最佳方法是使用谷歌网站管理员工具测试您的页面，例如：
- 搜索控制台中的URL检查工具
- 为移动设备设计的测试
目标只是直观地比较和对比浏览器中可见的内容，并查找工具中显示的内容中的任何差异。
这两个谷歌网站管理员工具使用与谷歌相同的常青Chromium渲染引擎。这意味着当谷歌机器人抓取你的网站时，他们可以给你一个准确的视觉呈现。
通过Google搜索操作符
或者，如果您不确定谷歌是否正在索引JavaScript内容，您可以使用谷歌上的搜索操作符进行快速检查。如果您可以在搜索结果中找到您的页面，那么别担心！谷歌可以很好地抓取、渲染和索引您的内容。如果没有，这意味着您的JavaScript内容可能需要一些帮助才能获得可见性。
以下是谷歌SERP中的样子：
Chrome开发工具
可用于测试和调试JavaScript SEO问题的另一种方法是Chrome网页浏览器中可用的开发人员工具的内置功能。
右键单击网页上的任意位置以显示选项菜单，然后单击“查看源代码”以在新选项卡中查看静态HTML文档。
您还可以在右键单击后单击“检查元素”，以查看DOM中实际加载的内容，包括JavaScript。
比较和对比这两个观点，看看是否有任何核心内容仅在DOM中加载，而不是在源中硬编码。
如何修复JavaScript渲染问题
诊断JavaScript渲染问题后，如何解决JavaScript SEO问题？答案很简单：通用Javascript，也称为“同构”JavaScript。
这意味着什么？此处的通用或同构是指能够在服务器或客户端上运行的JavaScript应用程序。
JavaScript的实现比客户端渲染更易于搜索，以避免将JS卸载给用户和爬虫：
- 服务器端渲染（SSR）。这意味着JS在服务器上为每个请求执行。实现SSR的一种方法是使用像Puppeteer这样的Node.js库。然而，这可能会给服务器带来很多压力。
- 混合渲染。这是服务器端和客户端渲染的组合。核心内容在发送到客户端之前呈现在服务器端。任何其他资源都会卸载到客户端。
- 动态渲染。在这个临时应对办法中，服务器检测提出请求的客户端的用户代理。例如，它可以将预渲染的JavaScript内容发送到搜索引擎。任何其他用户代理都需要在客户端呈现其内容。例如，谷歌网站管理员推荐一种流行的名为Renderton的开源解决方案来实现动态渲染。
- 增量静态再生，或在站点部署后更新静态内容。这可以通过React的Next.js或Vue的Nuxt.js等框架来实现。这些框架有一个构建过程，该流程将预渲染JS应用程序的每个页面到静态资产，您可以从S3库位等内容中提供服务。这样，您的网站就可以在没有服务器管理的情况下获得服务器端渲染的所有搜索引擎优化优势！
每个解决方案都有助于确保当搜索引擎机器人请求抓取HTML文档时，它们会收到网页的完整渲染版本。然而，在Web基础设施已经建成后，其中一些可能极其困难甚至不可能实现。这就是为什么在设计下一个Web应用程序的架构时，牢记JavaScript SEO的最佳做法很重要。
请注意，对于基于内容管理系统（CMS）构建的网站，这些网站已经预渲染了大多数内容，如WordPress或Shopify，这通常不是问题。
总结
本指南提供了一些关于JavaScript SEO的通用最佳实践做法和见解。然而，JavaScript SEO是一个复杂而细致的研究领域。我们建议您通读谷歌的官方文档和故障排除指南，以获取更多JavaScript SEO基础知识。