前后端分离项目采用Prerender的SEO优化流程

一、概述

　　近年开发模式变化，新建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输出日志