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问题。

AJAX页面的SEO问题

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

怎么解决

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

GOOGLE的AJAX爬虫方案

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

简单说，他基本的方式是：

• 当一个搜索引擎的爬虫访问你的应用程序并且看到时，它会在你的URL中添加一个?_escaped_fragment_=tag。
• 你的服务器将会拦截这个请求，并把它发送给一个用来处理这个特殊的爬虫请求的中间件。

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

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

Prerender.io方案

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

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

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，这是一个值得考虑的方案。

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问题。

总结

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