当前位置:主页 > SEO优化 >

单页的应用程序对SEO友好么?-奕星SEO

作者: 奕星SEO 分类: SEO优化 发布时间: 2018-07-12 13:49 阅读量:

  臭名昭著的单页应用(spa)开发领域是SEO。根据您的要求,搜索引擎抓取客户端的内容是非常正常的,只要它是同步的,或者根本不是很好。

由于所有这些相互矛盾的建议引起的困惑,我经常看到一个问题:“我的vue spa适合SEO吗?”“从vue。js开发者Facebook group, vue。js论坛和r / vue js在Reddit上。

在本文中,我们将挑战流行的观点,做一些基本的测试,并试图总结一些明智的建议来建立SEO友好spa。

客户端呈现内容的问题

单页面应用程序的标准实现为没有任何有意义的内容的浏览器提供了一个页面“shell”。相反,Ajax用于按需从服务器加载内容,然后通过JavaScript将其添加到页面。

这允许用户在不刷新页面的情况下查看spa页面,理论上可以改善用户体验。

​虽然这种架构适合人类用户在浏览器中查看页面,但是搜索引擎爬虫呢?抓取工具可以运行JavaScript吗?如果是这样,在抓取页面之前,他们会等待Ajax调用完成吗?

知道这一点很重要,因为它可以确定网站的内容是否可以被搜索引擎索引,更重要的是,它的内容排名是什么。

谷歌机器人

既然谷歌是世界领先的搜索引擎,我们的调查应该集中在谷歌bot,一个谷歌搜索引擎抓取工具。

在互联网发布的早期,谷歌机器人只抓取了页面中提供的静态html。然而,2014年,谷歌bot宣布,在开始抓取之前,将尝试呈现JavaScript。

为了帮助调试任何由JavaScript修改的呈现页面的问题,谷歌向网站管理员提供了一个谷歌捕获工具,该工具显示了谷歌bot在特定网站上看到的内容的快照。

一个常见的误解是谷歌bot不会获取异步JavaScript。这篇文章在摧毁它方面做得很好。TLDR;谷歌bot将至少等待20秒来完成异步调用。

谷歌如何查看spa

一个典型的vue。js spa示例是vue hacker news clone 2。这是一个开源项目,由vue团队提供,用于演示所有vue功能和有效的设计模式。

我将应用程序部署到heroku实例,并以谷歌的形式运行它。在下面的图中,左边的截图显示了谷歌机器人如何看到它,右边的截图显示了用户如何看到它。他们似乎完全一样。

删除服务器端呈现

vue黑客新闻克隆2的一个关键特性是服务器端渲染(SSR)。这意味着,与更基本的spa不同,每个页面的内容都显示在服务器上,并在每次加载页面时提供给浏览器,就像它是静态html一样。

然而,我们想知道的是谷歌bot如何查看其客户提供的内容。为此,我关闭了SSR并再次运行测试:

即使您只提供客户端呈现,谷歌bot也可以轻松地查看内容。我还等了几天,看看谷歌是否对应用程序建立了索引。有以下内容:

但是等待…

虽然这个测试似乎满足了对客户端演示内容的任何关注,但是有一些原因使您不能对它充满信心。

和所有的JavaScript引擎一样,谷歌bot不是绝对可靠的,而且可能有不能呈现页面的优势。

仅仅因为一个页面可以被编入索引并不意味着它的排名会很好。

持怀疑态度的JavaScript

谷歌机器人在渲染vue黑客新闻方面没有问题。但是我们不应该认为它可以使所有的JavaScript都变得完美。尽管大多数开发人员似乎忽略了这一点,但谷歌关于JavaScript渲染的2014年声明显然不能保证。

与浏览器一样,谷歌bot必须有一个JavaScript引擎,该引擎包含已实现的web标准和es函数的特定子集以及它们的实现方式。

根据谷歌开发人员ADI ous man和rob Dodds的视频(于2017年11月发布),谷歌机器人在当前版本的版本41中有很多新的API,因为版本41已经发布。如果您使用任何人,您可以认为谷歌bot无法呈现您的web页面并对其进行索引。

您可能认为这是一个微不足道的问题,因为您需要为旧浏览器转换或填充这些函数。但是关键是,您不应该盲目地相信每个搜索爬虫都可以正确地运行您的应用程序,就像您不应该盲目地相信每个浏览器都可以正确地运行您的应用程序一样。

