使用Prerender.io为angular项目做SEO
现在的项目的为了更好的分工明确，降低耦合都开始采用前后端分离的形式进式开发，我们也采用这种开发形式，前端用angular开发。虽说刚开始也遇各种坑，但是后期熟悉了之后简直爽呆。一个比较大的坑就是SEO问题，前后端分离页面的路由一般都是放在前端的，用hashBang的方式控制路由。但是这会出现一种情况页面无法被搜索引擎抓取，这对于SEO简直就是灾难。
有问题就有解决办法，一般的做法就是在服务器加一个可以渲染出静态页面的中间件，类似于phantomjs,zimbile.js，只要发现是搜索引擎的蜘蛛来爬的话就返回静态页面。而Prerender.io就一个现成的工具。
Prerender.io 是一个兼容多种不同平台（包括Node，PHP和Ruby）的一个服务。该服务是完全开源的，但是如果你不想搭建一个你自己的SEO服务器的话，你可以使用他们提供的解决方案。Prerender的人们认为，SEO是一件正确的事，并不是一个特权，他们已经做了一些了不起的工作来扩展他们的解决方案，添加了很多自定义的功能和插件。
下面我们就来看看如何使用：
前端（客户端）配置
url中#的形式
在定义了AngularJS代码的app.js中，我们需要这句代码添加到我们的路由配置中：$locationProvider.hashPrefix('!'); 这个方法会重写你的URL。相对于标准的地址http://localhost:3000/#/home你的url地址看起来将会是类似http://localhost:3000/#!/home 的形式
如果你使用的是html5模式(html5Mode)，你不会看到任何区别。
URL里面的#!非常重要，因为它会告诉爬虫你的程序有AJAX内容，需要它做一下AJAX抓取转换。
angular.module('myApp').config([
'$locationProvider',
function($locationProvider) {
$locationProvider.hashPrefix('!');
}
]);
google等搜索引擎会识别带‘#!'的地址把它转变为‘?_escaped_fragment_=’。
比如，谷歌发现的地址
http://www.example.com/#!/user/123
它会向服务器发送这种请求
http://www.example.com/?_escaped_fragment_=/user/123
url中没有#的形式（采用html5 push state )
1.配置index.html
要在主页的<head>中<meta name="fragment" content="!">。这个meta标签将告诉搜索引擎的爬虫，这个网站有动态的JavaScript内容需要爬取。
<base href="/">
2.配置app.js
相比上边的配置会多一行代码。
angular.module('myApp').config([
'$locationProvider',
function($locationProvider) {
$locationProvider.hashPrefix('!');
$locationProvider.html5Mode(true);
}
]);
如果采用html5mode的形式，谷歌发现url后会在后边加上?_escaped_fragment_=
比如，谷歌发现的地址
http://www.example.com/user/123会发送这样的请求
http://www.example.com/user/123?_escaped_fragment_=
服务器端配置
首先在https://prerender.io 注册一个账号并获取token。
它的官网上有多种环境的配置，比如node.js、ruby、nginx、apache等等，这里就只说apahce的配置。
它提供的是.htaccess的配置文件，所以先确认是否已经启用.htaccess文件。然后在.htaccess文件中加入以下配置
<IfModule mod_headers.c> RequestHeader set X-Prerender-Token "your token" </IfModule> <IfModule mod_rewrite.c> RewriteEngine On # Don't rewrite files or directories RewriteCond %{REQUEST_FILENAME} -f [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^ - [L] <IfModule mod_proxy_http.c> RewriteCond %{HTTP_USER_AGENT} baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator [NC,OR] RewriteCond %{QUERY_STRING} _escaped_fragment_ # Only proxy the request to Prerender if it's a request for HTML RewriteRule ^(?!.*?(\.js|\.css|\.xml|\.less|\.png|\.jpg|\.jpeg|\.gif|\.pdf|\.doc|\.txt|\.ico|\.rss|\.zip|\.mp3|\.rar|\.exe|\.wmv|\.doc|\.avi|\.ppt|\.mpg|\.mpeg|\.tif|\.wav|\.mov|\.psd|\.ai|\.xls|\.mp4|\.m4a|\.swf|\.dat|\.dmg|\.iso|\.flv|\.m4v|\.torrent|\.ttf|\.woff))(.*) http://service.prerender.io/http://example.com/$2 [P,L] </IfModule> # Rewrite everything else to index.html to allow html5 state links RewriteRule ^ index.html [L] </IfModule>
要确保mod_headers、 mod_rewrite、mod_proxy_http三个模块都已经启用。
配置成功后在prerender.io的cached pages会有它缓存页面，这里也可以自己手动添加。
搜索引擎的抓取情况会这Crawl stats中反应出来。
接下来就看看网站的在各个搜索引擎的收录情况吧，google还是收录比较快的，百度都无力吐槽了实在太慢了，反正我配置好一个星期之内百度是一点反应都没有，不知道时间长了怎么样。
暂时先这样。
参考
https://prerender.io/js-seo/angularjs-seo-get-your-site-indexed-and-to-the-top-of-the-search-results/
https://scotch.io/tutorials/angularjs-seo-with-prerender-io
http://www.oschina.net/translate/angularjs-seo-with-prerender-io
