博客添加SEO
本博客的前段是AngularJS的,所以内容都是通过JS动态渲染的。我也在Google的Webmaster上提交了我的网站,内容一直没有被检索到。搜索site:www.race604.com
只有一条内容。
搜索了一下angularjs seo indexing,发现Google的爬虫并不能很好检索JS渲染的网页,大牛门建议把网页静态化,专门给爬虫抓取。而且还有很多这样的服务的提供方,专门静态化缓存你的AngularJS网页。我这里就选择了Prerender.io来解决。 原理是Google爬虫在抓去AngularJS的网站的时候,遇到#!
这样的URL,会自动替换为?_escaped_fragment_=
。例如本来访问的是: http://www.race604.com/#!/articles
实际上被替换为了http://www.race604.com/?_escaped_fragment_=/articles
。我们就可以把?_escaped_fragment_=
这样的URL,路由到一个静态的缓存网页上去。
使用Caching服务
Prerender本身是一个开源的项目,也提供Caching服务。使用的是如下: * 在Prerender注册,获得一个token; * 在Server端添加代码 app.use(require('prerender-node').set('prerenderToken', 'token')); * 在网站上添加你要Cache的网页URL
免费的版本提供缓存250个页面,对我目前来说显然也是足够的了,但是问题每次新加一个博文,都要去添加一个缓存页面,操作起来有点麻烦。
自己搭建Prerender服务
Prerender也可以自己搭建一个服务。主要是参考篇文章AngularJS SEO简易教程。我的操作步骤如下: 1. 下载代码: git clone https://github.com/prerender/prerender.git
2. 安装依赖模块: cd prerender; npm install
3. 修改默认端口为4000,否这原来的端口3000,会和博客的Express.js的端口冲突。在lib/index.js
中修改
4. 配置ngix:
sudo vim /etc/nginx/sites-available/default
修改如下:
server {
listen 80;
server_name www.race604.com;
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;
}
}
}
5. 重启ngix:sudo service nginx restart
6. 访问http://www.race604.com/?escapedfragment_=/articles,搞定