- vue-meta-info 官方地址： vue-meta-info
（設(shè)置 vue 單頁(yè)面 meta info 信息，如果需要單頁(yè)面 SEO，可以和 prerender-spa-plugin 形成更優(yōu)的配合） 單頁(yè)面應(yīng)用在前端正大放光彩。三大框架 Angular 、Vue 、React ，可謂婦孺皆知。隨著單頁(yè)面應(yīng)用的普及，人們?cè)诟惺芷鋷?lái)的完美的用戶體驗(yàn)，極強(qiáng)的開(kāi)發(fā)效率的同時(shí)，也似乎不可避免的要去處理 SEO 的需求。 本文主要針對(duì) vue 2.0 單頁(yè)面 Meta SEO 優(yōu)化展開(kāi)介紹： 其實(shí)解決 SEO 問(wèn)題不一定非得用服務(wù)端渲染來(lái)處理，服務(wù)端渲染對(duì)于剛接觸 vue 的新手來(lái)說(shuō)，并不是那么友好，雖然已有官方 SSR 中文文檔 。但是對(duì)于一個(gè)已經(jīng)開(kāi)發(fā)完畢的 vue 項(xiàng)目去接 SSR 無(wú)論是從工作量還是技術(shù)角度來(lái)說(shuō)，都是一種挑戰(zhàn)。不過(guò)這些怎么能難得到偉大的前端程序員！
如果您調(diào)研服務(wù)器端渲染(SSR)只是用來(lái)改善少數(shù)營(yíng)銷(xiāo)頁(yè)面（例如 /, /about, /contact 等）的 SEO，那么您可能需要預(yù)渲染。無(wú)需使用 web 服務(wù)器實(shí)時(shí)動(dòng)態(tài)編譯 HTML，而是使用預(yù)渲染方式，在構(gòu)建時(shí) (build time) 簡(jiǎn)單地生成針對(duì)特定路由的靜態(tài) HTML 文件。優(yōu)點(diǎn)是設(shè)置預(yù)渲染更簡(jiǎn)單，并可以將您的前端作為一個(gè)完全靜態(tài)的站點(diǎn)。 如果您使用 webpack，您可以使用 prerender-spa-plugin 輕松地添加預(yù)渲染。它已經(jīng)被 Vue 應(yīng)用程序廣泛測(cè)試。 預(yù)渲染為 SEO 提供了另一種可能，簡(jiǎn)單的來(lái)說(shuō)，預(yù)渲染就是當(dāng) vue-cli 構(gòu)建的項(xiàng)目進(jìn)行
npm run build的時(shí)候，會(huì)按照路由的層級(jí)進(jìn)行動(dòng)態(tài)渲染出對(duì)應(yīng)的 html 文件。
// webpack.conf.js
var path = require('path')
var PrerenderSpaPlugin = require('prerender-spa-plugin')
module.exports = {
// ...
plugins: [
new PrerenderSpaPlugin(
// 編譯后的html需要存放的路徑
path.join(__dirname, '../dist'),
// 列出哪些路由需要預(yù)渲染
[ '/', '/about', '/contact' ]
)
]
}最終會(huì)生成類似于這樣的目錄結(jié)構(gòu)
而里面的內(nèi)容都會(huì)被渲染成了靜態(tài)的 html 文件
相對(duì)于之前的可能只有
<html>
<head>
<meta charset="utf-8">
<title>tangeche-pc</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/app.js"></script></body>
</html>
可以直觀的發(fā)現(xiàn)，預(yù)渲染的作用。 有了預(yù)渲染，我們可以解決很多方面的 SEO 的問(wèn)題，但是有時(shí)候我們也會(huì)需要 Meta 信息的變化，比如title 比如 Meta keyWords 或者是link… 這里安利一下 vue-meta-info 一個(gè)可以動(dòng)態(tài)設(shè)置 meta 信息的 vue 插件如果需要單頁(yè)面 SEO，可以和 prerender-spa-plugin形成更優(yōu)的配合。 vue-meta-info 是一個(gè)基于 vue 2.0 的插件，它會(huì)讓你更好的管理你的 app 里面的 meta 信息。你可以直接 在組件內(nèi)設(shè)置 metaInfo 便可以自動(dòng)掛載到你的頁(yè)面中。如果你需要隨著數(shù)據(jù)的變化，自動(dòng)更新你的 title、meta 等信息，那么用此 插件也是再合適不過(guò)了。 當(dāng)然，有時(shí)候我們也可能會(huì)遇到讓人頭疼的 SEO 問(wèn)題，那么使用此插件配合 prerender-spa-plugin 也是再合適不過(guò)了
1.安裝
yarn:
yarn add vue-meta-infonpm:
npm install vue-meta-info --save2.全局引入 vue-meta-info
import Vue from 'vue'
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)3.組件內(nèi)靜態(tài)使用 metaInfo
<template>
...
</template>
<script>
export default {
metaInfo: {
title: 'My Example App', // set a title
meta: [{ // set meta
name: 'keyWords',
content: 'My Example App'
}]
link: [{ // set link
rel: 'asstes',
href: 'https://assets-cdn.github.com/'
}]
}
}
</script>4.如果你的 title 或者 meta 是異步加載的，那么你可能需要這樣使用
<template>
...
</template>
<script>
export default {
name: 'async',
metaInfo () {
return {
title: this.pageName
}
},
data () {
return {
pageName: 'loading'
}
},
mounted () {
setTimeout(() => {
this.pageName = 'async'
}, 2000)
}
}
</script>
寫(xiě)到這里，大家應(yīng)該都明白了我所說(shuō)的 SEO 的另一種思路是什么了，preRender + metaInfo 可以才一定層次上去解決 SEO 問(wèn)題，這種方式優(yōu)點(diǎn)就是代碼侵入性最低，開(kāi)發(fā)成本最少。但是也是有弊端的：
- 不能很好地處理用戶獨(dú)特性路由: 比如有個(gè)路由是
/my-profile, 預(yù)渲染可能不會(huì)很好用, 因?yàn)檫@個(gè)內(nèi)容頁(yè)是根據(jù)用戶信息變化的，所以頁(yè)面內(nèi)容也不是唯一確定的. 你可能會(huì)使用類似于這樣的路由路徑/users/:username/profile,但是這樣也是不合適的. - 經(jīng)常變動(dòng)的文件
- 需要預(yù)渲染成千上萬(wàn)的路由文件: 這個(gè)可能會(huì)導(dǎo)致你編譯時(shí)間…..額，可能你會(huì)編譯很長(zhǎng)時(shí)間
作者：王偉
