メタ要素の記述とSEO

Nuxt.js のプロジェクトで title 要素やメタ要素を指定する方法を確認しましょう。

npm run generate 実行時に展開されるHTMLのhead要素は、 nuxt.config.js で設定することが出来ます。

SEO向けのtitle要素やmeta要素もこの nuxt.cofnig.js 上で設定することが可能です。

# ページ全体のメタ要素

ページ全体で適用されるメタ要素は以下のような形で、 nuxt.config.js 上で適用する事ができます。

export default {
  // ...
  head: {
    title: "my website",
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },

      { hid: 'description', name: 'description', content: 'Meta description' }
    ]
  }
  // ...
}

# vueファイルでのメタ要素

pages フォルダに配置されたページのvueファイルでは、 scriptのセクションに head を追加して、以下のようにメタ要素の記述を追加することが出来ます。

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

<script>
export default {
  head () {
    return {
      title: "お知らせ",
      meta: [
        { hid: 'description', name: 'description', content: 'My custom description' }
      ]
    }
  }
}
</script>

vueファイル側で指定したtitle要素は、 nuxt.config.js 上で指定した、 ページ全体のtitle要素設定を上書きしますが、 meta要素は、nuxt.config.js 上で指定したページ全体の設定とマージされます。

meta descritionが二重にされるのを防ぐため、nuxt.config.js とvueファイルの両方で、 共通の hid キーを用いることで、重複を防ぐことが可能です。

# タイトルテンプレートの利用

ページごとにtitle要素の指定を行う場合に、 サイト全体で共通のフォーマットを利用するケースが多々あります。

例えば「{ページのタイトル} - {サイト名}」のような形で、 title要素の末尾に共通の「- {サイト名}」を付与したい場合、 nuxt.config.jshead.titleTemplate で以下のように記述することが出来ます。

export default {
  // ...
  head: {
    title: "my website",
    titleTemplate: '%s - My Blog Site',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },

      { hid: 'description', name: 'description', content: 'Meta description' }
    ]
  }
  // ...
}

head.titleTemplate には %s を含む形でタイトルのテンプレートを記述します。

vueファイル側で指定されたtitle要素は %s の内部で展開され、 全てのtitle要素に共通の末尾 - My Blog Site が付与されるようになります。

# Check!

次のステップに進む前に以下の内容をもう一度確認しておきましょう。

  • 各種headの設定を行い、ページ毎に異なるtitle要素が設定できることを確認してみましょう。
  • titleTemplateを利用してページ全体に共通のtitle要素が設定できることを確認してみましょう。

https://ja.nuxtjs.org/api/configuration-head

https://ja.nuxtjs.org/api/pages-head