Nuxt.js-SEO

vue-meta

• 简介

  vue-meta是HTML的元数据的管理工具
  Nuxt.js内置的库vue-meta，管理Vue.js组件中的HTML元数据，可以解决SEO（搜索引擎优化）的问题
  github

• 元数据

  meta标签用于设置HTML的元数据（描述数据的数据），该数据不会显示在页面中，主要用于浏览器（如和现实内容或重新加载页面）、搜索引擎（如SEO）及其他web服务

• 例子

  // Component.vue
  {
    metaInfo: {
      meta: [
        { hid: 'description', name: 'description', content: 'hello world' }
      ]
    }
  }
  

  以上代码会生成如下内容

  <!-- Rendered HTML tags in your page -->
  <meta data-hid="description" name="description" content="hello world">
  

  注:metaInfo可以添加到任何或所有组件中，这些组件将自上而下自动合并

使用方式

Nuxt.js提供了3种不同添加元数据的方式

• 全局配置
  nuxt.config.js

  export default {
    head: {
      title: 'my website title',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        {
          hid: 'description',
          name: 'description',
          content: 'my website description'
        }
      ],
      link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
    }
  }
  

• 本地对象配置
  使用head作为一个对象来设置标题和描述

  <script>
  export default {
    head: {
      title: 'Home page',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'Home page description'
        }
      ],
    }
  }
  </script>
  

• 本地函数配置
  使用head作为一个函数来设置标题和描述。通过使用函数，可以访问数据和计算的属性

  <template>
    <h1>{{ title }}</h1>
  </template>
  <script>
    export default {
      data() {
        return {
          title: 'Home page'
        }
      },
      head() {
        return {
          title: this.title,
          meta: [
            {
              hid: 'description',
              name: 'description',
              content: 'Home page description'
            }
          ]
        }
      }
    }
  </script>
  

注:为了避免子组件中的meta标签不能正确覆盖父组件中相同的标签而产生重复的现象，建议利用 hid 键为meta标签配一个唯一的标识编号