Nuxt.jsでcanonicalを設定する方法

今回は、Nuxt.jsでcanonicalを設定する方法を解説しています。

canonicalはの正規化です。SEO対策の1つなので、やっていない方は是非参考にしてみてください。

layoutsを使ってcanonicalを設定する

Nuxt.jsの機能の1つであるlayoutsを使い、canonicalの設定を共通化させます。

デフォルトで用意されているlayouts/default.vueを例にcanonicalを設定します。

export default {
  head() {
    return {
      link: [
        {
          rel: "canonical",
          href: `https://example.com${this.$route.path}`,
        },
      ],
    }
  },
}

上記のように設定すると、各ページに<link>が生成されます。

<link rel="canonical" href="https://example.com/sample">

生成されたリンクを確認する

DevToolsからheadを確認すると、canonicalが設定されていると思います。

canonical

canonicalを設定するメリット

canonicalを設定するメリットは以下です。

  • ページの評価分散を防ぐ
  • Googleのペナルティを防ぐ

似たコンテンツのページの中から、優先させたいページを指定してページ評価を正規化されたURLまとめることができます。

また、重複したコンテンツとみなされた場合に、canonicalを設定すること正規化されたURLのみインデックスされるようになります。

canonicalを設定する際の注意点

canonicalを設定する際に2つほど注意点があります。

  • 絶対URLを使用すること。(相対URLを使用しない)
  • canonicalを2つ以上指定しない(headタグに2つ以上設定しない)
  • 複数ページにまたがるコンテンツ全てに設定しない(記事内のページングなど)

上記の問題が発生しているかどうかは、Googleサーチコンソールから確認できます。
canonicalを設定した後、sitemap.xmlを送信し、問題が発生していないか確認してみてください。