効率的にcanonicalを指定するにはどこに書くべきか

canonicalはページ毎に必要な情報です。

理想としては、共通で読み込まれるファイルに設定しておいて、ページが生成されると自動でそのページのURLをcanonicalに設定。

なので各ページのファイル(index.vueなど)に指定するのは効率が悪いでしょう。

nuxt.config.jsは全ページで必ず読み込まれるだろうし、既にLINKタグの設定項目もあったので良さそうです。

次点でLayout。 Layoutを複数使い回すようなケースだと同じルーチンが複数のファイルにまたがるので、そこがちょっと微妙。
(プラグイン機能で回避できる？)

index.vue内に書き足してみた

nuxt.config.jsは名前からして設定ファイルですからね。 そりゃ早い段階で読み込まれるんでしょうよ。

index.vueに書けば大丈夫だろうと、nuxt.config.jsの書き方を真似て「export default」内に書き足してみます。

<script>

export default {
  (略)
  head: {
    link: [
      { rel: 'canonical', href: (トップページのURL) + this.$route.path },
    ]
  },
  (略)
}

</script>

結果…。

Cannot read property '$route' of undefined

今度は「path」どころか、その親の「$route」が未定義だと…。

ネットで「Nuxt.js canonical」で検索

ネットで検索すればすぐだと思ったんですよ。 僕みたいなポンコツ向けに書いてくれてる記事が絶対あると思いました。

ところが、どうも検索結果が思った感じじゃない。

調べども調べども、何がどうなっているのかさっぱり分からず…。

たった1行canonical追加するだけなのに丸一日潰してしまいました。

nuxt.config.jsにcanonicalを追加する場合の注意点

canonicalは全ページで出力してほしいので、必ず読み込まれる「nuxt.config.js」に書いておきたいです。

レイアウトでもいいですが、default.vue以外のレイアウトも使用する場合、複数のレイアウトに同じコードを書かなければなりません。 なのでnuxt.config.jsに書くのがベスト(のはず)。

nuxt.config.jsに追記する場合、headプロパティは既にあるのでこの↓ようにheadメソッドを追加したくなりますが…。

export default {
  head: {
    (略)
  },
  head () {
    return {
      link: [
        { rel: 'canonical', href: (トップページのURL) + `${this.$route.path}` },
      ],
    }
  },
}

この書き方をすると、プロパティで設定した全内容(canonicalも含めて全て)を破棄した後、メソッドで設定した内容(canonicalのみ)が反映されてしまいます。
(titleもfaviconも出力されない)

なので、nuxt.config.jsでcanonicalの自動取得をする場合は、既にあるheadプロパティの設定をheadメソッドの方に全て移してやらないといけません。

export default {
  head () {
    return {
      title: (タイトル名),
      meta: [
        { name: 'description', content: (ページの説明) },
        { rel: 'canonical', href: (トップページのURL) + `${this.$route.path}` },
      ]
    }
  }
}

注意点①：URLは末尾のスラッシュ不要

上の例では「https://dev.ore-shika.com」になっているトップページのURL部分ですが、末尾のスラッシュを付けていません。

「baseUrl」と連結しているであろう「this.$route.path」はスラッシュから始まる(トップページなら「/」)ので、末尾スラッシュがあると「https://dev.ore-shika.com//」と出力されてしまうからです。

注意点②：「npm run dev」上では表示されない

「all generated pages」と説明がある通り、「npm run dev」の開発モードではcanonicalが出力されません。

ビルドしたページでのみ表示されます。

注意点③：OGPの「og:url」も設定する場合は別途設定が必要

「nuxt-canonical」というモジュールは名前の通り「Nuxt.jsでcanonicalを出力するためだけのモジュール」です。

なのでcanonicalと同時にOGPの「og:url」を設定したい場合はそちら用に結局自分でURLを取得する必要が出てきます。

まぁもしかするとOGP用のモジュールもあるのかもしれませんが今回は調べていません。

エラーが出ていたのは200.html

静的HTMLを出力すると「200.html」というファイルが作られます。

Nuxt.js公式サイトによるとどうも404のことらしい。
(404にアクセスしてもこのページが表示されないのでたぶんちょっと違う)

つまり、404だとURLなんかあるわけないので「$route」が未定義でエラーが出ていたわけです。

tryで囲むとエラーは起きているけど、エラーが起きたのが200.htmlだったため、一見うまくいったように見えていただけでした。

というわけで、「$route」が定義済みの場合だけcanonicalを追加するように変更します。

export default {
  head () {
    const baseUrl = (サイトURL)
    
    var link = [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
    ]
    
    if ( this.$route != null ) {
      var url = baseUrl + this.$route.path
      
      link.push( { rel: 'canonical', href: url } )
    }
    
    return {
      htmlAttrs: {
        lang: 'ja',
      },
      title: (ページタイトル),
      meta: [
        (略)
      ],
      link
    }
  },
}

1. headメソッド内で先に変数としてlinkプロパティを作成。
2. $routeが定義済みだった場合は、URLを生成してcanonicalを追加。
3. 戻り値に作成済みのlinkプロパティを指定。

のような格好です。

これで200.htmlではcanonicalが追加されなくなり、export時のエラーも消えました。

が…。

依然静的出力したサイトでの404はサーバ側の404ページが表示されており、devモードではcanonicalが出力されています(404でも$routeが定義されているため)。

この辺りは404の仕組みを勉強してから改めて解決したいと思います。

末尾に「/」がない

静的出力したcanonicalを見ると末尾に「/」がありません。

Nuxt.jsの解説見ているとそんなもんらしいんですが、個人的には末尾にスラッシュがないとなんか気持ち悪いです。

なので、URL末尾にスラッシュを追加してみます。

export default {
  head () {
    const baseUrl = (サイトURL)
    
    var link = [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
    ]
    
    if ( this.$route != null ) {
      var url = baseUrl + this.$route.path
      
      if ( url.slice(-1) != '/' ) {
        url += '/'
      }
      
      link.push( { rel: 'canonical', href: url } )
    }
    
    return {
      htmlAttrs: {
        lang: 'ja',
      },
      title: (ページタイトル),
      meta: [
        (略)
      ],
      link
    }
  },
}

自分で作るリンクでは末尾「/」になっているので、その場合にスラッシュが重複しないよう、「末尾がスラッシュでなければ」という条件付けをしています。