JavaScript 网页使 SEO 这个本来就很棘手的领域变得更加复杂。

搜索引擎优化是数字营销领域中技术性较强的领域之一。这就像流行的马戏团表演，杂耍者在杆子上旋转三个盘子。技术SEO就像在走钢丝一样。[JavaScript SEO](/tags/JavaScript SEO/ "JavaScript SEO") 正在点燃钢丝、盘子和你自己。

这是一个棘手的平衡行为。您的网站不仅需要以一种易于搜索引擎处理的方式进行格式化，而且还需要比竞争对手表现得更好，加载速度更快。

然而，技术SEO的好处是它是你可以直接控制的排名因素之一。

你如何使你的JavaScript网站易于谷歌阅读和理解，同时给你的访问者一个良好的网络体验？

答案是：动态渲染。

我们将分解什么是动态渲染，为什么它很重要，为什么它对你网站的SEO健康有益，以及如何实施它。

当 Google 访问您的网页时会发生什么

Google 使用一种称为机器人的自动化程序来索引和编目互联网上的每个网页。

谷歌的声明目的是为用户提供给定查询的最佳结果。为了实现这一点，它试图了解给定网页上的内容，并评估其相对于同一主题的其他网页的相对重要性。

大多数现代 Web 开发都是使用三种主要编程语言完成的：HTML、CSS 和 JavaScript。

Google 通过两个步骤处理 HTML：抓取和索引。首先，Googlebot 会抓取网页上的 HTML。它读取页面上的文本和传出链接，并解析出帮助它确定网页内容的关键字。然后，Googlebot 会将该网页编入索引。

Google 和其他搜索引擎更喜欢以静态 HTML 呈现的内容。

使用 JavaScript，此过程更加复杂。渲染 JavaScript 分为三个阶段：

• 爬

• 呈现

• 指数

Google 必须多次处理 JavaScript，才能完全理解其中的内容。此过程称为渲染。当 Google 在网页上遇到 JavaScript 时，它会将其放入队列中，并在拥有渲染它的资源后返回。

JavaScript SEO的问题

HTML 是 Web 开发中的标准。搜索引擎可以轻松呈现基于 HTML 的内容。相比之下，搜索引擎处理 Javascript 的难度更大。这是资源密集型的。

这意味着基于 JavaScript 的网页会占用您的抓取预算。谷歌表示其网络爬虫可以处理 JavaScript。然而，这尚未得到证实。它需要 Google 提供更多资源来抓取、索引和呈现您的 JavaScript 网页。其他搜索引擎，如 Bing 和 DuckDuckGo 根本无法解析 JavaScript。

由于搜索引擎必须使用更多资源来呈现您的 JavaScript 页面，因此页面的许多元素可能根本不会被索引。例如，谷歌和其他搜索引擎可能会跳过你的元数据和规范标签，这对SEO至关重要。

问题是，Javascript 提供了良好的用户体验。这就是为什么你能够制作华而不实的网站，让你的用户去"哇，太酷了！

如何在不牺牲 SEO 的情况下打造现代网络体验？

大多数开发人员通过服务器端渲染来实现这一点。

客户端渲染和服务器端渲染有什么区别？

大多数 JavaScript 框架（如 Angular、Vue 和 React）默认使用客户端渲染。他们等待完全加载您的网页内容，直到他们可以在用户端的浏览器中执行此操作。换句话说，它们为人类呈现内容，而不是在服务器上让搜索引擎看到它。

客户端渲染比其他替代方案更便宜。它还可以减轻服务器的压力，而不会为开发人员增加更多工作。

但是，它有可能带来糟糕的用户体验。例如，它为您的网页增加了几秒钟的页面加载时间，这可能会导致高跳出率。

客户端渲染也会影响机器人。Googlebot 使用两波索引编制系统。它首先对静态 HTML 进行爬网和索引，然后在具有执行此操作的资源后对 JavaScript 内容进行爬网。这意味着在索引编制过程中可能会遗漏您的 JavaScript 内容。

这很糟糕。如果你想比你的竞争对手排名更高，并被你的客户找到，你需要谷歌看到这些内容。

那么还有什么选择呢？对于大多数开发团队来说，它是服务器端渲染：配置你的 JavaScript，以便内容呈现在你网站自己的服务器上，而不是在客户端浏览器上。

