angularjs应用prerender.io 搜索引擎优化实践
上一篇博文(http://www.cnblogs.com/ideal-lx/p/5625428.html)介绍了单页面搜索引擎优化的原理,以及介绍了两个开源框架的优劣。prerender框架的工作原理在上篇也有介绍,本片博文主要介绍prerender.io的部署实践过程。其实部署的过程还是比较简单的,阅读原网站可以直接移步:https://github.com/prerender/prerender。
一、支持google优化方案
上篇文也有提到,谷歌提出了自己的一套针对ajax页面的抓取方案,prerender在这里同样对其做了支持。使用起来很简单:
1、添加<meta name="fragment" content="!">标签在每个主页面的header内。
2、如果url中含有#,将它们变成#!(hash-bang)的形式.
关于上面第二点,angular的api $locationProvider.hashPrefix('!');即可使url变成hash-bang形式。
二、prerender.io服务端部署
prerender官方提供了云服务,获取tocken后便可以配置使用。不过我们这里不想使用官方的服务,选择自己搭建自己的可控prerender服务,当然,最好使用linux机器作为服务器。过程也非常简单,上篇介绍,prerender服务是一个持续在跑的node服务,负责接收client转发过来的请求,然后再请求web服务,获得html、js等静态文件后执行并继续请求后续ajax请求。首先要在服务器上安装node运行环境,执行以下步骤即可安装部署prerender服务:
$ git clone https://github.com/prerender/prerender.git
$ cd prerender
$ npm install
$ node server.js
过程中会安装phantomjs,最后一步“node server.js”便启动了prerender服务。我们先来看一看源码的目录:
![](https://images2015.cnblogs.com/blog/896185/201607/896185-20160704223450514-1579392360.png)
http://localhost:3000/http://www.yourwebsite.com
看到这里就清楚了,其实就是把咱们页面的url当做参数传给prernder服务,就可以了。如果是在另外的主机,同样可以访问 http://prerender服务的地址:监听端口号/需要渲染的页面url,即可看到通过prerender.io渲染后的页面。如果有条件的话可以通过本地爬虫访问此url,你会发现所有的动态数据也可以同样得到。如果你担心你的prerender服务会异常崩溃,可以安装forever指令,使用forever指令用守护进程的方式启动prerender服务,类似于这样:forever start -l prerender.log --spinSleepTime 5000 --minUptime 5000 /usr/local/prerender-linux/server.js 进一步的,你可以将启动指令写入linux启动文件中,做重启的自启动。到这里prerender服务基本上就搭建成功了。
三、prerender.io客户端部署
prerender提供了非常丰富的客户端实现方案,包括node、Ruby、Apache、Nginx、Java、Go、Grails等等官方非官方方案,上面git的连接即可以查到各个方案的部署方式。笔者的应用是前后端分离使用nginx做静态资源容器的环境,这里介绍一下nginx的部署方案,以下是官方提供的nginx.conf 的配置文件:
server { | |
listen 80; | |
server_name example.com; | |
root /path/to/your/root; | |
index index.html; | |
location / { | |
try_files $uri @prerender; | |
} | |
location @prerender { | |
set $prerender 0; | |
if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") { | |
set $prerender 1; | |
} | |
if ($args ~ "_escaped_fragment_") { | |
set $prerender 1; | |
} | |
if ($http_user_agent ~ "Prerender") { | |
set $prerender 0; | |
} | |
if ($uri ~ "\.(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)") { | |
set $prerender 0; | |
} | |
#resolve using Google's DNS server to force DNS resolution and prevent caching of IPs | |
resolver 8.8.8.8; | |
if ($prerender = 1) { | |
#setting prerender as a variable forces DNS resolution since nginx caches IPs and doesnt play well with load balancing | |
set $prerender "192.168.1.168:3000*"; | |
rewrite .* /$scheme://$host$request_uri? break; | |
proxy_pass http://$prerender; | |
} | |
if ($prerender = 0) { | |
rewrite .* /index.html break; | |
} | |
} | |
} |
下面对相关参数做简单介绍:
listen:监听端口号,根据项目实际情况而定。
server_name:监听的域名。
root :默认首页的路径。
index:默认的首页页面。
location @prerender 下依次是对:userAgent的配置、可根据需要自行添加;_escaped_fragment_符号的过滤;prerender自己爬虫请求的排除;不需要抓取的文件类型配置,可自行添加。
然后下面 如果$prerender 变量为1,就把请求定向到prerender服务所在的地址。
四、缓存的设置
prerender提供了丰富的缓存机制,用来存储已抓取的页面,当下次同样的页面抓取请求再来的时候prerender便可以命中缓存返回给爬虫。笔者使用的是levelDB的缓存,安装可查看https://github.com/maxlath/prerender-level-cache,需要安装一个node外壳的levelDB数据库,供prerender服务插件调用。插件的启用方法,就是在server.js里server.use(require('prerender-level-cache'));
即可。
另外在生产环境测试的时候,笔者遇到一个问题,就是pererender服务跑了一段时间之后,爬虫过来的请求有些会返回304状态码回去,这样的话爬虫是收不到页面数据的。304是http协议做缓存控制的状态码,返回304意味着服务端认为请求方拥有最新的缓存。我解决这个问题的方式是又开启了一次phantomjs的本地缓存,在prerender服务的lib\server.js里server.createPhantom方法内将phantomjs的启动参数改为:var args = {'--load-images': false, '--ignore-ssl-errors': true, '--ssl-protocol': 'tlsv1.2','--disk-cache':true}; 这个问题便没有再出现。