在開始之前，我們先來了解一下什麼是SEO。
SEO（Search Engine Optimization）：漢譯爲搜索引擎優化。是一種方式：利用搜索引擎的規則提高網站在有關搜索引擎內的自然排名。目的是讓其在行業內佔據領先地位，獲得品牌收益。很大程度上是網站經營者的一種商業行爲，將自己或自己公司的排名前移。
說白了就是你的SEO做的越好，當別人搜索某個關鍵詞時，你的網站在搜索結果中就排的越靠前。這是我的網站，有時排在第一，有時第二。
我的網站： www.dzyong.top
公衆號： 《前端筱園》
普通的一個前端網站可以通過哪些地方來做優化呢？
1.合理的title、description、keywords
<title>鄧佔勇的博客</title>
<meta name="description" content='鄧佔勇，一名前端工程師，這是我的個人博客，主要分享前端但不限於前端技術。公衆號《前端校園》'>
<meta name="keywords" content="個人博客,鄧佔勇,前端,技術,WEB,blog,BLOG,搭建博客,前端技術,VUE博客,鄧佔勇的博客">
<meta name="anthor" content="鄧佔勇,[email protected]">
<meta name="robots" content="博客,前端,blog,個人博客,鄧佔勇,Yong,鄧佔勇的博客,《前端校園》,公衆號,web,VUE">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
title，description，keywords他們的權重逐漸減小。
- title 就是我們看到的網頁標題
- description 爲對該網頁的簡要描述
- keywords 的作用就是告訴搜索引擎，本網頁中主要圍繞着哪些方面的關鍵詞展開
2.語義化的HTML代碼，符合W3C規範
多使用語義化的HTML標籤，什麼叫語義化標籤，說白了就是對號入座，不要什麼地方都永遠是div，span。HTML5中提供了很多語義化的標籤，比如<header></header>,<footer></footer>,<nav></nav>,<aside></aside>,<section></section>等
3.非裝飾性圖片必須加alt
<img> 標籤的 alt 屬性指定了替代文本，用於在圖像無法顯示或者用戶禁用圖像顯示時，代替圖像顯示在瀏覽器中的內容。對於非裝飾性圖片必須添加alt，非裝飾性圖片是指除了那些作爲元素背景圖的圖片。
alt可以增強內容相關性，提高關鍵詞密度
4友情鏈接
友鏈就是在你的網站和別人的網站上相互放上對方的網站超鏈接，通過點擊鏈接可以調到對方的網站上。 友情鏈接是網站流量來源的根本，比如一種可以自動交換鏈接的友情鏈接網站（每來訪一個IP，就會自動排到第一），這是一種創新的自助式友情鏈接互聯網模式。
5.外鏈
外鏈就是指在別的網站導入自己網站的鏈接。導入鏈接對於網站優化來說是非常重要的一個過程。導入鏈接的質量（即導入鏈接所在頁面的權重）間接影響了我們的網站在搜索引擎中的權重。
6.向各大搜索引擎提交收錄自己的站點
搜索引擎收錄了你的網站後，會很大程度上提升網站的排名。下面是常見搜索引擎的收錄入口：
百度提交入口：https://ziyuan.baidu.com/linksubmit/url
Google提交入口：http://www.google.com/addurl/?hl=zh-CN&continue=/addurl
360提交入口：http://info.so.360.cn/site_submit.html
搜狗提交入口：http://fankui.help.sogou.com/index.php/web/web/index?type=1
必應提交入口：https://www.bing.com/toolbox/webmaster
7.重要的內容放在前面
搜索引擎抓取是自上而下進行的，把主要的關鍵性的內容放在前面，可以保證所抓取的內容更符合或代表網站的特徵。
8.其他
- 少用iframe：iframe中的內容是不會被抓取到的
- 提高網站速度：這也是搜索引擎排序的一個重要指標
- 流量：訪問你的網站的人越多，排名也會越靠前
如何對VUE進行SEO優化？
說了這麼多SEO的優化方式，爲什麼還要把VUE的SEO優化提出來說呢。
這與VUE的本質相關，VUE是一個SPA應用，就是隻有一個Web頁面的應用，是加載單個HTML頁面，並在用戶與應用程序交互時動態更新該頁面的Web應用程序。
爲什麼說VUE不利於SEO，SEO本質是一個服務器向另一個服務器發起請求，解析請求內容。但一般來說搜索引擎是不會去執行請求到的js的。也就是說，如果一個單頁應用，html在服務器端還沒有渲染部分數據數據，在瀏覽器才渲染出數據，而搜索引擎請求到的html是沒有渲染數據的， 所以就很不利於內容被搜索引擎搜索到。
現在主要採用的有以下四種方式：
- SSR服務器渲染；
- 靜態化；
- 預渲染prerender-spa-plugin；
- 使用Phantomjs針對爬蟲做處理。
1. SSR服務器渲染
服務端渲染就是儘量在服務器發送到瀏覽器前就將頁面渲染到頁面上。
Vue.js 是構建客戶端應用程序的框架。默認情況下，可以在瀏覽器中輸出 Vue 組件，進行生成 DOM 和操作 DOM。然而，也可以將同一個組件渲染爲服務器端的 HTML 字符串，將它們直接發送到瀏覽器，最後將這些靜態標記"激活"爲客戶端上完全可交互的應用程序。
服務器渲染的 Vue.js 應用程序也可以被認爲是"同構"或"通用"，因爲應用程序的大部分代碼都可以在服務器和客戶端上運行。
詳細操作可以見官網：https://ssr.vuejs.org/zh/
2. 靜態化
這裏用到的是Nuxt.js框架，官方是這樣介紹的。從頭搭建一個服務端渲染的應用是相當複雜的。幸運的是，我們有一個優秀的社區項目 Nuxt.js 讓這一切變得非常簡單。Nuxt 是一個基於 Vue 生態的更高層的框架，爲開發服務端渲染的 Vue 應用提供了極其便利的開發體驗。更酷的是，你甚至可以用它來做爲靜態站生成器。推薦嘗試。
詳細操作可以見官網：https://zh.nuxtjs.org/
3. 預渲染prerender-spa-plugin
如果你只是用來改善少數頁面的 SEO，那麼你可能需要預渲染。無需使用 web 服務器實時動態編譯 HTML，而是使用預渲染方式，在構建時 (build time) 簡單地生成針對特定路由的靜態 HTML 文件。優點是設置預渲染更簡單，並可以將你的前端作爲一個完全靜態的站點。
這裏就詳細的講解下如何在VUE-CLI3的項目中使用prerender-spa-plugin。
安裝
cnpm install prerender-spa-plugin --save
在VUE-CLI3的項目中調整 webpack 配置最簡單的方式就是在 vue.config.js 中的 configureWebpack 選項提供一個對象。
官方文檔：https://cli.vuejs.org/zh/guide/webpack.html
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}
如果你需要基於環境有條件地配置行爲，或者想要直接修改配置，那就換成一個函數 (該函數會在環境變量被設置之後懶執行)。該方法的第一個參數會收到已經解析好的配置。在函數內，你可以直接修改配置，或者返回一個將會被合併的對象：
// vue.config.js
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 爲生產環境修改配置...
} else {
// 爲開發環境修改配置...
}
}
}
有了基礎知識就來開始實踐
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const path = require('path')
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV !== 'production') return;
return {
plugins: [
new PrerenderSPAPlugin({
//網頁包的路徑將應用程序輸出到prerender
staticDir: path.join(__dirname,'dist'),
//Routes to render 對應自己router
routes: ['/', '/home','/blog','/aboutMe','/message'],
renderer: new Renderer({
inject: {
foo: 'bar'
},
//渲染時顯示瀏覽器窗口。對調試有用。
headless: false,
// // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對應上。
renderAfterDocumentEvent: 'render-event'
})
}),
],
};
}
}
在main.js中添加如下內容
new Vue({
router,
store,
render: h => h(App),
//這裏與vue.config.js中的事件名相對應
mounted () {
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')
最後有點一定要注意，router中必須是history模式。
好了，到這裏就已經配置完了，只需要和傳統的打包方式一樣打包就可以，打包的過程中會看到瀏覽器自動打開許多頁面然後自動關閉，這就是打包的過程。
npm run build
打開打包後的dist文件夾，會看到如傳統的結構不一樣，傳統的只有以下內容
但是現在你看到的會比之前多幾個文件夾，多的文件夾正是你配置的那幾個路由，每個文件夾中都是一個index.html文件。原本只有一個index.html的單頁應用現在變成了多頁應用，這也就提升了你的網頁被抓取的概率。
在本地打開打包後的index.html是看不到內容的，需要上傳到服務器上纔可以。
到這裏我們還可以繼續優化，雖然現在已經成了多個頁面，但是每個頁面的title，description，keywords都是一樣的，這也往往不符合實際，畢竟每個頁面都有自己的主題內容。
那麼我們可以針對每個頁面對他們的meta-info分別設置，這裏可以使用vue-meta-info插件。
安裝：
npm install vue-meta-info --save
引用，在main.js中
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
在你需要的頁面中使用
export default {
metaInfo:{
title: 'message',
meta: [
{
name: 'description',
content: '這是Message頁面',
},
{
name: 'keywords',
content: 'message'
}
]
},
data(){
return {
}
},
}
可以看到頁面的head的關鍵信息已經更改
當然你也可以寫成函數的形式來動態修改
export default {
metaInfo() {
return {
title: this.title,
meta: [
{
name: "關鍵詞",
content: "關鍵字"
}
]
};
},
data() {
return {
title: "我是動態更新的標題"
};
},
};
4.使用Phantomjs針對爬蟲做處理
Phantomjs是一個基於webkit內核的無頭瀏覽器，即沒有UI界面，即它就是一個瀏覽器，只是其內的點擊、翻頁等人爲相關操作需要程序設計實現。
這個我也還沒有去接觸，等後面我去看懂了有機會再來講講。
源碼在這裏：https://github.com/lengziyu/vue-seo-phantomjs