服务器端渲染营销指南

已发表: 2021-07-26

编程语言不是一个容易掌握的概念，尤其是当您的 SEO 工作主要集中在非技术方面时。 但这里是关于技术 SEO 的事情：对它的了解可以帮助您了解您的网站需要做出哪些更改才能获得更好的搜索引擎排名。
随着谷歌在 6 月推出 Core Web Vitals，这是其页面体验更新的一部分，每个尚未仔细研究技术 SEO 的营销人员现在都希望这样做。
当您的网站基于 JavaScript 框架构建时，需要深入研究的部分是服务器端渲染。

什么是服务器端渲染？

服务器端渲染是指检索网页、获取代码、在屏幕上显示内容的过程——这一切都发生在服务器上。
在 SSR 中：

  • 服务器向浏览器发送准备好渲染的响应；
  • 浏览器呈现页面，使其准备好被查看，然后浏览器下载 JavaScript；
  • 然后浏览器在页面准备好被查看时执行 React，并且
  • 然后网页就可以进行交互了。

这一切发生的方式使它成为其他类型渲染的更好选择：客户端渲染（JavaScript 由浏览器渲染，也就是客户端）和动态渲染（用户获得客户端-服务器渲染的内容和搜索引擎）获取服务器端呈现的内容）。 甚至 Google 也鼓励 Web 开发人员选择服务器端渲染。
为什么？

[案例研究] 管理 Google 的机器人抓取

1001Pneus 拥有超过 26,000 个产品参考，需要一个可靠的工具来监控他们的 SEO 性能，并确保 Google 将其抓取预算用于正确的类别和页面。 了解如何使用 OnCrawl 成功管理电子商务网站的抓取预算。
阅读案例研究

SSR的优势

  • 当用户的互联网连接速度较慢时，它有助于加载网页
  • 它允许快速加载页面，有助于更好的用户体验
  • 它创建了一个完整的 HTML 页面，避免了耗时的数据获取过程
  • 它允许加载页面及其所有元素，即使用户的设备功率不足，例如老一代智能手机
  • 它有助于 SEO 性能，因为它允许搜索引擎准确地抓取和索引页面； 机器人可以轻松爬取页面，因为它们了解 JS

总体而言，SSR 可以帮助您更好地为在线客户提供服务，因为您的网站访问者不会等待页面在他们的设备上显示。 快速的页面转换还可以确保您的用户永远不会得到一个空白页面，让他们可以立即使用您的网站。
由于 Google 正在加强其活动以通过围绕用户体验构建的算法改进来提供更准确的结果，因此与客户端-服务器渲染相比，SSR 更适合您的 SEO 性能。
但就像数字营销中的其他一切一样，单一的方法很少适用于所有人。 在某些情况下，服务器端渲染可能是个问题。 正如谷歌所说，SSR “不是灵丹妙药”。

SSR的缺点

  • 它涉及大量工作，因为它两次执行相同的应用程序：一次在客户端上，然后在服务器上。
  • 它可能会延迟到第一个字节的时间
  • 它可能会影响内部链接或页面质量，因为它无法呈现第三方 JS（例如，用户生成的内容、产品评论等）或任何不在您的静态 HTML 中的内容； 机器人将无法看到它们
  • 未更新的 URL 可能意味着机器人将无法看到新文章，这可能会导致错过流量

SSR 的另一个关键方面是它意味着业务成本，因为渲染发生在您的服务器上。 但这是您可能想要投资的成本，因为这种类型的渲染可能有助于 Core Web Vitals 优化。

为什么 SSR 与 CWV 相关？

Web 开发人员和 SEO 已经为 CWV 的推出工作了几个月。 大约 60% 的受访 SEO 机构一直在忙于提高客户的 CWV 分数。 如果您使用的是 SSR，您可能不需要做大量工作来满足期望。
由于 SSR 有助于提高速度，因此您的网站已经可以在其中一项指标上表现出色：最大内容绘制 (LCP)。
LCP 专注于感知加载体验。 它测量网页最大的图像或文本在视口中可见时的页面加载时间。 您想要获得高分的目标是在 <2.5 秒内实现 75% 的页面加载。
获得好的 LCP 的主要挑战是渲染阻塞 JS 和 CSS； 缓慢的资源加载时间、缓慢的服务器响应和客户端渲染。
转向 SSR 只是提高 LCP 分数的一种解决方案，因为您的问题可能不仅限于 CSR。 您需要与您的 Web 开发人员合作，首先确定导致 LCP 滞后的原因。
如果页面源代码显示没有意义（您的开发人员会告诉您），那么问题可能出在 CSR 上。 如果您的开发人员发现 TTFB 很差，那么您可能正在处理缓慢的服务器响应时间。
其他 CWV 指标是：

  • 第一输入延迟，侧重于响应能力，以及
  • Cumulative Layout Shift，专注于视觉稳定性。

两者都与 SSR 无关，因此这些是您可能需要投入更多精力的指标，因为 SSR 部分负责 LCP。

如何知道 SSR 是否正确呈现网页

判断 SSR 是否正确呈现页面的最佳方法是使用工具。 其中之一是移动友好测试。 它是一种工具，可让您了解您的网页在 Googlebots 中的显示方式，并在呈现过程中向您显示错误（如果有）。
Google Search Console 还有一个 URL 检查工具，可让您查看搜索引擎是否呈现您的页面。 使用它来检查丢失的内容或与被阻止的 JavaScript 或 CSS 相关的任何错误。
你也可以去查看渲染源，这是一个免费的 Chrome 扩展。 它将告诉您浏览器如何将页面从其原始 HTML 呈现为有效的 DOM。 该扩展将说明原始版本和渲染版本之间的区别，并重点说明 JS 在渲染时如何修改页面。
另一个可以尝试的 Chrome 扩展是 SiteCrawler。 支持 JS 的爬虫抓取站点地图、链接和图像，并比较仅 HTML 和支持 JS 的页面。

总结

大部分 SEO 工作都涉及对已经“交付”给客户端或浏览器的页面进行优化。 但是，当您检查这些页面如何“到达”客户以及如何改进这种情况时，用户会在您的网站上度过更好的时光。
机器人正确地抓取您的页面。 您的页面被编入索引。 您的网站具有更好的搜索引擎排名。
搜索引擎更新以及消费者行为的变化也需要对您的网站进行更改。 随着 CWV 即将推出，现在是研究 SSR 的好时机，这是一个会影响您的 SEO 工作的技术方面。