【Nuxt.js】Nuxt文法編：head

前置き

metaタグを設定するhead属性について解説していきます🎀
SEOに直接的な影響はないと言われていますが、
検索結果のタイトル下に表示されるmeta descriptionは
クリック率に影響するため理解しておいた方がGood🌟

それではやっていきましょう〜！

head

head属性とは

前置きにも書きましたが、
metaタグを設定する場所です🎀🧸

公式：
https://ja.nuxtjs.org/guide/views/#%E3%83%9A%E3%83%BC%E3%82%B8

基本的にはnuxt.config.jsで
グローバルに設定しますが
pageごとのローカル設定を
優先させることもできます🌟

pageで個別の設定しなければ
nuxt.config.jsの設定が引き継がれます。

headに使えるオプションと使い方

head で利用できるオプションは数種類あります。
メタ情報プロパティの認識

主に使うのがtitleやmeta descriptionですね。
descriptionは検索結果の下に出る文章のことです。
https://wacul-ai.com/blog/seo/internal-seo/meta-description-for-seo/

コード（htmlの場合）

<head>
 <title>ここにタイトル</title>
 <meta name="description" content="Webサイトの概要">
</head>

<head>

<title>ここにタイトル</title>

</head>

コード（Nuxtの場合）

タイトル部分はこんな感じになります🌟

descriptionは実際の表示をお見せできませんが、
Page 1 description
と表示されるはずです⭕️

) pages

<script>
  export default {
    data () {
     return {
       name: 'Nuxt',
     }
    },
    head () {
      // このページ向けにメタタグを設定します
      title: `Page 1 (${this.name}-side)`,
      titleTemplate: '%s - Nuxt.js',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'Page 1 description'
        }
      ]
    },
  }
</script>

export default {

data () {

return {

}

head () {

// このページ向けにメタタグを設定します

title: `Page 1 (${this.name}-side)`,

titleTemplate: '%s - Nuxt.js',

meta: [

{

hid: 'description',

content: 'Page 1 description'

}

]

}

</script>

${変数}はテンプレートリテラルです。

hidはnuxt.config.jsとpagesの設定が被る時に
識別子としてvmidキーの代わりに一意の名前でつけます。

子コンポーネント利用された時にメタ情報が重複してしまうことを避けるために hid キーで一意な識別子を与えてください｡
https://ja.nuxtjs.org/faq/duplicated-meta-tags/

書き方の違い（グローバル or ローカル）

グローバル

nuxt.config.jsの時はhead: {}

) file

<script>
export default {
  head: {
    title: 'Nuxt page',
  }
}
</script>

export default {

head: {

title: 'Nuxt page',

}

</script>

ローカル

個別ページの時はhead() { return { } }

) pages

<script>
export default {
  data () {
    return {
      name: 'Nuxt',
    }
  },
  head() {
    return {
      title: `Page 1 (${this.name}-side)`,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'My custom description'
        }
      ],
    }
  }
}
</script>

export default {

data () {

return {

}

head() {

return {

title: `Page 1 (${this.name}-side)`,

meta: [

{

hid: 'description',

content: 'My custom description'

}

</script>

こんな使い方も

bodyにクラスつけたりもできます。

) pages

<script>
export default {
  head() {
    return {
      bodyAttrs: {
        class: ['dark-mode', 'mobile']
      },
    }
  },
}
</script>

export default {

head() {

return {

bodyAttrs: {

}

</script>

まとめ

head属性はmetaタグを設定する場所
基本はグローバル設定だがローカルで個別設定したい場合はhidを使う