源码基地

 找回密码
 马上注册

QQ登录

只需一步,快速开始

新浪微博登陆

只需一步, 快速开始

查看: 47518|回复: 103

一个单页应用程序SEO友好吗

  [复制链接]

新浪微博达人勋

该用户从未签到

发表于 2018-7-12 09:06 | 显示全部楼层 |阅读模式
一个臭名昭着的单页面应用(SPA)开发领域是SEO。根据您的要求,搜索引擎抓取客户端呈现的内容要么完全正常,只要它是同步的,或者根本不是很好。

由于所有这些相互矛盾的建议引起的混乱,我经常看到问题“我的Vue SPA是否适合SEO?” 来自像Vue.js Developers Facebook小组,Vue.js论坛和Reddit上的r / vuejs这样的地方。

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

客户端呈现内容的问题

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

这允许用户在没有页面刷新的情况下查看SPA站点的“页面”,从理论上改进UX。

一个单页应用程序SEO友好吗-1.jpg



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

重要的是要知道这一点,因为它可以确定网站的内容是否可以被搜索引擎索引,同样重要的是,它的内容排名是多少。

Googlebot

由于Google是全球领先的搜索引擎,因此我们的调查应专注于Google搜索引擎抓取工具Googlebot。

在网络发布初期,Googlebot只会抓取页面中提供的静态HTML。然而,2014年宣布,Googlebot现在会尝试在开始抓取之前呈现JavaScript。

为了帮助调试渲染经JavaScript修改的页面的任何问题,Google为网站管理员提供了Google抓取工具,该工具会显示Googlebot在特定网址上看到的内容的快照。

一个常见的误解是Googlebot不会抓取异步JavaScript。这篇文章在破坏它方面做得很好。TLDR; Googlebot会等待至少20秒才能完成异步调用!

Googlebot如何看待SPA

典型的Vue.js SPA示例是Vue HackerNews Clone 2.0。这是Vue团队提供的一个开源项目,用于演示Vue的全部功能和有效的设计模式。

我将此应用程序部署到Heroku实例并通过Fetch As Google运行。在下图中,左侧的屏幕截图显示了Googlebot如何看到它,右侧的屏幕截图显示了用户将如何看到它。它们似乎完全相同。

一个单页应用程序SEO友好吗-2.jpg



删除服务器端呈现

Vue HackerNews Clone 2.0的一个关键特性是服务器端渲染(SSR)。这意味着,与更基本的SPA不同,每个页面的内容都在服务器上呈现,并在每次页面加载时提供给浏览器,就像它是静态HTML一样。

但是,我们试图了解的是Googlebot如何看待客户端呈现的内容。出于这个原因,我关闭了SSR并再次运行测试:

一个单页应用程序SEO友好吗-3.jpg



即使只提供客户端渲染,Googlebot也能轻松查看内容。我还等了几天才看看Google是否已将该应用编入索引。它有过:

一个单页应用程序SEO友好吗-4.jpg



可是等等...

虽然这个测试似乎满足了对客户端呈现内容的任何担忧,但是有一些原因让你不应该对它充满信心:
    与所有JavaScript引擎一样,Googlebot也不是绝对可靠的,并且可能存在无法呈现页面的边缘情况。仅仅因为页面可以被索引,并不意味着它将排名很好。

对JavaScript持怀疑态度

Googlebot在渲染Vue HackerNews方面没有任何问题。但我们不应该认为它可以使所有JavaScript完美无瑕。谷歌2014年关于JavaScript渲染的公告明确表示不会有任何保证,尽管大多数开发人员似乎忽略了这一点。

就像浏览器一样,Googlebot必须拥有一个JavaScript引擎,其中包含已实现的Web标准和ES功能的特定子集,以及它们如何实现的特定特性。

根据该视频来自谷歌开发者阿迪·奥斯马尼和罗布·多德森(发布2017年11月),Googlebot在目前基于Chrome的41有很多新的API,因为41版已发布,如果你使用的任何人,想必Googlebot无法呈现和索引您的网页。

您可能认为这是一个微不足道的问题,因为您无论如何都需要为旧浏览器转换或填充此类功能。但重点是,您不应该盲目相信每个搜索爬虫正确运行您的应用程序,就像您不会盲目相信您的应用程序被每个浏览器正确运行一样。

优化

不要忘记“SEO”中的“O”代表“优化”。被索引是一个搜索引擎是不够的; 我们希望我们的网站排名也很好。Fetch As Google告诉我们页面是如何被看到的,而不是页面与竞争对手的对比情况。

关于SEO与React的文章有一个有趣的评论:网络爬虫比 SEO专家Barry Adams所做的更聪明。关于搜索引擎如何对SPA进行排名的话题,他说:

“当你在没有服务器端渲染的情况下使用React时会发生什么情况,爬虫会在第一页停止,因为它看不到任何要跟随的超链接...它使爬行过程非常缓慢和低效。这就是为什么网站基于React(以及类似的JavaScript平台)构建在Google上的表现比主要为爬虫程序提供纯HTML的网站更糟糕......纯HTML网站可以非常有效地被抓取,新添加和更改的内容将被更快地抓取和索引,并且Google可以更好地评估此类网站上各个网页的抓取优先级。“

虽然他没有为此提供任何证据,但它似乎与其他排名决定者的理念一致,如页面速度。

如果SEO是至关重要的,该怎么办

