[ 目次 ]

• はじめに
• 原因
• 解決方法

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回は「Nuxt.jsでメタタグの重複を防ぐ方法」についてメモを残したいと思います。
本ブログのメタタグが重複していて、「あれ？もしやhidが・・・」と思ったことがきっかけです。

原因

予想通りメタタグにhidの設定がありませんでした。

head () {
  return {
      title: this.title,
      meta: [
          { name: 'description', content: this.description },
          { name: 'og:title', content: this.title },
          { name: 'og:description', content: this.description },
      ]
  }
},

解決方法

メタタグが重複したときは？

こちらのNuxt.jsの公式サイトにも記載がある通りhidでユニークな識別子を定義しなければいけません。
以下のように修正しました。

■ nuxt.config.js

  head: {
    htmlAttrs: {
      lang: 'ja',
    },
    title: 'なかむ🇭🇰エンジニアブログ | 世界を旅して暮らしたい放浪エンジニアブログ',
    titleTemplate: '%s | Nakamu🇭🇰Blog',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1, minimum-scale=1' },

      { hid: 'description', name: 'description', content: '香港在住エンジニアのなかむが技術情報を発信するためのメディア。世界を旅して暮らすことを目標として日々技術に着目していきます'},
      
      { hid: 'og:title', name: 'og:title', content: 'なかむ🇭🇰エンジニアブログ | 世界を旅して暮らしたい放浪エンジニアブログ'},
      { hid: 'og:decription', name: 'og:decription', content: '香港在住エンジニアのなかむが技術情報を発信するためのメディア。世界を旅して暮らすことを目標として日々技術に着目していきます'},
      ・・・
    ],
    ・・・
  },

■ 個別ページ

head () {
  return {
      title: this.title,
      meta: [
          { hid: 'description', name: 'description', content: this.description },
          { hid: 'og:title', name: 'og:title', content: this.title },
          { hid: 'og:description', name: 'og:description', content: this.description },
      ]
  }
},

nuxt.config.js と 各個別ページのメタタグ設定にhidを追加します。
細かな部分への配慮が足りていませんでした。今後注意していきたいと思います。