动态渲染对 SEO 的好处

Google 在抓取 JavaScript 方面做得越来越好，但仍然存在局限性。在 SMX Next 上，Nati Elimelich 解释了动态渲染如何克服这些限制，同时避免潜在的隐藏问题。

过去几年，JavaScript 框架越来越受欢迎，这在很大程度上要归功于它们提供的灵活性。Wix 的技术 SEO 主管 Nati Elimelech 表示：“JavaScript 框架可以实现快速开发。它提供了更好的用户体验。它提供了更好的性能，并且提供了传统框架（非 JavaScript 框架）所缺乏的增强功能。”

“因此，如今大型网站或具有复杂逻辑和功能的复杂 UI 通常倾向于使用 JavaScript 框架，这并不奇怪，”他补充道。

在SMX Next上，Elimelech 概述了 JavaScript 如何进行客户端、服务器端和动态渲染，并分享了从在超过 2 亿个网站上渲染 JavaScript 中获得的审计见解。

客户端与服务器端渲染

不同的渲染方法适用于不同的目的。Elimelech 主张动态渲染是满足搜索引擎机器人和用户的一种手段，但首先，有必要了解客户端和服务器端渲染的工作原理。

客户端渲染

当用户点击链接时，他们的浏览器会向托管该网站的服务器发送请求。

“当我们谈论 JavaScript 框架时，服务器的响应与我们习惯的有点不同，”Elimelech 说。

“它使用框架 HTML 进行响应 — — 只是基本的 HTML，但包含大量 JavaScript。基本上，它所做的就是告诉我的浏览器运行 JavaScript 本身以获取所有重要的 HTML，”他说，并补充说用户的浏览器随后会生成渲染的 HTML（用于以我们实际看到的方式构建页面的最终 HTML）。这个过程称为客户端渲染。

“这很像自己组装家具，因为基本上服务器会告诉浏览器，‘嘿，这些都是零件，这些都是说明，请构建页面。我相信你。’这意味着所有繁重的工作都转移到了浏览器而不是服务器上，” Elimelech说。

客户端渲染对用户来说可能很棒，但在某些情况下，客户端不会执行 JavaScript，这意味着它无法获取页面的全部内容。搜索引擎爬虫可能就是一个例子；尽管Googlebot 现在可以看到比以往更多的内容，但仍然存在局限性。

服务器端渲染

对于不执行 JavaScript 的客户端，可以使用服务器端渲染。

“服务器端渲染是指所有 JavaScript 都在服务器端执行。所有资源都需要在服务器端，您的浏览器和搜索引擎机器人无需执行 JavaScript 即可获得完全渲染的 HTML，”Elimelech 解释道。这意味着服务器端渲染可以更快，并且对浏览器的资源占用更少。

这张幻灯片对服务器端渲染进行了基本解释。 — 图片：Natie Elimelech。

“服务器端渲染就像是为客人提供一把真正的椅子，他们可以坐在上面，而不必自己组装，”他继续之前的比喻。“而且，当你进行服务器端渲染时，你基本上可以让各种机器人、各种客户端看到你的 HTML……无论 JavaScript 功能如何，它都可以看到最终呈现的重要 HTML，”他补充道。

动态渲染

动态渲染代表着“两全其美”，Elimelech 说道。根据 Google 的说法，动态渲染意味着“针对特定用户代理在客户端渲染和预渲染内容之间切换”。

下面是一个简化的图表，解释了动态渲染如何针对不同的用户代理（用户和机器人）工作。

“因此，有一个对 URL 的请求，但这次我们会检查：我们是否知道这个用户代理？这是一个已知的机器人吗？是 Google 吗？是 Bing 吗？是 Semrush 吗？这是我们所知道的东西吗？如果不是，我们会假设它是一个用户，然后进行客户端渲染，”Elimelech 说。

在这种情况下，用户的浏览器运行 JavaScript 来获取呈现的 HTML，但仍然可以受益于客户端呈现的优势，这通常包括感知到的速度提升。

另一方面，如果客户端是机器人，则使用服务器端渲染来提供完全渲染的 HTML。“因此，它可以看到需要看到的一切，”Elimelech 说。

这代表了“两全其美”，因为无论客户端的 JavaScript 功能如何，网站所有者仍然能够提供其内容。而且，由于存在两个流程，网站所有者可以优化每个流程以更好地为用户或机器人提供服务，而不会影响另一个流程。

但动态渲染并不完美

然而，动态渲染也存在一些复杂因素。“我们需要维护两个流程、两套逻辑、缓存和其他复杂系统；因此，当你拥有两个系统而不是一个系统时，情况会更加复杂，”Elimelech 说道，并指出网站所有者还必须维护一个用户代理列表，以便识别机器人。

有些人可能会担心，向搜索引擎机器人提供与向用户显示的内容不同的内容会被视为隐藏身份。

“动态渲染实际上是谷歌首选和推荐的解决方案，因为谷歌关心的是（两个版本之间）重要内容是否相同，”Elimelech 说道，并补充道，“‘重要内容’是我们作为 SEO 所关心的内容：内容、标题、元标记、内部链接、导航链接、机器人、标题、规范、结构化数据标记、内容、图像 – 所有与机器人如何对页面做出反应有关的内容……保持相同很重要，当你保持这些相同时，尤其是内容和元标记，谷歌就不会有任何问题。”

使用不同的 JavaScript 渲染方法时可能出现的站点奇偶校验问题 — 图片：Natie Elimelech。

由于有必要维持您为机器人提供的服务和您为用户提供的服务之间的平等，因此也有必要审核可能破坏这种平等的问题。

为了审核潜在问题，Elimelech 建议使用 Screaming Frog 或类似的工具来比较两次抓取的结果。“因此，我们喜欢以 Googlebot（或其他搜索引擎用户代理）的身份抓取网站，并以用户的身份抓取网站，并确保没有任何差异，”他说。比较两次抓取之间的相应元素可以帮助您识别潜在问题。

一张带有用于审核您网站的 javascript 版本的工具的幻灯片。 — 图片：Natie Elimelech。

以利米勒还提到了以下筛查问题的方法：

通过在浏览器中切换用户代理和/或关闭 JavaScript 进行目视检查，查看版本之间是否有任何变化。
可以使用Google Search Console查看返回给 Google 的 HTML 类型以及它如何呈现它。
测试工具，例如 Google 的移动友好度测试、丰富结果测试和 Schema.org 的架构标记验证器工具（以前称为结构化数据测试工具）。