Nuxt.jsには各ページごとにheadタグを管理できる機能も備わっています。SEO対策をする上ではとても重要になってきますので、特にメディアサイトなどを作成する時にはとても役立つのではないでしょうか。今回はNuxt.jsにおいてheadタグを設定する方法についてまとめていきたいと思います。   Nuxt.jsでは基本的にメタタグの設定などを「nuxt.config.js」ファイル内で行います。headのオプションで指定していき、キーを「meta」に設定し、それぞれの属性と値を入力していきます。代表的なものを例に挙げると下記のような形になります。 【nuxt.config.js】

export default {
 head: {
  ...........
  title: 'サイトタイトル'
  meta: [
   { charset: 'utf-8' },
   { name: 'viewport', content: 'width=device-width, initial-scale=1' },
   { name: 'robots', content: 'index,follow,noodp' },
   ...........
   { hid: 'description', name: 'description', content: 'サイトディスクリプション' },
   { hid: 'og:description', property: 'og:description', content: 'OPG設定のサイトディスクリプション' },
   { hid: 'og:url', property: 'og:type', content: 'https://example.com' },
   { hid: 'og:image', property: 'og:image', content: 'OGPイメージのファイルパス' },
   ...........
  ]
 }
}

  ここで設定したメタタグがNuxt.jsで作成するサイトに追加されますが、上記注目すべき点として「hid」というキーが付いているものがあります。タイトルやディスクリプション、OGP設定などはページごとに変えたいこともあります。そのようなメタタグに関してはここでhidのキーを指定しておきます。その時の値はそれぞれ対応した属性名の値を入れておきます。こうすることで、ページ個別でメタタグを上書きできるようにしておきます。   続けて、個別ページ用にメタタグを上書きする処理を実装していきます。共通の関数としてNuxt.jsのプロジェクト内で使い回せるようにするので、「mixins」ディレクトリを作成し、その中に任意のファイル名でJSファイルを作成しておきます。コードについては下記のように記述していきます。 【mixin/headMeta.js】

export default {
 head() {
  const head = { meta: [] }
  if (this.meta.title) {
   const title = this.meta.title
   head.title = title
   head.meta.push({ hid: 'og:title', property: 'og:title', content: title })
  }
  if (this.meta.description) {
   head.meta.push({ hid: 'description', name: 'description', content: this.meta.description })
   head.meta.push({ hid: 'og:description', property: 'og:description', content: this.meta.description })
  }
  if (this.meta.image) {
   head.meta.push({ hid: 'og:image', property: 'og:image', content: this.meta.image })
  }
  return head
 }
}

  処理の中身を見ると、metaキーの中にタイトルやディスクリプションなどのキーを持ったオブジェクトを読み込むようにしています。そこで、もし上書き用に値が当てられた場合には、その値をmetaキーの対応する属性の値に代入させる形になります。これらをそれぞれ個別ページで必要となる値を指定する形になります。 【pages/index.vue】

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

<script>
import headMeta from '~/mixins/headMeta.js'
 ...........
export default {
 ...........
 mixins: [headMeta],
 data() {
  return {
   meta: {
    title: 'ページ固有のタイトル',
    description: 'ページ固有のタイトル',
    ...........
   }
   ...........
  }
 },
 ...........
} 
</script>

  各ページ用のテンプレート内において、先ほど作成したmixinsのファイルをインポートし、mixinsオプションで指定します。dataオプションでmetaキーをもつオプジエクトで必要な値を上書きしていきます。これでビルドした際に設定した値が上書きされるようになり、ページ単位でメタタグを自由に管理できるようになります。   今回はNuxt.jsでページ単位でメタタグを管理する方法についてまとめてみました。コーポレートサイトやメディアサイトなど商用利用のウェブサイトにおいてはSEOの観点からメタタグの設定は重要であります。今回のような形でページ単位で細かくメタタグを管理できるのはとてもメリットが大きいですので、ぜひ忘れず設定しておきたいですね。