SEO优化

不要忘记“SEO”中的“o”代表“优化”。索引作为搜索引擎是不够的;我们希望我们的网站也能排名不错。Fetch像谷歌那样告诉我们如何查看页面,而不是页面与其竞争对手之间的比较。

关于SEO和reach的文章有一个有趣的评论:网络爬虫比SEO Barry ADAMS更聪明。关于搜索引擎如何排名spa,他说:

当您使用没有服务器端渲染的reach时,爬虫会在第一个页面停止,因为它看不到任何超链接。这使得爬行过程非常缓慢和低效。这就是为什么在谷歌上reach(以及类似的JavaScript平台)比提供纯html的抓取工具的网站更糟糕的原因。可以非常有效地捕获纯html网站,可以更快地捕获和索引新的添加和更改,谷歌可以更好地评估它们。在这样的网站上抓住每个页面的优先级。”

尽管他没有提供任何证据,但他似乎与其他级别的决策者一致,比如页面的速度。

如果SEO很重要,我该怎么做?

最重要的是,如果SEO很重要,您不能依赖spa客户端来渲染。您必须确保web页面包含内容。

然而,这并不意味着您需要放弃spa框架。有两种技术,服务器端渲染和预渲染,所有这些都可以实现预期的结果。

服务器端呈现

服务器端呈现(SSR)是web服务器作为服务器请求/响应周期的一部分的位置。以vue为例。js和其他类似的框架,都是通过在虚拟DOM上执行app来完成的。

虚拟DOM的状态将被转换成一个html字符串,然后在发送给客户端之前注入到页面中。当页面到达浏览器时,将在现有内容上无缝地安装JavaScript应用程序。

Ssr确保您的页面对爬虫友好,因为无论爬虫如何运行JavaScript,或者即使它运行JavaScript,页面内容都是完整的。

Ssr有它的缺点:

您需要将代码设计为“通用的”,即必须在基于浏览器和基于服务器的JavaScript环境中工作。这意味着对浏览器API和对象的任何期望

窗口

可用代码不起作用。

每次向服务器发送请求时,应用程序都会运行,增加额外的负载并减慢响应速度。缓存可以部分缓解这种情况。

SSR的实现是复杂的、耗时的,因此项目需要更多的开发人员时间。

它只适用于节点的后端。js。Ssr可以使用非节点后端完成,例如,通过使用PHP扩展v8js,但是这个解决方案非常有限。

如果您想在vue中实现服务器端呈现。js spa,你应该从官方指南vue开始。js端呈现指南。我还写了一篇使用lariavel和vue实现SSR的指南。使用lariavel和vue。js 2.5用于服务器端渲染。

提示:nuxt这样的框架。js有开放帧的服务器端渲染。

前示威

如果上述原因之一不能使用SSR,则有另一种方法:预渲染。使用此方法,您可以使用headless浏览器在开发环境中运行应用程序,获取页面输出的快照,并使用此快照以服务器的响应替换html文件。

它几乎与SSR的概念相同,但它是在部署之前完成的,而不是在实时服务器上。它通常使用无头浏览器如chrome实现,在构建过程中可以与web pack、gulp等结合使用。

预表示的优点是它不需要节点。生产服务器或将其加载到生产服务器。

然而,预渲染也有缺点:

它并不适用于显示数据变化的页面,比如vue hacker news。

它不适用于具有特定用户内容的页面,例如包含用户个人详细信息的帐户页面。但是,这些类型的页面对SEO不是很重要。您通常不希望索引帐户页。

您需要在应用程序中分别显示每个路径,这在网站上可能会花费很多时间。

如果你热衷于vue的预渲染。js应用程序,我已经在这个博客上写了一个指南:预渲染vue。js app(带节点或larave)

提示:对SEO的预渲染可以从pre购买。io作为服务。

结论

许多开发者认为谷歌在2014年关于JavaScript渲染的声明是SEO内容的终结。事实上,并不能保证谷歌机器人会正确呈现网页。如果是这样,它仍然可以将网页放置在有竞争力的网站的静态html页面下。

我的建议:如果您打算使用spa架构,请确保渲染或预渲染服务器。


本文链接地址:本文链接地址:http://www.seohuizhou.com/seoyouhua/226.html
上一篇:<<什么样的外链是一个好的外链?-奕星SEO
下一篇:做SEO优化时,网站应该先掌握哪些知识?>>