OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

Nuxt.jsでページごとにcanonicalのURL正規化設定を行う

最終更新日:2020.9.11 Update!!
ウェブサイトを作成する際にSEO対策を考えるのであれば、linkタグのcanonical設定でURLの正規化を行うのは有効です。クライアント側で動的にページが作成されるNuxt.jsの場合では各ページごとに設定するURLを切り替えるために少し工夫が必要になります。今回はNuxt.jsでページごとのcanonical設定を行う方法についいて見ていきたいと思います。   headタグ内に含まれる要素の場合には「nuxt.config.js」へheadオプションの中に指定をしていくことで各種メタタグなどが反映されるようになります。linkタグも同じような形で設定できますが、この場合、ページごとに異なるURLを設定できないため、ここからcanonical設定をすることはありません。 【nuxt.config.js】※一部抜粋
export default {
  ............
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }
  ............
  head: {
    ............
    link: [
      { rel: 'canonical', href: env.baseUrl }
    ],
    ............
  }
}
  そこで、テンプレート側でページのURLパスを取得し、その値をheadタグ内の情報渡してあげるような処理を加えていきます。ここではページ全体のコンポーネントに該当する「layouts」ディレクトリに含まれるレイアウトに設定しています。 【layouts/default.vue】※一部抜粋
<script>
  export default {
    computed: {
      currentPageForCanonical() {
        return this.$route.path.slice(1)
      }
    },
    head() {
      return {
        link: [
          {
            rel: 'canonical',
            href: `${process.env.BASE_URL}${this.currentPageForCanonical}`
          }
        ]
      }
    }
  }
</script>
  ポイントとなる部分ですが、$routeの変数からページごとのURLパスを取得しています。この時に先頭にスラッシュが入る形となるので不要であれば削除しておきます。あとは、head()メソッドでlinkタグに入る値に先ほど取得したページURLを示すパスを追加したURLが設定されるようにしていきます。上記では環境変数からベースのURLを取得していますが、ハードコーディングでも同じになります。   これで実際にcanonical設定を確認してみると、ページごとに切り替わっているのがわかりますね。  
  今回はNuxt.jsでrel="canonical"のURL正規化設定を行う方法についてまとめてみました。一般的なウェブサイトであればSEO対策も行われるのが基本かと思いますので、そんな時には忘れず設定しておきたいですね。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram