如何准备JS迁移

如何准备JS迁移

以下是将使用静态HTML构建的网站迁移到JavaScript框架时要考虑的步骤。

有机流量减少80％是每个企业的噩梦。不幸的是，如果网站迁移不正确，这种噩梦般的场景可能会成为现实; 它不是改善现状，而是最终导致灾难。

资料来源：http：//take.ms/V6aDv

有许多类型的迁移，例如更改，合并或拆分域，重新设计网站或迁移到新框架。

Web开发趋势清楚地表明，JavaScript的使用近年来一直在增长，JavaScript框架正变得越来越流行。将来，我们可以预期会有越来越多的网站使用JavaScript。

资料来源：https：//httparchive.org/reports/state-of-javascript

因此，SEO将面临迁移到JavaScript框架的挑战。

在本文中，我将向您展示如何准备将使用静态HTML构建的网站迁移到JavaScript框架。

搜索引擎与JavaScript

谷歌是唯一能够执行JavaScript并“看到”内容和导航等元素的搜索引擎，即使它们是由JavaScript提供支持的。但是，在考虑更改JS框架时，您始终需要记住两件事。

首先，Google使用Chrome 41渲染页面。这是一个三年前的浏览器，不支持渲染高级功能所需的所有现代功能。即使他们可以提供一般的JS网站，也可能会因为依赖Google无法处理的技术而无法发现某些重要部分。

其次，JS执行是一个非常繁重的过程，因此Google会在两个方面对JS网站进行索引。第一波获取索引的原始HTML。在JS驱动的网站的情况下，这几乎转换为空页。在第二次浪潮中，Google执行JavaScript，以便他们可以“看到”JS加载的其他元素。然后他们准备索引页面的完整内容。

这两个元素的组合使得如果您决定将当前网站更改为JavaScript框架，您始终需要检查Google是否可以有效地抓取您的网站并将其编入索引。

正确地迁移到JS框架

SEO可能不喜欢JavaScript，但这并不意味着它的受欢迎程度会停止增长。我们应该尽可能地做好准备并正确地实施现代框架。

您将在下面找到有助于您浏览更改当前框架的过程的信息。我不提供“随时可用”的解决方案，因为您的情况将是不同因素的结果，并且没有通用的配方。但是，我想强调你需要特别注意的元素。

涵盖标准迁移的基础知识

如果没有你的帮助，你不能指望谷歌会理解这一变化的奇迹。应详细规划整个迁移过程。

我想继续关注本文的JS迁移，所以如果你需要详细的迁移指南，Bastian Grimm 已经介绍了这一点。

来源：Twitter

了解您在向Google提供内容方面的需求

此步骤应在其他任何事情之前完成。您需要决定Google将如何接收您网站的内容。您有两种选择：

1.客户端呈现：这意味着您完全依赖Google进行呈现。但是，如果你选择这个选项，你会同意一些低效率。此解决方案的第一个重要缺点是由于上面提到的两波索引导致内容的延迟索引。其次，可能会发生一切都无法正常工作，因为Chrome 41不支持所有现代功能。最后，但并非最不重要的是，并非所有搜索引擎都可以执行JavaScript，因此您的JS网站对Bing，Yahoo，Twitter和Facebook来说似乎空洞。

资料来源：YouTube

2.服务器端呈现：此解决方案依赖于外部机制或负责呈现JS网站的其他机制/组件的呈现，创建静态快照并将其提供给搜索引擎爬虫。在Google I / O大会上，Google宣布只为抓取 工具 提供单独版本的网站即可。这称为动态渲染，这意味着您可以检测爬网程序的用户代理并发送服务器端呈现的版本。此选项也有其缺点：创建和维护其他基础结构，如果在服务器上呈现繁重的页面可能会出现延迟，或者可能存在缓存问题（Googlebot可能会收到非常新版本的页面）。

来源：谷歌

在迁移之前，如果需要选项A或B，则需要回答。

如果您的业务成功是围绕新鲜内容（新闻，房地产优惠，优惠券）建立的，我无法想象只依赖于客户端呈现的版本。这可能会导致索引编码严重延迟，因此您的竞争对手可能会获得优势。

