SPA單頁面應用、前後端分離專案SEO優化的方法

xeblog發表於2019-03-04

原文地址：https://xeblog.cn/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 https://github.com/prerender/prerender.git
cd prerender
npm 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

詳細教程請移步 github.com/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;
複製程式碼