AngularJS SEO
我们知道Angular是MVC框架,页面内容是动态加载的,所以如果由搜索引擎的蜘蛛来爬的话,根本爬不出实际的东西,Prerender应运而生。你可以把它看成是一个能够读懂javascript的服务器端浏览器(Server-side browser),读懂js之后,它能够输出由js动态加载的页面内容,这给爬虫来看就正合适。业界最简单的方案是使用Prerender + nginx反向代理。这里以tomi.in为例介绍配置流程。
1. 搭建Prerender服务
实际上就是搭建了一个Prerender服务器,给它传递参数,它帮你把JS动态页面静态化.
git clone https://github.com/prerender/prerender.git
然后cd Prerender
进入目录npm install
安装模块依赖node server.js
运行服务(可用nohup node server.js &
使其运行于后台)
这里有一个坑,Prerender默认用3000端口,注意你的端口不要被占用了,否则它会给出很奇怪的错误提示.
2. 修改nginx.conf
要达到以下目的:
- 普通用户访问,会看到正常页面(交给localhost:4000去处理请求)
- 如果是爬虫访问,就交给Prerender服务去处理请求
因此,修改nginx.conf的server段如下:
server {
listen 80;
server_name www.tomi.in tomi.in;
location ~* / {
set $prerender 0;
if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot") {
set $prerender 1;
}
if ($args ~ "_escaped_fragment_") {
set $prerender 1;
}
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)") {
set $prerender 0;
}
if ($prerender = 1) {
rewrite .* /$scheme://$host$request_uri? break;
proxy_pass http://localhost:3000;
}
if ($prerender = 0) {
proxy_pass http://localhost:4000;
}
}
}
这里做了两件事:
- 如果是搜索引擎爬虫(header判断)或者有指定的参数
_escaped_fragment_
那么就反向代理给内部的Prerender服务(localhost:3000),让它去渲染页面 - 如果是真实的用户,就走正常渠道(localhost:4000)
3. Demo
嗯,之前给过demo,但现在处于安全性的考虑,大家还是直接在百度搜索site:h7sc.com
好了。
来源:oschina
链接:https://my.oschina.net/u/1449708/blog/348259