メタタグと SEO

Nuxt はアプリケーションにメタデータを追加するために 3 つの方法を用意しています：

nuxt.config.js を使用してグローバルに設定する
head をオブジェクトとして使用してローカルに設定する
data と computed プロパティにアクセスするために、head を関数として使用してローカルに設定する

グローバルな設定

Nuxt では、nuxt.config.js 内の head プロパティを利用することで、アプリケーションにおけるデフォルトの <meta> タグをすべて定義することができます。SEO のためのデフォルトの title と description タグの追加や、ビューポートのセット、ファビコンの追加が簡単にできます。

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 プロパティを設定することで、ページ別のタイトルとメタデータを追加することもできます。

pages/index.vue

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

head をオブジェクトとして使用して、ホームページのみに title と description を設定する例。

pages/index.vue

<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>

head を関数として使用して、ホームページのみに title と description を設定する例。関数を使用することで data と computed プロパティにアクセスすることができます。

Nuxt はアプリケーションの document head とメタ要素を更新するために、vue-meta を利用しています。

子コンポーネントを使用したときにメタタグの重複を避けるために、hid キーを利用してメタデータに一意な識別子を与えてください。こうすることで vue-meta は、デフォルトのタグを上書きすべきということを知ることができます。

head の利用可能なプロパティについての詳細は、vue-meta のドキュメントを参照してください。

外部リソース

スクリプトやフォントのような外部のリソースを含めるには、nuxt.config.js にグローバルに追加する、もしくは head オブジェクトまたは関数の中にローカルに追加する必要があります。

各リソースにオプションの body: true を渡すことで、</body> の終了タグの前にリソースを含めることもできます。

グローバルな設定

nuxt.config.js

export default {
  head: {
    script: [
      {
        src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
      }
    ],
    link: [
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap'
      }
    ]
  }
}

ローカルな設定

pages/index.vue

<template>
  <h1>About page with jQuery and Roboto font</h1>
</template>

<script>
  export default {
    head() {
      return {
        script: [
          {
            src:
              'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
          }
        ],
        link: [
          {
            rel: 'stylesheet',
            href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap'
          }
        ]
      }
    }
  }
</script>

<style scoped>
  h1 {
    font-family: Roboto, sans-serif;
  }
</style>