SEO必须能够保证其技术实现并对搜索引擎友好

支持JavaScript的网站将继续存在。由于JavaScript在其众多框架中成为现代网站越来越受欢迎的资源，因此SEO必须能够保证其技术实现对搜索引擎友好。

在本文中，我们将重点介绍如何针对Google优化JS网站（尽管Bing也推荐了相同的解决方案，动态呈现）。

本文内容包括：

1. SEO的 JavaScript挑战

2.客户端和服务器端呈现

1. Google如何抓取网站

4.如何检测客户端呈现的内容

5.解决方案：混合渲染和动态渲染

1. SEO的JavaScript挑战

   React，Vue，Angular，Node和Polymer。如果这些花哨的名字中至少有一个响铃，那么很可能你已经在处理一个由JavaScript驱动的网站了。

所有这些JavaScript框架都为现代网站提供了极大的灵活性和强大功能。

它们在客户端呈现（如允许浏览器而不是服务器呈现页面），页面加载功能，动态内容，用户交互和扩展功能方面开启了大量可能性。

如果我们只关注对SEO有什么影响，JavaScript框架可以为网站做以下事情：

根据用户的交互动态加载内容

外部化可见内容的加载（请参阅下面的客户端呈现）

外部化元内容或代码的加载（例如，结构化数据）

遗憾的是，如果在不使用一对SEO镜头的情况下实施，JavaScript框架可能会对页面性能构成严峻挑战，从速度缺陷到渲染阻塞问题，甚至阻碍内容和链接的可抓取性。

在审核JavaScript驱动的网页时，SEO必须遵循许多方面，可归纳如下：

Googlebot是否可以看到该内容？请记住，机器人不与页面交互（图像，选项卡等）。

链接是否可以抓取，因此遵循？始终使用锚点（）和引用（href =），甚至与“onclick”事件一起使用。

渲染速度是否足够快？

它如何影响抓取效率和抓取预算？

要回答很多问题。那么SEO应该从哪里开始呢？

以下是优化JS网站的关键指南，以便在保持搜索引擎机器人满意的同时使用这些框架。

2.客户端和服务器端呈现：最好的“frenemies”

当他们必须应对JS驱动的网站时，所有SEO所需的最重要的知识可能是客户端和服务器端呈现的概念。

了解两者的差异，好处和缺点对于部署正确的SEO策略至关重要，而不是在与软件工程师（最终负责实施该策略的人）交谈时迷路。

让我们看一下Googlebot如何抓取和索引页面，将其作为一个非常基本的顺序过程：

googlebot如何抓取和索引页面

1.客户端（Web浏览器）向服务器发出多个请求，以便下载最终显示该页面的所有必要信息。通常，第一个请求涉及静态HTML文档。

2.然后下载HTML文档引用的CSS和JS文件：这些是有助于生成页面的样式，脚本和服务。

3.网站渲染服务（WRS）解析并执行JavaScript（可以管理全部或部分内容或仅仅是一个简单的功能）。

这个JavaScript可以通过两种不同的方式提供给bot：

客户端：所有工作基本上都“外包”给WRS，WRS现在负责加载所有脚本和必要的库来呈现该内容。服务器的优点是当真实用户请求页面时，它会节省大量资源，因为脚本的执行发生在浏览器端。

服务器端：服务器对所有内容进行预先烹饪（也称为渲染），最终结果发送到机器人，准备进行爬网和索引。这里的缺点是所有作业都由服务器在内部执行，而不是外部化到客户端，这可能导致进一步请求的呈现中的额外延迟。

1. 咖啡因（Google的索引器）对找到的内容进行索引

在内容中发现新链接以进行进一步爬网

这是理论，但在现实世界中，Google没有无限的资源，必须在爬行中做一些优先级。

1. Google如何实际抓取网站

   Google是一款非常智能的搜索引擎，拥有非常智能的抓取工具。

但是，当涉及应用于Web开发的新技术时，它通常采用被动方法。这意味着谷歌和它的机器人需要适应新的框架，因为它们变得越来越流行（JavaScript就是这种情况）。

出于这个原因，谷歌抓取JS驱动的网站的方式仍然远非完美，而且SEO和软件工程师需要以某种方式减轻盲点。

简而言之，谷歌实际抓取这些网站的方式如下：

googlebot如何抓取JS呈现的网站

上面的图表由Tom Greenaway在Google IO 2018会议上分享，它基本上说的是 – 如果您的网站严重依赖JavaScript，您最好快速加载JS内容，否则我们将无法在第一波期间渲染它（因此将其编入索引），并且它将被推迟到第二波，没有人知道何时可能发生。

因此，基于JavaScript的客户端呈现内容可能会由第二波中的机器人呈现，因为在第一波中它们将加载服务器端内容，这应该足够快。但是他们不想花太多资源来承担太多任务。

汤姆格林纳威的话：

