一、概述
近年开发模式变化，新建Web站点采用前后端分离部署已经是大势所趋。但是，搜索引擎爬虫不会执行js脚本从后端加载数据，不利于搜索引擎对站点的收录。因此，做好SEO优化可以让各大搜索引擎更好的收录Web站点。
本文将以我的个人博客 （CentOS7.6 Nginx环境）为例来谈一下使用Prerender为前后端分离项目做SEO优化的操作流程。
个人博客站点部署架构图
从上面的部署架构图可以看到本站点是浏览器前端渲染的，传统的搜索引擎无法抓取到页面数据，如下图：
做SEO优化前抓取首页
二、Prerender介绍与环境安装
Prerender采用预渲染方式解决SEO问题，可以极大的提高网页访问速度。
Prerender是一个基于Node.js的程序，所以安装Prerender之前需要有Node.js环境。同时，由于Prerender本身并不执行js，而是使用谷歌浏览器来完成页面渲染，所以需要安装google-chrome。
1、安装google-chrome
配置yum源，/ect/yum.repos.d/目录增加google-chrome.repo文件，并写入以下内容：
[google-chrome] name=google-chrome baseurl=http://dl.google.com/linux/chrome/rpm/stable/$basearch enabled=1 gpgcheck=1 gpgkey=https://dl-ssl.google.com/linux/linux_signing_key.pub
执行安装命令 yum -y install google-chrome-stable –nogpgcheck
安装完后默认路径为 /opt/google/chrome
修改/usr/bin/google-chrome文件，最后一行改为 exec -a "$0""$HERE/chrome" "$@" --user-data-dir --no-sandbox
（注：正常情况下google是不能用root用户启动的，修改此处之后可使用root用户启动）
检查/usr/bin目录下是否有google-chrome文件，如果没有，需要创建链接，执行命令 ln /opt/google/chrome/google-chrome/usr/bin/google-chrome
（注：Prerender在Linux环境默认的谷歌浏览器位置/usr/bin/google-chrome）
2、安装Node.js环境
下载nodejs地址 https://nodejs.org/en/download/
将下载的node-v12.16.1-linux-x64.tar.xz文件上传到Linux服务器/usr/local目录
解压命令 tar –xvf node-v12.16.1-linux-x64.tar.xz
修改文件夹名称 mv /usr/local/node-v12.16.1-linux-x64 /usr/local/
检查nodejs是否安装成功 node –v
安装淘宝镜像cnpm npm install-g cnpm --registry=https://registry.npm.taobao.org
将/usr/local/nodejs/bin目录下的3个文件创建连接到/usr/local/bin/目录，如创建cnpm连接 ln -s /usr/local/nodejs/bin/cnpm /usr/local/bin/
3、安装Prerender 服务
下载Prerender git clone https://github.com/prerender/prerender.git
若没有安装git服务，可手动从Github下载再上传到/mnt文件夹下，再解压到当前目录下
安装依赖包 cnpm install
启动服务 node server.js
（注：以守护进程方式启动服务 nohup nodeserver.js > ../logs/prerender.log 2>&1 &，避免ssh对话窗口关闭导致服务关闭）
三、SEO优化
1、Nginx配置
server {
listen 80;
server_name blog.ccyws.cn;
set$prerender_url \'http://127.0.0.1:3000\';
location/ {
set $prerender 0;
if ($http_user_agent ~*"baiduspider|Googlebot|360Spider|Bingbot|Sogou Spider|Yahoo! SlurpChina|Yahoo! Slurp|twitterbot|facebookexternalhit|rogerbot|embedly|quora linkpreview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
set $prerender 1;
}
if ($prerender = 1) {
proxy_pass $prerender_url;
rewrite ^(.*)$ /http://$host$1break;
}
root /mnt/blog/blog;
index index.html;
try_files $uri $uri/ /index.html;
}
}
重启Nginx nginx –s reload
2、验证SEO优化
curl --header "User-agent:Bingbot" http://blog.ccyws.cn
做SEO优化后抓取首页
Prerender输出日志
Nginx输出日志
