ウェブサイトを作成する際に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対策も行われるのが基本かと思いますので、そんな時には忘れず設定しておきたいですね。