單頁面的SEO優化：在vue中使用prerender-spa-plugin
之前上線了一個使用vue做的單頁面應用。google倒是可以爬取js執行的資料了，很快就收錄了我的站點，但是百度還不行，很多天了百度依舊沒有收錄我的網站，只好針對該網站做做SEO處理。順便給我的這個小站打個廣告：https://www.pkgif.net （給GIF自由新增字幕生成表情包的小工具）
單頁面應用主要有兩種SEO的方式
- 服務端渲染
這是比較常見的模式，比如vue和react等都提供了服務端渲染的方式，還能使用nuxt和next這樣將服務端渲染整合得更簡單的框架。或者將vue集成於express、koa、egg等nodejs的web框架進行服務端渲染也是可行的，也有現成的方案。
- 預渲染
如果你調研伺服器端渲染(SSR)只是用來改善少數營銷頁面（例如 /, /about, /contact 等）的 SEO，那麼你可能需要預渲染。無需使用 web 伺服器實時動態編譯 HTML，而是使用預渲染方式，在構建時(build time)簡單地生成針對特定路由的靜態 HTML 檔案。優點是設定預渲染更簡單，並可以將你的前端作為一個完全靜態的站點。
這是vue官方文件中的一段話。如果只是少量頁面需要進行SEO優化且這些頁面的資料不復雜不需要很高的實時性，是不大必要使用服務端渲染的。可以將這些頁面在webpack打包的時候利用瀏覽器環境來執行js生成一個靜態的html。
由於我的小站只有一個頁面，且這個頁面的內容都是死的，預渲染是我當下較好的解決方案。這裡我選用了vue官方推薦的webpack外掛——
安裝
$ npm i prerender-spa-plugin
該外掛依賴puppeteer，這是一個呼叫chrome API的庫。在安裝的過程中，puppeteer會下載chromium（提供瀏覽器環境），這時候國內的網路會報錯，因為你懂的。
npm config set PUPPETEER_DOWNLOAD_HOST= 這樣我們就可以成功安裝prerender-spa-plugin
在linux上，npm安裝的時候可能會出現沒有許可權mkdir，使用sudo安裝即可
使用
注意：首先需要將vue-router設定為history模式，否則預渲染無效。
我們在生產構建的時候才需要該外掛進行預渲染，所以需要在prod相關的配置裡新增該外掛
// webpack.prod.js
'use strict';
const webpack = require('webpack');
const helpers = require('./helpers');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const path = require('path');
module.exports = {
plugins: [
...
new PrerenderSPAPlugin({
staticDir: helpers.root('webapp'),
outputDir: helpers.root('webapp-prerender'),
routes: [ '/' ],
minify: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
decodeEntities: true,
keepClosingSlash: true,
sortAttributes: true,
},
}),
],
});
這是我的程式碼片段，helpers.root是工程根目錄的路徑，
- staticDir：原本build的靜態資源目錄。入口html一定要為index.html，如果不是還需要另外配置一個引數indexPath指明入口html
- outputDir：預渲染生成的html的目錄，如果不設定的話和staticDir一致
- routes：需要預渲染的路由
- minify：一些html壓縮的配置
構建之後，就會產生兩個新的資料夾，一個是webapp，一個是webapp-prerender。
注意：在centos 7.x上，即使prerender-spa-plugin安裝成功，在構建的時候也會報錯，缺少一些檔案，這時候需要手動安裝一些依賴的檔案
#依賴庫
yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 -y
#字型
yum install ipa-gothic-fonts xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc -y
nginx配置
location / {
index index.html;
expires max;
root ${staticDir};
try_files $uri $uri/ /index.html;
if ( $http_user_agent ~* (baidu|360|google|bing|sogou|soso|youdao|jike|yahoo|msn)){
root ${outputDir};
}
}
靜態資源是託管在nginx上的，這裡通過userAgent將搜尋引擎判斷，讀取webapp-prerender資料夾下的，而普通使用者使用還是在webapp下的SPA靜態資源
採用postman進行簡單的測試
- 普通使用者的訪問
2.百度搜索引擎的訪問
