即日起在codingBlog上分享您的技术经验即可获得积分,积分可兑换现金哦。

AngularJS 对SEO是硬伤

本文目录
[隐藏]

在过去的2014年, 前端开发因为大量前端框架的出现开发模式有了巨大的改变,MVC这个web服务器端开发的模式,由于angularjs们的出现,变成了前端MVVM+后端RestAPI的模式,使得web开发效率有了极大的提升,前端工程师基于angularjs等前端框架利用ajax技术结合后端Restful API,可以达到前后端分离,UI和模型分离。
于是一个web页面在angularjs等框架的武装下,变成了具有丰富功能的单页应用,基本可以达到类似window客户端,flex等程序的交互能力。

可以说web开发由于angularjs,bootrap等前端框架下变得美好起来,不用为了跨浏览器兼容,为了实现UI的操作些大段的css,js代码。 基于angularjs等框架的开发已经大范围普及开来。可是开发者们在使用AngularJS将web程序从php,springmvc等服务器端渲染改成目前的前端渲染+ajax通过restful API请求数据的纯客户端程序后,发现对于搜索引擎来说,页面里的数据不能被爬虫搜索索引了。这就是需要去探讨的前端AJAX单页应用的SEO问题。

1.AJAX页面的SEO问题

搜索引擎爬虫(又叫机器人)最初是被设计用来抓取网页的HTML内容的。随着web以及网站技术的进化,JavaScript变成了web的主要语言。AJAX允许我们在web上做异步的操作。AngularJS们充分使用了异步模型,带给web页面很好的交互性,但这也给Google的爬虫带来了问题。对于angularjs页面来说,你的整个网站可能就仅仅是一个页面,利用angularjs的视图功能通过异步请求填充数据,所有的页面路由,视图,和交互逻辑都是在客户端完成。不论是你发表一个评论,写一个邮件,创建一个客户资料都是在一个页面完成。和你的web页面在没有ajax异步请求数据下,只是一个基本的空壳,没有实际的内容数据。所有的数据都是在浏览器端通过异步加载得到的。当你查看一个angularjs的网页源代码是,你可能看到是主体部分是:

然后发现数据都不在了。 这也是爬虫所看到的,如果没有做特别的SEO设置的话。

2.怎么解决

Angularjs的好处太多,一切很美好,就是SEO这个问题成为开发者的唯一痛苦,在习惯angularjs的便利后,不用他就像是买了辆车,却被SEO问题限号了,不能开。 于是为了angularJS们的AJAX SEO优化支持成为开发者们努力的目标,目前AJAX SEO优化已有一些不错的解决方案,我们将在下面一一探讨:

3.GOOGLE的AJAX爬虫方案

GOOGLE对这类AJAX页面有一套解决方案,可以让angularjs页面的数据像传统页面一样被爬虫抓取,不过需要按照google的方式对你的程序做一定的改造, 具体可以参考:oogle抓取AJAX内容的指南请参看 Google’s Webmaster AJAX Crawling Guidelines.

简单说,他基本的方式是:

  • 当一个搜索引擎的爬虫访问你的应用程序并且看到时,它会在你的URL中添加一个?_escaped_fragment_=tag。

  • 你的服务器将会拦截这个请求,并把它发送给一个用来处理这个特殊的爬虫请求的中间件。

可是GOOGLE只是搜索引擎的一种,其他的引擎对ajax页面还不能很好支持,对于国内站点来说,baidu等国内搜索引擎的SEO支持更为重要。所以我们还是需要考虑其他方案。

其次,需要针对性的按照google的方式对程序进行调整,也包括专门处理爬虫请求的中间件开发工作,都有不少的开发量。

4.Prerender.io方案

可是说这是上面google方案的第三方解决方案。 
Prerender.io,是一个兼容多种不同平台(包括Node,PHP和Ruby)的一个服务。该服务是完全开源的,但是如果你不想搭建一个你自己的SEO服务器的话,你可以使用他们提供的解决方案。Prerender的人们认为,SEO是一件正确的事,并不是一个特权,他们已经做了一些了不起的工作来扩展他们的解决方案,添加了很多自定义的功能和插件。通过引导爬虫到prerender建立的代理页面服务器,相当于给爬虫单独建立了一个单独的通道,将网页快照喂给爬虫。

这种方式麻烦在于需要建立一个prerender服务器,需要给页面建立快照,还是存在很多工作量。

5.PhontomJS方案

PhantomJS 是一个基于WebKit的服务器端 JavaScript API。它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。PhantomJS可以用于页面自动化,网络监测,网页截屏,以及无界面测试等。

利用PhontomJS这个框架,我们可以找到一种简单方式,通过phonetomJS代理将ajax页面的数据在ajax数据完成后,将整个完整页面传给爬虫,从而使得angularjs页面对爬虫来说,和传统页面一样,包含了数据的完整页面,从而达到SEO优化的目的。

这个方案可以说是一种非常简单可行的方式,可以通过在你的web程序中增加一个filter来实现对爬虫请求,通过PhontomJS取得完整页面后在传递给爬虫,基本算比较简洁的解决了SEO的问题。如果想对angularjs做SEO,这是一个值得考虑的方案。

6.javascript的服务器端渲染方案

这类方案出现后,我们看到一个很有意思的现象,原来的web页面从PHP,JSP等纯服务器端渲染方式,变成angularjs们的javascript的客户端渲染方式后,由于SEO问题需要解决, 于是javascript的服务器端渲染方案出现了,这是一种权衡两种模式后的一种改进方案,结合服务器端渲染,javascript客户端渲染两种方式的优点,而出现的一种混合模式,这种模式和普通使用Jsp或PHP/ASP等服务器端渲染区别所在,后者每切换一个页面实际是从服务器端再拉取一个新的页面内容,而新式的JS服务器端渲染技术是第一页如同JS/PHP/ASP,一旦输出渲染成功,页面各种效果包括切换到下一页都是由第一页的JS全面掌管,这时如同AngularJS等客户端Javascript驱动渲染页面一样,由AngularJS实时修改当前页面的DOM。

这种模式出现成为解决angularjs们SEO问题的一种解决方案,除此之外,还能带来更好的用户体验,加载页面更快。

想了解这种方案可以参考一下文章:

Serverside React Rendering: Isomorphic JavaScript

INSIDE FASTBOOT: FAKING THE DOM IN NODE.JS。

目前这类方案还存在探索阶段,如果angularjs们能够很好的将这种思想结合在框架本身,是可以解决大部分的SEO问题。

7.总结

就目前来说,angularJS们的SEO问题,对开发者来说还是一件比较麻烦的事情,需要考虑较多因素。目前存在的方案也没有非常成熟,不过在angularjs等越来越普及的情况下,相信SEO支持也会越来越好,拭目以待。

转载请注明:CodingBlog » AngularJS 对SEO是硬伤

喜欢 (0)or分享 (0)
发表我的评论
取消评论

*

表情