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

Nuxt.js 2020.09.10

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

Tags: ,,,,
最終更新日: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対策も行われるのが基本かと思いますので、そんな時には忘れず設定しておきたいですね。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?