如果你有一个小网站并且内容没有经常更新，你可以尝试将其保留为客户端渲染，但如果谷歌确实看到了内容和导航，你应该在启动网站之前进行测试。最有用的工具是GSC中的Fetch as Google和Chrome 41浏览器。

但是，Google正式声明最好使用动态渲染来确保他们能够正确快速地发现频繁更改的内容。

框架与解决方案

如果您选择使用动态渲染，则应该回答如何向抓取工具提供内容。没有一个普遍的答案。一般来说，解决方案取决于技术和开发人员和预算以及您的需求。

您可以在下面找到有关几种方法的选项的评论，但您可以选择：

我需要一个尽可能简单的解决方案。

可能我会去预渲染，例如使用prerender.io。它是一种外部服务，可以抓取您的网站，呈现您的网页并创建静态快照，以便在特定用户代理发出请求时为其提供服务。此解决方案的一大优势是您无需创建自己的基础架构。

您可以安排重新抓取并创建页面的新快照。但是，对于规模较大且频繁更改的网站，可能很难确保所有网页都按时刷新并向Googlebot和用户显示相同的内容。

我需要一个通用的解决方案，我遵循趋势。

如果使用React，Vue或Angular之类的流行框架构建网站，则可以使用专用于给定框架的服务器端呈现方法之一。以下是一些热门比赛：

Angular Universal是Angular的解决方案。

Nuxt.js与Vue.js一起使用。

Next.js支持React 。

使用安装在React或Vue顶部的其中一个框架可以创建一个通用应用程序，这意味着可以在服务器（服务器端呈现）和客户端（客户端呈现）中执行完全相同的代码。如果您依赖于创建快照和重度缓存，它可以最大限度地减少内容差距问题，就像预呈现一样。

我需要一个通用的解决方案，我不使用流行的框架。

您可能会使用一个没有现成解决方案的框架来构建通用应用程序。在这种情况下，您可以构建基础架构进行渲染。这意味着您可以在服务器上安装无头浏览器，该浏览器将呈现您网站的所有子页面，并创建提供给搜索引擎抓取工具的快照。Google为此提供了一个解决方案 – Puppeteer是一个与prender.io类似的工作库。但是，一切都发生在您的基础架构上

我想要一个持久的解决方案。

为此，我使用混合渲染。据说此解决方案为用户和抓取工具提供了最佳体验，因为用户和抓取工具在初始请求时收到页面的服务器端呈现版本。在许多情况下，为用户提供SSR页面更快，而不是在浏览器中执行所有繁重的文件。所有后续用户交互均由JavaScript提供。抓取工具不会通过单击或滚动与网站交互，因此它始终是对服务器的新请求，并且它们始终会收到SSR版本。听起来不错，但实施起来并不容易。

资料来源：YouTube

您选择的选项取决于许多因素，如技术，开发人员和预算。在某些情况下，您可能有一些选项，但在许多情况下，您可能有许多限制，因此选择解决方案将是一个单一选择过程。

测试实现

我无法想象没有创建临时环境并测试一切是如何工作的迁移。迁移到JavaScript框架会增加您需要注意的复杂性和其他陷阱。

有两种情况。如果由于某种原因您决定依赖客户端渲染，则需要安装Chrome 41并检查其渲染和工作方式。审核中最重要的一点是检查Chrome开发工具中控制台中的错误。请记住，即使处理JavaScript时出现小错误也可能导致渲染问题。

如果您决定使用向爬网程序提供内容的方法之一，则需要安装具有此解决方案的暂存站点。下面，我将概述在开始使用网站之前应该检查的最重要元素：

1.内容平价

您应该始终检查用户和抓取工具是否看到完全相同的内容。为此，您需要在浏览器中切换用户代理以查看发送给爬网程序的版本。您应该验证有关渲染的一般差异。但是，要查看整个图片，您还需要检查您网站的DOM（文档对象模型）。从浏览器复制源代码，然后将用户代理更改为Googlebot并获取源代码。Diffchecker将帮助您查看两个文件之间的差异。您应该特别注意内容，导航和元数据的差异。

极端的情况是，您将一个空的HTML文件发送到Googlebot，就像Disqus一样。

来源：谷歌

这就是他们的SEO可见性：

资料来源：http：//take.ms/Fu3bL

