原文地址：https://xeblog.cn/articles/9

前言

我這個博客架構使用的是前后端分離的模式，前端項目獨立，后端提供數(shù)據(jù)接口，使用Ajax與服務器端接口交互，前端渲染接口返回的數(shù)據(jù)。這種模式非常不利于SEO優(yōu)化，因為獲取數(shù)據(jù)需要執(zhí)行js代碼，百度蜘蛛是執(zhí)行不了js的，所以就算百度收錄了我的博客，也不會有真實數(shù)據(jù)顯示，顯示的全是html里寫死的一些文字。PS:據(jù)說Google蜘蛛是可以執(zhí)行js的，但好像需要滿足一些條件，此處不做敘述（因為我也不會）

image

下面這張圖是未做優(yōu)化前Google收錄我網(wǎng)站時的信息

優(yōu)化前Google抓取的網(wǎng)站數(shù)據(jù)

如何優(yōu)化？

使用Prerender做預渲染
Prerender介紹請移步 https://prerender.io/

安裝Prerender

Prerender是一個基于Node.js的程序，安裝Prerender之前需要有Node.js環(huán)境。安裝Node.js的過程此處不做敘述。。。哈哈哈。。嗝。

安裝Prerender并啟動

沒有git環(huán)境的可以去這里把項目下載下來 下載地址

git clone https://github.com/prerender/prerender.git
cd prerender
npm install
#啟動server.js， 默認監(jiān)聽3000端口
node server.js

執(zhí)行下面的代碼，如果返回的是解析后的數(shù)據(jù)，恭喜你啟動成功了

curl http://localhost:3000/你的網(wǎng)站全路徑

image

Forever 守護進程

Node.js的程序在命令窗口關閉后會停止運行，我們需要將程序加入守護進程，讓它一直工作著。。。forever。。（一直工作真是太幸苦了，明年獎勵敬業(yè)福一張！哈哈哈）

forever 是個 what?

A simple CLI tool for ensuring that a given script runs continuously (i.e. forever).

安裝forever

詳細教程請移步 https://github.com/foreverjs/forever

npm install forever -g   #安裝
forever start server.js  #啟動應用
forever list  #顯示所有運行的服務 
forever stop server.js  #關閉應用
forever restartall  #重啟所有應用

我們只需進入到 prerender 根目錄下
使用 forever start server.js 命令就ok了
。。。這樣它就有敬業(yè)福了

image

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 你的網(wǎng)站全路徑 命令

如圖，沒有解析出真實數(shù)據(jù)

沒有解析出數(shù)據(jù)

Google蜘蛛訪問測試：使用 curl -H 'User-agent:Googlebot' 你的網(wǎng)站全路徑 命令

解析成功！

解析成功

文章地址REST風格

/articles/?id=xxx 這種風格的url對于蜘蛛們來說并不友好，它們喜歡這樣的 /articles/xxx

我是利用Nginx的rewrite重寫功能實現(xiàn)REST風格的。
主要配置如下

rewrite ^(.*)/articles/(\d+)$ /articles/?id=$2 break;

修改一下代理塊，讓蜘蛛訪問rest url的時候改變一下跳轉(zhuǎn)的url

/articles/xxx 訪問的其實還是 /articles/?id=xxx

利用Nginx的url重寫功能，將請求跳轉(zhuǎn)到真實地址，而瀏覽器的地址欄不會改變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;

測試一下

image

最終SEO效果

Google效果特別好，Google蜘蛛簡直太勤奮了，非常敬業(yè)！(PS:百度蜘蛛太懶了。。。我想這個問題充錢應該就能解決吧！)

網(wǎng)站信息已被收錄