Vue项目seo: 使用vue-meta-info动态生成meta标签

Vue项目seo: 使用vue-meta-info动态生成meta标签

众所周知，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)

组件内静态使用：

<template>
	..........
</template>

<script>
export default {
     
  metaInfo: {
     
    title: '',  // 设置title
    meta: [{
                      
      name: 'keywords',  // 设置关键字
      content: '这是关键字'
    },
    {
     
      name: 'description',  // 设置页面描述
      content: '这是页面描述'
    }],
    link: [{
        // 设置link             
      rel: 'asstes',  
      href: 'https://me.csdn.net/weixin_45426836'
    }]
  }
}
</script>

组件内动态使用：

如果组件中使用了异步请求数据，可以使用 metaInfo() 方法

<template>
	..........
</template>

<script>
export default {
     
    name: 'async',
    metaInfo () {
     
      return {
     
        title: this.pageName
      }
    },
    data () {
     
      return {
     
        pageName: 'title'
      }
    },
    mounted () {
     
      setTimeout(() => {
     
        this.pageName = 'async'
      }, 2000)
    }
  }
</script>