他们看到了更好的日子。现在主页甚至没有编入索引。

2.导航和超链接

为了100％确定Google看到，抓取并传递链接汁，您应该遵循实施在Google I / O Conference 2018上共享的内部链接的明确建议。

资料来源：YouTube

如果您依赖服务器端呈现方法，则需要检查页面的预呈现版本的HTML是否包含您期望的所有链接。换句话说，如果它与客户端呈现的版本具有相同的导航。否则，Google将无法看到页面之间的内部链接。您可能遇到问题的关键区域是方面导航，分页和主菜单。

3.元数据

元数据根本不应该依赖于JS。Google表示，如果您使用JavaScript加载规范标记，他们可能不会在第一波索引中看到这一点，并且他们不会在第二波中重新检查此元素。结果，可以忽略规范信号。

在测试暂存站点时，请始终检查SSR版本是否在head部分中具有规范标记。如果是，请确认规范标签是正确的标签。无论您使用客户端渲染还是服务器端渲染，经验法则总是向搜索引擎发送一致的信号。

在检查网站时，请始终验证CSR和SSR版本是否具有相同的标题，说明和机器人说明。

4.结构化数据

结构化数据有助于搜索引擎更好地了解您网站的内容。

在启动新网站之前，请确保您网站的SSR版本显示您要用结构化数据标记的所有元素，以及标记是否包含在预呈现版本中。例如，如果要将标记添加到痕迹导航栏中。在第一步中，检查SSR版本上是否显示了面包屑。在第二步中，在Rich Results Tester中运行测试以查看标记是否有效。

5.懒加载

我的观察表明，现代网站喜欢加载延迟加载的图像和内容（例如产品）。附加元素加载在滚动事件上。也许这对用户来说可能是一个不错的功能，但Googlebot无法滚动，因此这些项目将无法被发现。

看到有这么多网站管理员以SEO友好的方式遇到延迟加载问题，Google发布了延迟加载最佳实践的指南。如果要在滚动上加载图像，请确保支持分页加载。这意味着如果您滚动，URL应该更改（例如，通过添加分页标识符：？page = 2，？page = 3等），最重要的是，URL将使用适当的内容进行更新，例如使用历史API。

不要忘记在head部分添加rel =“prev”和rel =“next”标记以指示页面的顺序。

快照生成和缓存设置

如果您决定为搜索引擎抓取工具创建快照，则需要监控其他一些内容。

您必须检查快照是否是您网站的客户端呈现版本的精确副本。您无法加载标准用户看不到的其他内容或链接，因为它可能会被视为隐藏真实内容。如果创建快照的过程效率不高，例如您的页面非常繁重且服务器速度不快，则可能会导致创建损坏的快照。因此，您将向爬网程序提供部分呈现的页面。

在某些情况下，渲染基础架构必须以高速工作，例如黑色星期五，当您想要非常快速地更新价格时。您应该在极端条件下测试渲染，并查看更新给定页数所需的时间。

最后一件事是缓存。正确设置缓存可以帮助您保持效率，因为许多页面可以直接从内存中快速提供。但是，如果您没有正确规划缓存，Google可能会收到过时的内容。

监控

监测迁移后是一个自然的步骤。但是，在迁移到JS框架的情况下，有时还需要监视和优化。

迁移到JS框架可能会影响Web性能。在许多情况下，有效载荷增加，这可能导致更长的加载时间，特别是对于移动用户。一个好的做法是监控用户如何看待网站的性能并比较迁移前后的数据。为此，您可以使用Chrome用户体验报告。

如果真实用户指标随时间发生变化，它将提供信息。您应该始终致力于改进它们并尽快加载网站。

摘要

迁移始终是一个危险的过程，您无法确定结果。如果您详细计划整个过程，可能会降低风险。对于所有类型的迁移，规划与执行同样重要。如果您参与迁移到JS框架，则需要处理额外的复杂性。您需要做出其他决定，并且需要验证其他内容。但是，随着Web开发趋势继续朝着越来越多地使用JavaScript的方向发展，您应该准备好迟早需要面对JS迁移。祝好运！

本文来自投稿，不代表穷思笔记立场，如若转载，请注明出处：https://www.chons.cn/15097.html