網(wǎng)站的訪問(wèn)流量中牢屋，有相當(dāng)一部分都是來(lái)自于搜索引擎槽袄，而來(lái)自于搜索引擎的流量又全部是免費(fèi)的，所以網(wǎng)站的SEO(Search Engine Optimization 搜索引擎優(yōu)化)是實(shí)現(xiàn)自我營(yíng)銷的一種最直接且最有效的手段截酷。而SEO往往又都是從優(yōu)化meta標(biāo)簽開始的！
一鼓择、meta標(biāo)簽介紹
meta標(biāo)簽提供關(guān)于HTML文檔的元數(shù)據(jù)(元數(shù)據(jù)指用于描述數(shù)據(jù)的數(shù)據(jù))。元數(shù)據(jù)不會(huì)顯示在頁(yè)面上念搬，但是對(duì)于機(jī)器是可讀的催跪。它可用于瀏覽器（如何顯示內(nèi)容或重新加載頁(yè)面）夷野，搜索引擎（關(guān)鍵詞），或其他 web 服務(wù)骑丸。
二、meta標(biāo)簽的特點(diǎn)
1通危、meta 標(biāo)簽只能位于 head 元素內(nèi)部。
2节芥、在HTML中逆害，meta 標(biāo)簽沒有結(jié)束標(biāo)簽。在 XHTML 中魄幕，meta 標(biāo)簽必須被正確地關(guān)閉。
3坛芽、meta標(biāo)簽共有兩個(gè)屬性翼抠，分別是http-equiv屬性和name屬性。
三臭墨、SEO 優(yōu)化部分
關(guān)于meta標(biāo)簽的用法實(shí)現(xiàn)太多了膘盖，在此就不在一一贅述了。現(xiàn)將SEO優(yōu)化部分列舉下：
<!-- 頁(yè)面標(biāo)題<title>標(biāo)簽(head 頭部必須) -->
<title>張培躍</title>
<!-- 頁(yè)面關(guān)鍵詞 keywords -->
<meta name="keywords" content="玉樹臨風(fēng),風(fēng)流倜儻,英俊瀟灑,才高八斗,貌似番安">
<!-- 頁(yè)面描述內(nèi)容 description -->
<meta name="description" content="這么神奇嗎侠畔？都已經(jīng)很難用言語(yǔ)來(lái)描述了">
四、Vue SPA 應(yīng)用中設(shè)置title與meta
在 Vue SPA 應(yīng)用中红竭，如果想要修改HTML的頭部標(biāo)簽喘落，或許，你會(huì)在代碼里稀火，直接這么做:
new Vue({
router,
data:{
title:"張培躍",
keywords:"玉樹臨風(fēng),風(fēng)流倜儻,英俊瀟灑,才高八斗,貌似番安",
description:"這么神奇嗎赌朋？都已經(jīng)很難用言語(yǔ)來(lái)描述了"
},
beforeMount(){
console.log(1212)
document.title = this.title;
const keywordsEl = document.createElement('meta')
keywordsEl.content = this.keywords;
keywordsEl.name = "keywords"
const descriptionEl = document.createElement('meta')
descriptionEl.content = this.description;
descriptionEl.name = "description"
document.head.appendChild(keywordsEl)
document.head.appendChild(descriptionEl)
},
render: function (h) { return h(App) }
}).$mount('#app')
但是這樣的代碼篇裁，是不是感覺怪怪的赡若！怎么看也不夠優(yōu)雅！沒關(guān)系黍聂，咱們繼續(xù)往下看粉渠！
五、優(yōu)雅設(shè)置title與meta
可以通過(guò)引入vue-meta模塊霸株，實(shí)現(xiàn)以優(yōu)雅的方式設(shè)置title與meta。
1坡椒、安裝
npm install vue-meta -S
2尤溜、在main.js中引入
import Meta from 'vue-meta';
Vue.use(Meta);
3、使用
new Vue({
router,
data:{
title:"張培躍",
keywords:"玉樹臨風(fēng),風(fēng)流倜儻,英俊瀟灑,才高八斗,貌似番安",
description:"這么神奇嗎丈攒？都已經(jīng)很難用言語(yǔ)來(lái)描述了"
},
metaInfo(){
return {
title: this.title,
meta: [
{
name:"keywords",
content: this.keywords
},{
name:"description",
content: this.description
}
]
}
},
render: function (h) { return h(App) }
}).$mount('#app')
六授霸、vue路由中動(dòng)態(tài)設(shè)置title與meta
1、在router.js中創(chuàng)建路由：
routes: [
{
path: "/qq",
name: "Qq",
component: Qq,
meta: {
metaInfo: {
title: "騰訊首頁(yè)",
keywords: "資訊,新聞,財(cái)經(jīng),房產(chǎn),視頻,NBA,科技,騰訊網(wǎng),騰訊,QQ,Tencent",
description: "騰訊網(wǎng)從2003年創(chuàng)立至今显设，已經(jīng)成為集新聞信息……"
}
}
},
{
path: "/jd",
name: "Jd",
component: Jd,
meta: {
metaInfo: {
title: "京東(JD.COM)-正品低價(jià)辛辨、品質(zhì)保障、配送及時(shí)斗搞、輕松購(gòu)物！",
keywords: "網(wǎng)上購(gòu)物,網(wǎng)上商城,家電,手機(jī),電腦,服裝,居家,母嬰,美妝,個(gè)護(hù),食品,生鮮,京東",
description: "京東JD.COM-專業(yè)的綜合網(wǎng)上購(gòu)物商城允悦，……"
}
}
}
]
2溅呢、在store.js中創(chuàng)建狀態(tài)：
import Vue from "vue";
import vuex from "vuex";
Vue.use(vuex);
const state = {
metaInfo: {
title: "張培躍",
keywords: "玉樹臨風(fēng),風(fēng)流倜儻,英俊瀟灑,才高八斗,貌似番安",
description: "這么神奇嗎？都已經(jīng)很難用言語(yǔ)來(lái)描述了"
}
};
const mutations = {
CAHNGE_META_INFO(state, metaInfo) {
state.metaInfo = metaInfo;
}
};
export default new vuex.Store({
state,
mutations,
})
3驶鹉、main.js如下：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Meta from 'vue-meta'
import store from './store'
Vue.use(Meta)
Vue.config.productionTip = false;
router.beforeEach((to, from, next) => {
if (to.meta.metaInfo)
store.commit("CAHNGE_META_INFO", to.meta.metaInfo)
next()
});
new Vue({
router,
store,
metaInfo(){
return {
title: this.$store.state.metaInfo.title,
meta: [
{
name: "keywords",
content: this.$store.state.metaInfo.keywords
}, {
name: "description",
content: this.$store.state.metaInfo.description
}
]
}
},
render: function (h) {
return h(App)
}
}).$mount('#app')
自此功能完美完成弧圆，希望對(duì)小伙伴們能夠有所幫助。
