一、概述
近年開發模式變化，新建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輸出日志