最重要的是,如果SEO很关键,您不能依赖SPA的客户端呈现,并且必须确保您的网页中包含内容。

但这并不意味着您需要放弃SPA架构。有两种技术,服务器端渲染和预渲染,它们都可以实现预期的结果。

服务器端渲染

服务器端呈现(SSR)是Web服务器作为服务器请求/响应周期的一部分呈现页面的位置。在Vue.js和其他类似框架的情况下,这是通过针对虚拟DOM执行app来完成的。

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

SSR保证您的页面将是爬虫友好的,因为无论爬虫如何运行JavaScript,或者甚至是否运行JavaScript,页面内容都是完整的。

SSR有其缺点:
    您需要将代码设计为“通用”,即它必须在浏览器和基于服务器的JavaScript环境中工作。这意味着任何期望浏览器API和对象window可用的代码都不起作用。您的应用将在每次向服务器发出请求时运行,增加额外的负载并减慢响应速度。缓存可以部分缓解这种情况。实施SSR既复杂又耗时,因此项目需要更多的开发人员时间。它只适用于Node.js后端。SSR可以使用非节点后端完成,例如,通过使用PHP扩展v8js,但是这样的解决方案非常有限。

如果您希望在Vue.js SPA中实现服务器端呈现,则应从官方指南开始:Vue.js服务器端呈现指南。我还写了一篇关于使用Laravel和Vue.js实现SSR的指南:使用Laravel和Vue.js 2.5进行服务器端渲染。

提示:像Nuxt.js这样的框架带有开箱即用的服务器端渲染。

预呈现

如果由于上述原因之一而无法使用SSR,则还有另一种方法:预渲染。使用此方法,您可以在开发环境中使用无头浏览器运行应用程序,对页面输出进行快照,并使用此快照将HTML文件替换为服务器的响应。

它与SSR的概念几乎相同,只是它是在部署前完成的,而不是在实时服务器上完成的。它通常使用像Chrome这样的无头浏览器来执行,并且可以与Webpack,Gulp等合并到构建流程中。

预呈现的优点是它不需要Node.js生产服务器,也不会向生产服务器添加负载。

然而,预渲染也有缺点:
    它对于显示更改数据的页面不起作用,例如,Vue HackerNews。它不适用于具有用户特定内容的页面,例如具有用户个人详细信息的帐户页面。然而,这些类型的页面对SEO不太重要; 你通常不希望索引的帐户页面。您需要单独预渲染应用中的每条路线,这可能会占用大量网站的大量时间。

如果你热衷于在Vue.js应用程序中实现预渲染,我已经在这个博客上写了一个指南:Pre-Render A Vue.js App(带节点或Laravel)

提示:为prerendering for SEO可以从prerender.io作为服务购买

结论

许多开发人员看到谷歌2014年关于JavaScript渲染的公告是对SEO内容的SEO担忧的终结。实际上,无法保证Googlebot会正确呈现网页,如果确实如此,它依旧可能会将网页排名低于竞争网站中的静态HTML网页。

我的建议:如果您打算使用SPA架构,请确保提供服务器呈现或预呈现的页面。


回复 天涯海角搜一下: 百度 谷歌 360 搜狗 搜搜 有道 奇虎 雅虎 必应 即刻

使用道具 举报

新浪微博达人勋

该用户从未签到

发表于 2018-7-12 09:28 | 显示全部楼层
专业抢沙发的!哈哈
回复 支持 反对

使用道具 举报

新浪微博达人勋

该用户从未签到

发表于 2018-7-12 10:11 | 显示全部楼层
我抢、我抢、我抢沙发~
回复 支持 反对

使用道具 举报

新浪微博达人勋

该用户从未签到

发表于 2018-7-12 10:55 | 显示全部楼层
有空一起交流一下
回复 支持 反对

使用道具 举报

新浪微博达人勋

该用户从未签到

发表于 2018-7-12 11:34 | 显示全部楼层
回复 支持 反对

使用道具 举报

新浪微博达人勋

  • TA的每日心情
    擦汗
    2018-8-5 08:28
  • 签到天数: 6 天

    [LV.2]偶尔看看I

    发表于 2018-7-12 12:23 | 显示全部楼层
    呵呵。。。
    回复 支持 反对

    使用道具 举报

    新浪微博达人勋

  • TA的每日心情
    奋斗
    2018-7-28 08:46
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    发表于 2018-7-12 13:50 来自手机 | 显示全部楼层
    顶起顶起顶起
    回复 支持 反对

    使用道具 举报

    新浪微博达人勋

    该用户从未签到

    发表于 2018-7-12 14:55 来自手机 | 显示全部楼层
    呵呵,低调,低调!
    回复 支持 反对

    使用道具 举报

    新浪微博达人勋

    该用户从未签到

    发表于 2018-7-12 15:36 | 显示全部楼层
    回复 支持 反对

    使用道具 举报

    新浪微博达人勋

    该用户从未签到

    发表于 2018-7-12 16:29 | 显示全部楼层
    这么强,支持楼主,佩服
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 马上注册 新浪微博登陆

    本版积分规则

    关闭

    站长推荐上一条 /6 下一条

    Archiver|VIP商业源码|企业网站源码|建站之星模板|DEDE模板|新闻中心|源码基地 ( 黔ICP备11002644号 )|网站地图

    GMT+8, 2018-9-19 20:41 , Processed in 0.453125 second(s), 61 queries , Gzip On, File On.

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表