众所周知，vue这种单页面的项目是不利于seo的，但是在实际项目中，像一些交互网站，不可避免会考虑一些seo问题。即使是vue这种项目，我们还是可以通过一些其他技术解决seo问题的。
例如vue项目中的meta标签，可以通过 vue-meta-info 动态生成“关键字”和“页面描述”，来优化页面的seo
使用此插件可以配合 预渲染插件 prerender-spa-plugin
安装 vue-meta-info：
通过npm：
npm install vue-meta-info –save
通过yarn：
yarn add vue-meta-info
使用：
main.js
// 引入 vue-meta-info
import Vue from 'vue'
import MetaInfo from 'vue-meta-info'
// 注册 vue-meta-info
Vue.use(MetaInfo)
组件内静态使用：
..........
export default {
metaInfo: {
title: '', // 设置title
meta: [{
name: 'keywords', // 设置关键字
content: '这是关键字'
},
{
name: 'description', // 设置页面描述
content: '这是页面描述'
}],
link: [{ // 设置link
rel: 'asstes',
href: 'https://me.csdn.net/weixin_45426836'
}]
}
}
组件内动态使用：
如果组件中使用了异步请求数据，可以使用 metaInfo() 方法
..........
export default {
name: 'async',
metaInfo () {
return {
title: this.pageName
}
},
data () {
return {
pageName: 'title'
}
},
mounted () {
setTimeout(() => {
this.pageName = 'async'
}, 2000)
}
}
原文始发于微信公众号（前端24）：Vue项目seo: 使用vue-meta-info动态生成meta标签
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/217019.html
