动态渲染对 SEO 的好处

已发表: 2022-03-16

JavaScript 网页使搜索引擎优化变得非常复杂，这非常棘手。 SEO被认为是数字营销的基础部分。 但是如果你打开你的想象力，它会让你想起一个著名的马戏团表演，其中有一个杂耍演员在一根杆子上旋转几个盘子。 技术搜索引擎优化呢？ 让我们把它想象成走在钢丝上……和杂耍。

SEO的动态渲染

那么什么是 JavaScript SEO？ 如果这是一场马戏表演，那会是什么？ 也许，走钢丝，玩杂耍……和火球。 这将是一个准确的定义。 由于这些可以理解的关联，您可以看到这是一个棘手的平衡过程。 您的网站应该易于搜索引擎处理，同时比竞争对手运行得更好并且加载速度更快。

现在好消息是技术搜索引擎优化是您可以控制的排名因素之一。 毕竟，它使您的 JavaScript 网站易于 Google 阅读和理解，并为访问者提供良好的网络体验。 这是一个很大的好处，你不同意吗？ 此外，我们将详细介绍动态呈现对 SEO 的好处、它对您网站的 SEO 健康的重要性以及实现它的方法。 但首先，简单来说什么是动态渲染？

Google 访问您的网页。 下一步是什么？

如您所知，Google 的最佳帮手是一个自动化程序或机器人，它可以索引和编目万维网上的每个网页。 Google 会尝试为用户提供给定请求的最佳结果。 为此，它会仔细分析给定网页上的 SEO 动态内容，并评估其与同一主题的其他网页相比的相对重要性。

大多数现代 Web 开发使用三种主要的编程语言：HTML 和 JavaScript。 Google 通过抓取 HTML 并将其编入索引来处理 HTML。 首先，Googlebot 会查看页面上的 HTML。 然后，它关注文本、页面上的传出链接和关键字。 下一步是索引页面。 Google 和其他搜索引擎优先考虑以静态 HTML 呈现的内容。

渲染 JavaScript 渲染更复杂，因为它包含三个步骤：

  • 爬行
  • 使成为
  • 指数

Google 会多次处理 JavaScript 内容以完全理解其内容。 这就是网站渲染的本质。 当 Google 在网页上遇到 JavaScript 时，它会将其放入队列中。 然后，当 Google 有资源时，它会呈现它。

JavaScript SEO 的难点是什么？

HTML 充当 Web 开发的标准。 首先，搜索引擎可以有效地处理基于它的内容。 例如，Javascript 资源更密集，因此搜索引擎更难处理。 这表明搜索引擎的预算都花在了 JavaScript 网页上。 谷歌声称其搜索引擎可以处理 JavaScript。 然而，这仍然不是事实。

JavaScript 搜索引擎优化

抓取、索引和页面呈现需要更多的资源。 对于 Bing 和 DuckDuckGo 等其他搜索引擎，情况更糟。 这是因为他们根本无法处理 JavaScript。 因此，搜索引擎需要更多资源来呈现您的 JavaScript 页面。 不幸的是，这意味着您页面的许多元素根本不会被索引。

例如，谷歌和其他搜索引擎可能会错过您的元数据和规范标签，这对 SEO 至关重要。 事实上，Javascript 提供了出色的用户体验，允许您创建动态网站，让用户感到难以形容的兴奋。 然而，问题仍然存在。 您如何在不损害 SEO 的情况下创建现代网络体验？ 很多开发者选择服务端渲染方式。

客户端/服务器端渲染 VS。

许多 JavaScript 框架（如 Angular、Vue 和 React）都使用客户端渲染。 他们等待您的网页内容完全加载，然后在用户端的浏览器中执行。 简而言之，他们将内容呈现给用户，而不是在服务器上供搜索引擎查看。 因此，客户端渲染比其他替代方案更便宜。 随着价格的上涨，服务器和开发人员的负载也在下降。

