Nuxt.js初心者がMETA descriptionをページ毎に設定できるようになる物語

シェアする：

更新日時：2020年7月4日

この記事をおすすめしたい人

  • WordPressしか知らないのにNuxt.jsを始めようとしてる人
  • Nuxt.jsでページ毎にdescriptionを設定したい人
  • つまりオレ

何も知らない超初心者が脱WordPressしたくてNuxt.jsでサイト構築していくシリーズです。

今回は前回のtitleタグに引き続き、metaタグのdescriptionをページ毎に設定できるようになりたいと思います。

WordPressの上でな！

※ このブログはWordPress製です

あ、僕はVue.jsはもちろんJavaScriptすら分かってないポンコツなので「何をそんな当たり前のことを…」とか思っても許してください。

前回同様「vue-meta」モジュールを使います

Nuxt.jsでhead内を自由にいじくるための「vue-meta」モジュールを今回も使います。 最初からインストールされているモジュールなので、特に意識することなくそのまま使えます。

実は前回あえて省略していたんですが、「nuxt.config.js」内にdescriptionの設定サンプルも書いてあったんですね(赤字の部分)。 


export default {
  (略)
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      (略)
      { hid: 'description', name: 'description', content: process. env. npm_package_description || '' }
    ],
    (略)
  },
  (略)
}

titleタグとはちょっと書き方が違います。

headプロパティの中にmetaプロパティを作って、そこにnameとcontentを指定します。

出力結果はこんな↓感じ。 


<meta data-n-head="ssr" data-hid="description" name="description" content="## Build Setup">

「## Build Setup」なんて僕はどこにも書いた覚えはありませんが、デフォルトで「npm_package_description」に入っている文字列なんでしょう。

「hid」って何や？

「name」「content」はdescriptionを設定するときに使いますが、「hid」は未知の属性です(僕にとって)。

Nuxt.js公式マニュアルにはこの↓ような説明がありました。

子コンポーネントでメタタグが重複しないようにするには、メタ要素に hid を使って一意の識別子を設定します。

うーむ、つまり。

「nuxt.config.js」でdescriptionを設定します。
「index.vue」でdescriptionを設定します。

こうやるとdescriptionが2箇所記述されてしまうということか？

さっそく実験。

「nuxt.config.js」でdescriptionを「nuxt.config.jsでのdescription」に設定。
「index.vue」はhidを指定せず「index.vueでのdescription」に設定。

結果はこの↓ように。 


<meta data-n-head="ssr" data-hid="description" name="description" content="nuxt.config.jsでのdescription">
<meta data-n-head="ssr" name="description" content="index.vueでのdescription">

descriptionが2回定義されてしまっています。

「index.vue」側でもhidを指定してやるとひとつに統合されました。

metaタグ内で重複が起きないようにするための識別子がhidということのようです。

同じhidだと上書きされます。

metaプロパティ内は自由に項目を追加できる

descriptionは次の3要素を含む連想配列になっていました。

  • hid
  • name
  • content

descriptionを定義するときは「name」と「content」を指定するので、そこへ「hid」が足された形です。

文字コード指定の場合はこう↓です。 


{ charset: 'utf-8' },

もしかしてこれって自由に追加できるのでは？

実験してみます。 「root」と「sub」をセット。 


<meta data-n-head="ssr" root="ore-shika" sub="dev">

余裕で追加されました。 拡張性があるよう、自由に追加できるようになっているのでしょう。

意味はないけどな！

npm_package_descriptionは何？

npm_package_descriptionは「nuxt.config.js」でデフォルトのdescriptionに設定されている値です。

titleの時は「npm_package_name」がデフォルトで、これは「package.json」内の「name」の値を参照していました。

というわけで「package.json」に勝手に「description」を追加してみます。

「description」に「package.jsonでのdescription」をセットします。 「package.json」の更新はNuxt.jsを再起動しないと反映されないみたいなので再起動。

結果↓。 


<meta data-n-head="ssr" data-hid="description" name="description" content="package.jsonでのdescription">

予想通りdescriptionが更新されました。

サイト全体でdescriptionを使い回す時は「package.json」に「description」を追加すればいいってことですね。

「index.vue」内でdescriptionを設定する

もうほとんど答えを書いてしまっていますが、vueファイル内のscriptタグに以下のコードを追加するだけです。 


<script>

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

</script>

headプロパティやmetaプロパティがない場合は適宜それらも追加する必要があります。

ハードコードを嫌う場合はこんな↓感じ。 


<script>

const title_name = 'タイトル設定のテスト'
const desc_name = 'description設定のテスト'

export default {
  head: {
    title: title_name,
    meta: [
      { hid: 'description', name: 'description', content: desc_name }
    ],
  },
}

</script>

おいおい出てきますが、SNS用のOGPタグも設定しようと考えている人はこっちの形にしている方が圧倒的にメンテナンスが楽です。

おすすめ(マジで)。

TypeScript版

もうそろそろイヤになってきていますが、ノルマとしているTypeScript版です。
(先にJavaScriptをしっかり学べば良かった…) 


<script lang="ts">

import Vue from 'vue'

const title_name = 'タイトル設定のテスト'
const desc_name = 'description設定のテスト'

export default Vue.extend({
  head: {
    title: title_name,
    meta: [
      { hid: 'description', name: 'description', content: desc_name },
    ],
  },
})

</script>

JavaScript版との違いについては前回の記事を見てください。

まぁ見てもらっても答えは書いてないに等しいんですが…。 何せ僕がまだ理解していないので…。

まとめ

各ページのvueファイル(index.vueとか)内でdescriptionを書き換えるにはscriptタグに以下のコードを追加する！
(既にscriptがある場合は重複する部分は省いてください) 


<script>

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

</script>

既にmetaプロパティがある場合は赤字の部分だけでOKです。

この方法はmetaタグであればなんでも追加・変更が可能なので、他に追加したいmetaタグがある場合は参考にしてみてください。

以上、WordPressからお届けしました！

Nuxt.js HEADタグ操作編の目次

シェアする：
Nuxt-HEADタグ操作編,Nuxt.js