1. 首页
  2. 网络营销赋能
  3. 海外营销

网站的初步设计

支持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友好的替代文字
选项四:在无头模式下运行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驱动的网站等复杂环境中也是如此。

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

发表评论

登录后才能评论

联系我们

 

在线咨询:点击这里给我发消息

邮件:320192271@qq.com

QR code