这会提前呈现您的 JavaScript 内容，使其对机器人可读。SSR 还具有性能优势。机器人和人类都能获得更快的体验，并且不存在部分索引或内容丢失的风险。

那么，为什么不大家只使用服务器端渲染呢？

如果服务器端渲染很容易，那么每个网站都会这样做，JavaScript SEO 就不会成为问题。但是，服务器端渲染并不容易。

SSR 成本高昂、耗时且难以执行。您需要一个称职的 Web 开发团队来将其落实到位。

它也往往不适用于第三方 JavaScript。使用服务器端渲染的网站通常需要难以配置的外部 JavaScript 库或插件。

Angular 就是这种情况，它需要 Angular 通用库来启用服务器端渲染。使用 Angular 启用 SSR 需要很多活动部件。如果只有一块不合适，它可能会使网络爬虫感到困惑，并导致搜索结果下降。

另一方面，React 利用 Next.JS 库来启用服务器端渲染。这意味着您的开发团队必须以额外的成本维护额外的服务器。

那么，如何使像 React SEO 这样的框架友好，以取悦您的客户和搜索引擎呢？解决方案是动态渲染。

什么是动态渲染？

动态呈现是基于请求内容的用户代理提供内容、为机器人提供静态 HTML 和为用户提供动态 JavaScript 的过程。它为机器人提供机器可读的、精简的、仅文本和链接的网页版本，同时为您的人类用户提供完全呈现、完全优化的预期 Web 体验。

从本质上讲，它是一种混合解决方案，可以提供两全其美的优势：为机器人提供易于扫描和解析的版本，并为网站访问者提供更具吸引力的用户体验。

如何实现动态渲染？

实现动态渲染的过程分为三个步骤。

首先，安装一个动态渲染器（比如说 Prerender），将动态内容转换为静态 HTML。

其次，选择您认为应该接收静态内容的用户代理。在大多数情况下，这包括 Googlebot 和 Bingbot 等搜索引擎抓取工具。您可能还希望包含其他内容，例如 LinkedInbot。

如果预呈现服务减慢了服务器速度或 HTTP 请求增加，请考虑实现缓存来存储内容。接下来，确定您的用户代理是需要桌面内容还是移动内容。您可以使用动态投放为他们提供适当的解决方案。

最后，配置服务器以提供静态 HTML。

验证您的配置

现在，您需要确保动态渲染正常工作。以下是一些需要检查的事项：

移动友好性测试：这是 Google Search Console 工具套件的一项功能。Google 于 2020 年 9 月将所有网站转为移动优先索引。换句话说，谷歌会先看你网站的移动版本，然后再看桌面版本。因此，您的网站必须针对移动优先体验进行优化。

网址检查工具：你需要确保你的网站被正确抓取和索引。URL 检查工具就是这样做的。

以 Google 身份抓取：这是您将用来确定动态渲染器的有效性的方法。它允许您确保正确提交单个 URL 以供索引。

结构化数据测试工具：如果您在网站上使用架构标记，则需要使用此工具。它可确保动态呈现器不会干扰架构标记。

什么时候应该使用动态渲染？

动态渲染是解决 [JavaScript SEO](/tags/JavaScript SEO/ "JavaScript SEO") 问题的理想方法。实际上，动态渲染的最大好处之一是它消除了与抓取预算相关的任何问题，同时具有成本效益。而且它不需要先进的技术知识来实施。

那么什么时候应该使用动态渲染呢？

如果您有一个包含大量内容且经常更改的大型网站（例如，具有循环库存的电子商务商店），动态渲染是一个很好的解决方案。如果是这种情况，那么您的网站需要快速而频繁地索引。动态渲染将确保你的所有页面都被索引并在SERP中正确显示。

对于依赖社交媒体共享的网站，例如具有可嵌入社交媒体墙或小部件的网站，这也是有益的。

动态渲染是伪装吗？

伪装是向搜索引擎机器人和人类提供明显不同内容的做法。这被认为是一种黑帽SEO策略。虽然隐身的短期好处可能很诱人，但潜在的风险是不值得的。

动态渲染不是伪装，只要它向爬虫和人类用户提供相同的最终内容即可。只有当您为每个内容提供完全不同的内容时，它才会伪装。

总结

JavaScript SEO 具有挑战性。但是，您可以采取一些措施来简化它，并减轻您的 Web 开发团队和预算的负担。