但是，并非一切都顺利，因为用户体验可能会恶化。 例如，它会增加页面加载时间，从而导致高跳出率。 客户端渲染也会影响机器人。 Googlebot 使用两波索引系统。 第一步是抓取和索引静态 HTML，第二步是抓取 JavaScript 内容。 同样，机器人可能会在索引过程中错过您的 JavaScript 内容。

那么该怎么办呢？ 对于大多数开发团队来说，它是服务器端渲染：配置 JavaScript 以便内容在您站点的服务器上呈现，而不是在客户端浏览器中。 JavaScript 内容会提前呈现，使其对机器人可读。 SSR 还具有性能优势。 机器人和用户可以获得更快的体验，而不会出现索引不完整或内容丢失的风险。

服务器端渲染：是还是不是？

要回答这个问题，首先要思考：服务器端渲染对SEO来说容易吗？ 答案是不。 否则，JavaScript SEO 不会成为问题，每个网站都会这样做。 不幸的是，实施 SSR 需要一个称职的 Web 开发团队，而且实施过程本身会很昂贵、冗长且复杂。 另外，它不适用于第三方 JavaScript。

使用服务器端渲染的网站通常需要难以设置的外部 JavaScript 库或插件。 例如，Angular 需要 Angular 通用库来启用服务器端渲染。 因此，在 Angular 中启用 SSR 涉及很多活动部分。 这是一个很大的风险，因为一个不合适的部分可能会导致搜索结果失败。

另一方面，React 使用 Next.JS 库来提供服务器端渲染。 因此，开发人员将需要额外的服务器来产生额外的成本。 那么，如何使 React 等框架对 SEO 友好，以取悦您的客户和搜索引擎呢？ 再一次，动态渲染来拯救。

简而言之动态渲染

动态渲染是根据用户代理的请求来交付内容。 换句话说，它是一种通用的解决方案，可以两全其美。 它充当机器人的静态 HTML 和用户的动态 JavaScript。

结果，机器人获得了您网页的机器可读、精简、仅包含文本和链接的版本。 这使他们更容易抓取和分析页面。 反过来，用户获得了一个可用的、完全优化的网页，从而增加了他们与网站的交互时间。

实现动态渲染的方式

实现动态渲染包括三个步骤。

  1. 安装动态渲染器以将动态内容转换为静态 HTML。
  2. 选择应接收静态内容的用户代理（Googlebot、Bingbot、LinkedInbot 等）。 附带说明一下，实现缓存或增加存储内容的 HTTP 请求的数量将解决服务器工作缓慢的问题。 同样值得考虑的是您的客户是否需要桌面或移动设备的内容。 使用动态服务将帮助他们提供适当的解决方案。
  3. 配置服务器以提供静态 HTML。

检查您的配置

要验证动态渲染是否正常工作，您需要执行：

  • 移动友好测试：这是 Google Search Console 工具套件的一项功能。 2020 年 9 月，谷歌开始为所有网站建立移动优先索引。 换句话说，Google 会先考虑您网站的移动版本，然后再考虑桌面版本。 因此，您应该针对移动设备优化您的网站。
  • URL 检查工具：您需要确保您的网站被适当地编入索引。 URL 检查器工具将帮助您解决此问题。
  • Fetch as Google：需要确定动态渲染的有效性。 它使您可以确保正确发送各个 URL 以进行索引。
  • 结构化数据测试工具：在您的网站上使用模式标记会很方便。 它确保您的动态呈现不会破坏架构标记。

用例

动态渲染完美解决了所有 JavaScript SEO 问题。 这是一个显着的优势。 动态渲染快速解决抓取预算问题，同时具有成本效益。 好处是它不需要先进的技术知识。 那么什么时候应该使用这个有用的工具呢？

  • 具有大量内容且经常更改的大型网站将非常适合动态渲染。 这是因为大型网站经常被快速索引。 因此，所有页面都必须被索引并充分反映在 SERP 中。 动态渲染在这方面做得很好。
  • 动态渲染也将成为嵌入社交媒体墙或小部件的网站的救星。

动态渲染是否隐藏？

