原文地址：/articles/9
前言
我这个博客架构使用的是前后端分离的模式，前端项目独立，后端提供数据接口，使用Ajax与服务器端接口交互，前端渲染接口返回的数据。这种模式非常不利于SEO优化，因为获取数据需要执行js代码，百度蜘蛛是执行不了js的，所以就算百度收录了我的博客，也不会有真实数据显示，显示的全是html里写死的一些文字。PS:据说Google蜘蛛是可以执行js的，但好像需要满足一些条件，此处不做叙述（因为我也不会）
下面这张图是未做优化前Google收录我网站时的信息
如何优化？
使用Prerender做预渲染 Prerender介绍请移步 prerender.io/
安装Prerender
Prerender是一个基于Node.js的程序，安装Prerender之前需要有Node.js环境。安装Node.js的过程此处不做叙述。。。哈哈哈。。嗝。
安装Prerender并启动
没有git环境的可以去这里把项目下载下来 下载地址
git clone /prerender/prerender.gitcd prerendernpm install#启动server.js， 默认监听3000端口node server.js复制代码
执行下面的代码，如果返回的是解析后的数据，恭喜你启动成功了
curl http://localhost:3000/你的网站全路径复制代码
Forever 守护进程
Node.js的程序在命令窗口关闭后会停止运行，我们需要将程序加入守护进程，让它一直工作着。。。forever。。（一直工作真是太幸苦了，明年奖励敬业福一张！哈哈哈）
forever 是个 what?
A simple CLI tool for ensuring that a given script runs continuously (i.e. forever).
安装forever
详细教程请移步 /foreverjs/f…
npm install forever -g #安装forever start server.js #启动应用forever list #显示所有运行的服务 forever stop server.js #关闭应用forever restartall #重启所有应用复制代码
我们只需进入到prerender根目录下 使用forever start server.js命令就ok了 。。。这样它就有敬业福了
Nginx配置
我们需要对百度、Google之类的蜘蛛请求做单独处理，让请求代理到 prerender，而对于普通用户的请求则直接访问原地址
主要配置如下
location / {# 表示是否需要代理set $prerender 0;# 代理地址set $prerender_url "http://127.0.0.1:3000";# 判断请求是否来自蜘蛛，如果是则表示需要代理if ($http_user_agent ~* "baiduspider|Googlebot|360Spider|Bingbot|Sogou Spider|Yahoo! Slurp China|Yahoo! Slurp|twitterbot|facebookexternalhit|rogerbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {set $prerender 1;}if ($prerender = 1) {proxy_pass $prerender_url;rewrite ^(.*)$ /https://$host$1 break;}}复制代码
配置好后，使用nginx -s reload重载配置文件
稍后我们测试一下效果
测试
正常用户访问测试：使用curl 你的网站全路径命令
如图，没有解析出真实数据
Google蜘蛛访问测试：使用curl -H 'User-agent:Googlebot' 你的网站全路径命令
解析成功！
文章地址REST风格
/articles/?id=xxx 这种风格的url对于蜘蛛们来说并不友好，它们喜欢这样的 /articles/xxx
我是利用Nginx的rewrite重写功能实现REST风格的。 主要配置如下
rewrite ^(.*)/articles/(\d+)$ /articles/?id=$2 break;复制代码
修改一下代理块，让蜘蛛访问rest url的时候改变一下跳转的url
/articles/xxx 访问的其实还是 /articles/?id=xxx
利用Nginx的url重写功能，将请求跳转到真实地址，而浏览器的地址栏不会改变url
# 蜘蛛访问处理if ($prerender = 1) {proxy_pass $prerender_url;rewrite ^(.*)/articles/(\d+)$ /https://$host/articles/?id=$2 break;rewrite ^(.*)$ /https://$host$1 break;}#正常用户访问REST地址的处理rewrite ^(.*)/articles/(\d+)$ /articles/?id=$2 break;复制代码
测试一下
最终SEO效果
Google效果特别好，Google蜘蛛简直太勤奋了，非常敬业！(PS:百度蜘蛛太懒了。。。我想这个问题充钱应该就能解决吧！)
