SPA單頁面應用、先後端分離項目SEO優化的方法

時間 2019-11-29

原文原文鏈接

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

前言

我這個博客架構使用的是先後端分離的模式，前端項目獨立，後端提供數據接口，使用Ajax與服務器端接口交互，前端渲染接口返回的數據。這種模式很是不利於SEO優化，由於獲取數據須要執行js代碼，百度蜘蛛是執行不了js的，因此就算百度收錄了個人博客，也不會有真實數據顯示，顯示的全是html裏寫死的一些文字。PS:聽說Google蜘蛛是能夠執行js的，但好像須要知足一些條件，此處不作敘述（由於我也不會）前端

下面這張圖是未作優化前Google收錄我網站時的信息node

如何優化？

使用Prerender作預渲染 Prerender介紹請移步 prerender.io/nginx

安裝Prerender

Prerender是一個基於Node.js的程序，安裝Prerender以前須要有Node.js環境。安裝Node.js的過程此處不作敘述。。。哈哈哈。。嗝。git

安裝Prerender並啓動github

沒有git環境的能夠去這裏把項目下載下來下載地址npm

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).bash

安裝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;
複製代碼