世界を旅して暮らしたい放浪エンジニアブログ

Nuxt.jsでメタタグの重複を防ぐ方法

本ブログのメタタグが重複してました・・・。なので、メモとしてNuxt.jsでメタタグの重複を防ぐ方法をまとめておきます。

[ 目次 ]

はじめに

こんにちは、香港に住んでいる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を追加します。
細かな部分への配慮が足りていませんでした。今後注意していきたいと思います。

前のページ

次のページ

Profile

なかむ🇭🇰Webデベロッパー

なかむ🇭🇰Webデベロッパー

香港在住4年目になるWEBエンジニアのなかむです。 現在は、LaravelやRailsを利用したWEB開発を中心にエンジニアをしています。 顧客は全て日本の企業になります。リモート開発にて各企業様の支援を行なっております

プロフィール詳細はこちら

Latest Posts