Nuxt.jsでmetaタグを設定する

Nuxt.jsでtitleタグやmetaタグの設定方法をメモ。

サンプルコード

nuxt.config.jsのheadプロパティでデフォルトの値を設定できます。

export default {
  head: {
    title: '共通タイトル',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'format-detection', content: 'telephone=no' },
      {
        hid: 'description',
        name: 'description',
        content: '共通ディスクリプション'
      },
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  }
}

この場合、各ページで以下のような出力になります。

<title>共通タイトル</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta data-hid="description" name="description" content="共通ディスクリプション">
<link rel="icon" type="image/x-icon" href="/favicon.ico">

個別に設定する場合、各ページ内でheadを使って設定します。

export default {
  head: {
    title: '個別ページタイトル',
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: '個別ページ説明'
      }
    ],
  }
}

これで設定したページのtitleとディスクリプションが個別の内容になりました。

<title>個別ページタイトル</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta data-hid="description" name="description" content="個別ページ説明">
<link rel="icon" type="image/x-icon" href="/favicon.ico">

headを関数にすることで、dataの値を使用することもできます。

export default {
  data() {
    return {
      title: '個別タイトル'
    }
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: '個別ページ説明'
        }
      ],
    }
  }
}

dataのtitleに変更できました。

<title>個別タイトル</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta data-hid="description" name="description" content="個別ページ説明">
<link rel="icon" type="image/x-icon" href="/favicon.ico">

titleで部分的に共通化したい場合、nuxt.config.jsでtitleTemplateを使用します。

export default {
  head: {
    title: '共通タイトル',
    titleTemplate: '%s - サイト名',
    〜 略 〜
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  }
}

titleTemplateの「%s」部分に、各ページのheadで設定しているtitleの値が入ります。
前述の例の場合、以下のようになります。

<title>個別タイトル - サイト名</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta data-hid="description" name="description" content="個別ページ説明">

トップページなど一部で共通タイトルを使用したくない場合、個別でtitleTemplateにnullを設定します。

export default {
  head: {
    title: 'トップページ',
    titleTemplate: null,
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: 'トップページ説明'
      }
    ],
  }
}

これで共通タイトルは使用されず、titleで設定した内容のみが表示されます。

<title>トップページ</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta data-hid="description" name="description" content="トップページ説明">
<link rel="icon" type="image/x-icon" href="/favicon.ico">