Vue Prerender.io 預渲染seo優化

前言

---

目前 Vue單頁面應用在前端界混的風生水起，它的開發思想使得咱們能真正作到先後端分離、解耦。單頁面應用使用瀏覽器動態解析JS，呈現出最終的頁面，用戶體驗比較好，網站性能也提升很多。但網絡爬蟲並不會動態解析Js，因此訪問全部未處理的單頁面應用URL獲得的只會是項目入口（index.html）文件中的代碼，不能獲得具體的內容，對Seo的優化極其的不友好。爲了優化項目Seo，目前主要有兩個方案：服務端渲染(Server Side Rendering)、預渲染(Prerending)。

本文主要介紹預渲染方案中運用prerender服務方式解決Vue單頁面Seo問題

預渲染的兩種方式

---

1. prerender-spa-plugin：

   這個插件是一個webpack插件，此方式會在項目構建（npm run build）時將項目按路由打包成相對應的html靜態文件。所以，僅有以下項目類型適用。

   • 路由是靜態的，且非海量路由
   • 頁面內容不須要使用ajax獲取並展現內容

2. prerender：此服務在頁面渲染的時，將會直接取代網站後端對爬蟲請求進行響應，將提早渲染後靜態頁面直接返回給爬蟲，由於此服務做用在頁面渲染時，因此再也不受方式1那些路由限制。

prerender 的使用

---

一、安裝

npm install prerender
複製代碼

二、啓動服務 server.js

const prerender = require('prerender');
const server = prerender();
server.start();
複製代碼

三、測試

http://localhost:3000/render?url=https://www.example.com/
複製代碼

此時，你已經啓動了一個prerender服務，並返回了https://www.example.com/的內容，此時頁面上所看到的https://www.example.com/內容是經過prerender服務提早渲染成靜態頁面後返回的。服務默認運行在3000端口，能夠參考prerender文檔進行默認修改。

prerender中間件的使用

---

咱們所理想的渲染模式是：當普通用戶訪問時不須要經過prerender服務提早渲染，而經過js動態渲染；當爬蟲訪問頁面時，經過prerender服務提早將頁面渲染爲靜態頁面供爬蟲爬取。

那麼如何能實現上面的需求呢？
複製代碼

不過還好，對於這樣的需求prerender提供了對應的中間件：prerender-node (Express)、prerender_rails(Rails) 、.htaccess(Apache)、nginx.conf等，可參考prerender文檔中Middleware模塊文檔進行了解，筆者使用的是prerender-node (Express)node中間件。具體的配置修改以下：

一、安裝

在Express下安裝

npm install prerender-node --save
複製代碼

二、修改app.js配置

var prerender = require('prerender-node')
app.use(
  prerender
    //爬蟲訪問轉發到prerender服務進行預渲染
    .set("prerenderServiceUrl", "http://localhost:3000/")
    //普通用戶訪問直接訪問項目地址不進行預渲染
    .set("host", "wwww.xxxx.com")
);
複製代碼

三、重啓Express服務

注意事項：

• 第2步修改配置代碼要置於Express路由分發以前；即下列代碼以前

  app.use("/", indexRouter);
  app.use("/users", usersRouter);
  複製代碼

• 修改app.js配置時候項目地址www.xxxx.com不要帶http://

測試

---

安裝好prerender服務以及prerender中間件後prerender預渲染算是大功告成了，下面介紹測試方法。

測試原理： 添加谷歌瀏覽器Emulated devices模擬爬蟲訪問，具體實現以下：

---

1.打開谷歌瀏覽器開發者工具。

2.點擊（進入手機編輯模式）按鈕，如圖

3.點擊選擇模擬設備下拉選擇，選擇最後一個Edit...,將進入以下圖。

4.點擊Add custom device 按鈕

5其中User agent string 填寫: Mozilla/5.0 (compatible; Baiduspider/2.0;+http://www.baidu.com/search/spider.html）其餘如圖，

6.點擊保存。

7.點擊選擇模擬設備下拉選擇，選擇新添加的模擬百度爬蟲

通過以上7步，你瀏覽器能模擬爬蟲訪問，此時打開瀏覽器控制檯network篩選doc類型，刷新頁面，能看到頁面返回是通過編譯後的靜態文件。

選擇其餘非爬蟲模式Emulated devices或不打開Emulated device調試模式，刷新頁面，能看到頁面返回是經過js動態解析的。

總結

---

配置prerender整體思路：經過prerender中間件判斷是不是爬蟲訪問頁面，若是是爬蟲訪問則轉發給prerender服務進行提早編譯，不然直接返回js動態渲染頁面。

其餘Vue單頁面seo優化能夠參考：Vue單頁項目SEO徹底指南