“谷歌搜索中的JavaScript驱动网站的呈现推迟到Googlebot有可用于处理该内容的资源。”

对SEO的影响是巨大的，您的内容可能直到一周，两周甚至五周后才被发现，同时，只有您的无内容页面将被算法评估和排名。

在这一点上SEO最应该担心的是这个简单的等式：

没有找到内容=内容（可能）几乎不可索引

如何减少无内容的页面排名？很容易猜到任何SEO。

到现在为止还挺好。下一步是学习内容是在客户端还是在服务器端呈现（不需要软件工程师）。

4.如何检测客户端呈现的内容

选项一：文档对象模型（DOM）

有几种方法可以了解它，为此，我们需要介绍DOM的概念。

文档对象模型定义HTML（或XML）文档的结构，以及如何访问和操作这些文档。

在SEO和软件工程中，我们通常将DOM称为浏览器呈现的最终HTML文档，而不是生成在服务器中的原始静态HTML文档。

您可以将HTML视为树的主干。您可以向其添加分支，叶子，花和果实（即DOM）。

JavaScript所做的是操纵HTML并创建一个增加功能和内容的丰富DOM。

在实践中，您可以通过在您正在查看的任何页面上按“Ctrl + U”来检查静态HTML，并在完全加载后通过“检查”页面来检查DOM。

大多数情况下，对于现代网站，您会发现这两个文档完全不同。

选项二：免费的JS配置文件

在Chrome中创建新的个人资料，并通过内容设置禁止JavaScript（直接在此处访问它们 – Chrome：//设置/内容）。

使用此配置文件浏览的任何URL都不会加载任何JS内容。因此，页面中的任何空白点都标识了客户端提供的一段内容。

选项三：在Google Search Console中以Google格式抓取

如果您的网站已在Google Search Console中注册（我无法想到它不会有任何正当理由），请使用旧版控制台中的“抓取为Google”工具。这将返回Googlebot查看页面的呈现方式以及普通用户如何看待该页面的呈现。有很多不同之处？

链接构建内容生成中的三个基本因素 如何进行品牌检索审核 如何为您的图像编写SEO友好的替代文字 如何完美平衡联盟营销和SEO

选项四：在无头模式下运行Chrome版本41（Chromium）

谷歌在2018年初正式声明他们使用旧版Chrome（特别是版本41，任何人都可以从这里下载）以无头模式呈现网站。主要含义是，在该版本的Chrome中无法很好地呈现的页面可能会遇到一些面向爬行的问题。

选项五：使用Googlebot在Screaming Frog上抓取页面

并禁用JavaScript呈现选项。检查机器人是否正确呈现了内容和元内容。

在完成所有这些检查之后，仍然请问您的软件工程师，因为您不想留下任何松散的结果。

5.解决方案：混合渲染和动态渲染

要求软件工程师回滚一项伟大的开发工作，因为它会伤害SEO可能是一项艰巨的任务。

经常发生的是，SEO不参与开发过程，只有在整个基础设施到位时才会调用它们。

我们的SEO应该致力于改善我们与软件工程师的关系，让他们意识到任何创新对SEO的巨大影响。

这就是从一开始就可以避免像无内容页面这样的问题。解决方案有两种方法。

混合渲染

这种方法也称为同构JavaScript，旨在最大限度地减少对客户端呈现的需求，并且不区分机器人和真实用户。

混合渲染表明以下内容：

一方面，所有非交互式代码（包括所有JavaScript）都在服务器端执行，以便呈现静态页面。爬虫和用户访问页面时都可以看到所有内容。

另一方面，客户端（浏览器）仅运行用户交互式资源。这有利于页面加载速度，因为需要更少的客户端呈现。

动态渲染

该方法旨在检测机器人发出的请求与用户放置的请求，并相应地提供页面。

如果请求来自用户：服务器提供静态HTML并利用客户端呈现来构建DOM并呈现页面。

如果请求来自机器人：服务器通过内部渲染器（例如Puppeteer）预渲染JavaScript，并将新的静态HTML（由JavaScript操纵的DOM）传递给机器人。

谷歌如何动态渲染JavaScript网站

两全其美的

结合这两种解决方案还可以为用户和机器人提供巨大的好处。

如果请求来自用户，请使用混合呈现

如果请求来自机器人，请使用服务器端呈现

结论

随着现代网站中JavaScript的使用日益增长，通过许多简单易用的框架，它要求软件工程师完全依赖HTML来搜索不实际也不可行的搜索引擎机器人。

但是，客户端渲染解决方案引发的SEO问题可以使用混合渲染和动态渲染以不同方式成功解决。

了解可用的技术，您的网站基础设施，工程师和解决方案可以保证您的SEO策略的成功，即使在JavaScript驱动的网站等复杂环境中也是如此。

免责声明：本文仅代表作者个人观点，与穷思笔记网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。