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服务。我们先来看一看源码的目录:

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}; 这个问题便没有再出现。
angularjs应用prerender.io 搜索引擎优化实践的更多相关文章
- prerender.io 搜索引擎优化 部署成windows服务 实现开机自动开启服务
一 prerender.io服务端部署 参考官方网站的部署步骤: $ git clone https://github.com/prerender/prerender.git $ cd preren ...
- 磁盘IO性能优化-实践
RAID卡缓存策略调整 原因详解 操作实例 I/O 调度算法 文件系统journal 磁盘挂载参数 操作实例 性能数据对比 RAID卡缓存策略调整 可以将RAID卡缓存策略由No Write Cach ...
- Prerender.io - 预渲染架构,提高AngularJS SEO
近些年来,越来越多的JavaScript框架(即AngularJS,BackboneJS,ReactJS)变得越来越流行.许多公司和开发人员使用这些JavaScript框架开发应用程序.这些框架有很多 ...
- 知道吗?9个搜索引擎优化(SEO)最佳实践
作为网页设计师,搜索引擎优化重要吗?我们知道,网站设计是把屏幕上平淡无奇变成令人愉快的美感,更直观地辨认信息.这也是人与人之间在沟通想法,这样的方式一直在演变.穴居人拥有洞穴壁画,古埃及人有象形文字, ...
- 9个搜索引擎优化(SEO)最佳实践
作为网页设计师,搜索引擎优化重要吗?我们知道,网站设计是把屏幕上平淡无奇变成令人愉快的美感,更直观地辨认信息.这也是人与人之间在沟通想法,这样的方式一直在演变. 1. 网站结构 对于搜索引擎优化,网站 ...
- 使用Prerender.io为angular项目做SEO
现在的项目的为了更好的分工明确,降低耦合都开始采用前后端分离的形式进式开发,我们也采用这种开发形式,前端用angular开发.虽说刚开始也遇各种坑,但是后期熟悉了之后简直爽呆.一个比较大的坑就是SEO ...
- Glow Android 优化实践
了解 Glow 的朋友应该知道,我们主营四款 App,分别是Eve.Glow.Nuture和Baby.作为创业公司,我们的四款 App 都处于高速开发中,平均每个 Android App 由两人负责开 ...
- Unity3D游戏GC优化总结---protobuf-net无GC版本优化实践
protobuf-net优化效果图 protobuf-net是Unity3D游戏开发中被广泛使用的Google Protocol Buffer库的c#版本,之所以c#版本被广泛使用,是因为c++版本的 ...
- 长连接锁服务优化实践 C10K问题 nodejs的内部构造 limits.conf文件修改 sysctl.conf文件修改
小结: 1. 当文件句柄数目超过 10 之后,epoll 性能将优于 select 和 poll:当文件句柄数目达到 10K 的时候,epoll 已经超过 select 和 poll 两个数量级. 2 ...
随机推荐
- bzoj1013 [JSOI2008]球形空间产生器
Description 有一个球形空间产生器能够在n维空间中产生一个坚硬的球体.现在,你被困在了这个n维球体中,你只知道球面上n+1个点的坐标,你需要以最快的速度确定这个n维球体的球心坐标,以便于摧毁 ...
- VS2015如何新建C++或者C语言版的lib文件
当我们不想公开我们的代码的时候,可以把我们的代码封装成静态数据连接库,即lib文件.下面介绍下如何生成lib文件. 以VS2015为例,一种是C++版的lib文件,一种是C语言版的lib文件. 一.按 ...
- css 3d 基础知识
css3d 总结 3d transform (3D变形)(rotate skew scale translate) 基础知识 perspective (视距,景深) perspective-origi ...
- 调用Live555接收RTSP直播流,转换为Http Live Streaming(iOS直播)协议
Live555接收RTSP直播流,转换Http Live Streaming(iOS直播)协议 RTSP协议也是广泛使用的直播/点播流媒体协议,之前实现过一个通过live555接收RTSP协议,然后转 ...
- 为什么非全站升级HTTPS不可?
升级HTTPS已经是大势所趋,但仍有大量互联网企业犹豫是否要全站升级HTTPS,为此本文梳理了全站升级HTTPS与部分升级HTTPS的优劣势对比,来判断是否真的有必要进行全站HTTPS升级. HTTP ...
- php中for循环的应用
for 循环是 PHP 中最复杂的循环结构.它的行为和 C 语言的相似.在PHP中使用的是执行相同的代码集的次数. for 循环的语法是: for (expr1; expr2; expr3)state ...
- swift 取消UIButton选中高亮状态
objc可以用通过重写setHighlighted方法来达到当按钮选中时的高亮状态 -(void)setHighlighted:(BOOL)highlighted{ } swift中取消高亮状态 ov ...
- Mac上面Mov转gif
尝试了很多方法,后来发现这个网站转换的结果最好, http://ezgif.com/video-to-gif/
- 分布式版本控制git常见问题之gitignore冲突(精简版)
上次写的的太模糊了,现在简单直接写出个人心得,如下: 原因是有人提交了.gitignore里面的内容,所以和本地的不一样,这样就有问题,那么pull都不可以,所以要这样: git update-ind ...
- 前端设计技巧——用 Promise 处理交互和异步
本文仅表达前端的一些设计技巧,如果您在查阅js技术,请忽略此文! 前端开发经常会遇到这样的场景: 当满足一定条件时,需要弹出一个模态框,以便接收用户的输入.然后根据不同的输入,进行不用的操作. (ps ...