伪装是向搜索引擎机器人和人类提供明显不同的内容的做法。 这是一种黑帽 SEO 策略。 虽然隐身的短期好处很有吸引力，但潜在的风险仍然不值得。 如果动态呈现向搜索引擎和用户提供相同的最终内容，则它不是屏蔽。 但是，如果您为每个内容提供完全不同的内容，这就是一种伪装。

如何为搜索引擎优化 JavaScript 网站

许多过程与 SEO 专业人员习惯的过程相似，但有一些不同。

页面搜索引擎优化

内容的常用页面 SEO 规则：标题和元描述标签、alt 属性、元机器人标签和更多应用程序。 开发人员在使用 JavaScript 网站时遇到的几个问题是标题和描述标签可以重复使用，并且图像很少设置为 alt 属性。

允许爬行

不要阻止对资源的访问。 Google 需要访问和加载资源才能正确呈现页面。

网址

更新内容时更改 URL。 您应该知道 JavaScript 框架使用允许映射到纯 URL 的路由器。 不要使用八角鱼（# 符号）进行路由。 这主要是在 Vue 和一些早期版本的 Angular 中存在的问题。 在像 abc.com/#something 这样的 URL 中，服务器通常会完全忽略 # 符号后面的部分。

重复内容

在 JavaScript 的情况下，多个 URL 可能指向相同的内容，从而导致重复内容的问题。 这可能是由不同的寄存器、标识符、标识符中的参数引起的。 以下所有变体都可以存在。

  • domain.com/Abc
  • domain.com/abc
  • domain.com/123
  • domain.com/?id=123

解决方案很简单。 选择一个您想要索引的版本并设置规范标签。

搜索引擎优化插件

在 JavaScript 框架中，这些通常称为插件。 大多数流行的框架都有版本，例如 React、Vue 和 Angular。 您可以通过搜索“框架+模块名称”找到它们，例如“React Helmet”。 元标记、Helmet 和 Head 是具有类似功能的流行模块的示例，它们允许您安装 SEO 所需的许多流行标签。

错误页面

因为 JavaScript 框架不在服务器端运行，所以它们不会导致服务器端错误，例如 404。对于错误页面，您有几个不同的选项：

  • 使用 JavaScript 重定向到响应 404 状态代码的页面
  • 向无响应页面添加无索引标签和一些错误消息，例如“404 页面未找到”。

网站地图

JavaScript 框架通常具有用于映射到纯 URL 的路由器。 这些路由器中的大多数都有一个额外的模块，也可以创建站点地图。 您可以通过搜索“您的系统+路由器站点地图”找到它们，例如“Vue路由器站点地图”（Vue路由器与站点地图）。 此外，许多渲染解决方案可能还具有站点地图选项。 所以再一次，用谷歌搜索“系统+站点地图”，例如“盖茨比站点地图”，你肯定会找到一个已经存在的解决方案。

重定向

SEO 专业人员习惯于在服务器端进行 301/302 重定向。 另一方面，JavaScript 通常在客户端完成。 这不是问题，因为 Google 会处理重定向接收到的页面。 但是，重定向仍然会传递所有信号，例如 PageRank。 这些重定向通常可以通过“window.location.href”在代码中找到。

国际化

不同框架有几个选项可以支持国际化所需的一些功能，例如hreflang 。 这些通常被移植到其他系统，包括本地化和国际化或用于标题标签的所有相同模块，如 Helmet，可用于添加所需的标签。

延迟加载

有处理延迟加载的模块。 如果你还没有注意到，在使用 JavaScript 框架时，几乎所有你需要的模块都有。 Lazy 和 Suspence 是最流行的延迟加载模块。 延迟加载图像是明智之举，但不要延迟加载内容。 这可以通过 JavaScript 完成，但搜索引擎可能无法以这种方式正确构建内容。

结论

JavaScript SEO 是一种非常复杂的数字营销机制。 否则，JavaScript 是一个明智使用的工具，而不是 SEO 需要避免的东西。 但是，如果你付出努力，你总能找到解决方案。 在这里，它是动态渲染，它将减轻您的 Web 开发团队的负担并节省您的预算。 所以让谷歌最终与你合作而不是反对你。

进入顶级谷歌排名