「这是我参与2022首次更文挑战的第8天,活动详情查看:2022首次更文挑战」。
Meta标签
上篇文章:“自己的博客搜索引擎不收录?浅谈SEO优化:Meta标签的书写”内介绍了Meta标签的书写,这次填一个小“坑”,说说Vue这样的单页项目,如何写Meta标签。
本次使用vue-meta标签,根据路由或Vue内含水进行Meta标签的生成。
SEO优化,在Vue内,效果可能不是很好,要看搜索引擎是否支持动态爬取了。更好的SEO优化,应该是使用SSR进行DOM操作,或者对路由进行预渲染等等。这些下次再说~~~(又挖了一个坑,“针不戳”。)
Vue-meta
这次说说meta
的生成,使用Vue-meta组件:
目前Vue-meta分为两个分支(后续Vue3成为默认版本,next分支应该会合并到主分支):
- master:主分支,十分完善,支持Vue2.x
- next:相当于Alpha版本,目前还在测试和完善,支持Vue3.x版本
这次讲那个版本呢?Vue3即将成为正式版本,这次当然……
是两个版本的使用都说说啦~~
Vue2.x
Vue2.x使用Vue-meta
十分简单,没什么坑(用Vue3.x时候……呜呜呜,全是坑,不过……毕竟还在测试,文档和项目都没定型)。
使用方法很简单,根据官方文档:
<template>
...
</template>
<script>
export default {
metaInfo: {
title: 'My Example App',
titleTemplate: '%s - Yay!',
htmlAttrs: {
lang: 'en',
amp: true
}
}
}
</script>
渲染成页面的效果:
<html lang="en" amp>
<head>
<title>My Example App - Yay!</title>
...
</head>
但是这样的方法有点麻烦,能不能直接在路由内编写呢?
答案是可以的。
项目引入
首先,我们需要引入vue-meta,首先是安装:
npm i vue-meta
VueX和脚手架
使用了VueX,添加一个全局变量进行页面内,动态替换:
export default ({
namespaced: true,
state: {
metaInfo: {
title: "",
keywords: "",
description: ""
}
},
mutations: {
CHANGE_META_INFO(state, metaInfo) {
state.metaInfo = metaInfo;
}
},
actions: {},
modules: {}
})
同时在脚手架内引入:
为了能在页面内,丝滑地更改meta内的description
和keywords
,我们重写一下函数:
metaInfo() {
return {
title: this.$store.state.metaModule.metaInfo.title,
meta: [
{
name: "keywords",
content: this.$store.state.metaModule.metaInfo.keywords
}, {
name: "description",
content: this.$store.state.metaModule.metaInfo.description
}
]
}
},
脚手架的配置文件:
路由守卫
最后是在路由内配置前置守卫:
// 全局前置守卫
router.beforeEach((to, from, next) => {
if (to.meta.metaInfo) {
store.commit("metaModule/CHANGE_META_INFO", to.meta.metaInfo)
}
next()
})
Demo
到此,我们的Vue-meta就使用完成,在路由内添加即可:
效果验收:
OG标签
至于og
属性,你可以参考官网进行自定义,比如这里自定义一个og的image:og:url
,全局VueX内添加:
之后到修改脚手架内的内容:
Vue内直接操作DOM元素,确实不是一个好方法,大家可以试试其他方法优化~~
效果也显而易见:
Vue3.x
Vue3.x的Vue-meta还在Debug,不清楚是设计原因还是全面改制,用Vue2的方法基本不能操作。尤其是description
标签,不清楚是否为官方bug,我一直以为是我的代码问题,后来在GitHub的issue内看到有大神提供的解决方案:Vue-meta issue#696
项目引入
思路和刚刚一样。我们先用npm等包管理器安装:
npm install vue-meta@next --save
VueX和脚手架
之后,我们VueX内设置:
export default ({
namespaced: true,
state: {
metaInfo: {
title: "",
keywords: "",
description: ""
}
},
mutations: {
CHANGE_META_INFO(state, metaInfo) {
state.metaInfo = metaInfo;
}
},
actions: {},
modules: {}
})
我们在脚手架main.js内引用Vue-meta:
// Vue-meta
import {createMetaManager} from "vue-meta";
关键的来了,脚手架哦内重写方法:
const metaManager = createMetaManager(false, {
meta: { tag: 'meta', nameless: true },
});
这样description
标签才能显示正常。
路由守卫
最后,和Vue2.x一样,配置前置路由守卫:
// 全局前置守卫
router.beforeEach((to, from, next) => {
if (to.meta.metaInfo) {
store.commit("metaModule/CHANGE_META_INFO", to.meta.metaInfo)
}
next()
})
在路由内添加meta标签即可: js
{
path: '/',
name: 'Home',
meta: {
metaInfo: {
title: "在线工具箱-By Mintimate",
description:"Mintimate的在线工具箱,致力于打造便民服务。为开发者、Minecraft游戏爱好者,创建方便的在线工具",
keywords: "在线工具箱,便民根据,站点根据,开发者,开发者实用工具,IP查询,图片处理,Base64转码,字数统计,字符统计,MC服务器检测,Minecraft服务器检测",
}
},
component: Home
},
最终效果
当然,设置og标签也一样,Vue2.x演示,这里就不演示了哦。
END
到此,Vue网站vue-meta优化就讲到这里哦。
另外,Vue项目,提交sitemap.xml
,也就是站点地图到搜索引擎也很重要哦。有机会试试SSR优化吧~~~