通常のcanonicalと何が違うのか

canonicalは「正規の」という意味で、検索エンジン他に「このページの正しいURL」を伝える手段です。

とは思うんですが、同じページが表示できるURLにはいくつかパターンが考えられます。

• https://○○○.com/
• https://○○○.com
• https://○○○.com/index.html
• https://○○○.com/index.htm
• https://○○○.com/index.php
• https://○○○.com/index.cgi
• https://○○○.com/?mode=type1

などなど。

僅かにでもURLが違っていると検索エンジンは別ページとして認識するらしく、どんなアクセスのされ方をしても正しいURLを伝えてあげましょうというのがcanonicalです。

これに対し、AMPのcanonicalはちょっと意味が違います。

https://○○○.com/ (通常ページ)
https://○○○.com/amp/ (AMP版)

ハイブリッドAMPの場合、この↑ような形でAMP版のURLが生成されます。

これらは「ただのHTML」と「AMP HTML」という違いがあるだけで、中身は同じものです。

このままだと検索エンジンに「同じ内容のページが2つあるので減点！」みたいなことになります。

これを防ぐために、AMP版のcanonicalに「通常ページのURL(https://○○○.com/)」を設定しておきましょう、というのが今回のテーマです。

あえて手動でcanonicalを追加する

自分でcanonicalを設定する場合は「nuxt.config.js」に次のコードを追加します。

<script>

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

</script>

「head () {」以下をそのまま追加してしまうと既存のheadプロパティの設定が破棄されてしまうので、よく分からない人はcanonicalの記事を読んでください。

これを設定するとこの↓ような結果になりました。

https://dev.ore-shika.com/ (通常ページのcanonical)
https://dev.ore-shika.com/amp/ (AMP版のcanonical)

AMP版のcanonicalは「https://dev.ore-shika.com/」になってもらわないと困るので、コードを書き換えていきます。

たぶんJavaScriptが分かる人は余裕で書けるコードだと思いますが、

ので、くどい書き方だったりスマートではない書き方になっている可能性大です。

えー、まず、この「head () {」という書き方。

「headメソッド」という書き方だそうで、名前の通り関数みたいな格好になっています。

どうやらreturn前に処理を挟めるみたいなので、そこでURL末尾の「/amp/」を削ります。

<script>

export default {
  head () {
    //現在のページの相対パスを取得
    var path = this.$route.path
    //正規表現で末尾の「/amp/」を「/」に置換
    path = path.replace(/\/amp\/$/g, '/')
    
    return {
      link: [
        { rel: 'canonical', href: 'https://dev.ore-shika.com' + path },
      ],
    }
  },
}

</script>

無事に末尾「amp/」が削除されました。

ただ、これだとAMPでないページで末尾「/amp/」の場合も削除されてしまいます。 「そんなページ作らないようにする」ことで防げますが、人間はうっかりするものです。 うっかりしても大丈夫なように対策しておきたい。

なので、ここを参考に「AMPページなら」という条件を追加します。

<script>

export default {
  head () {
    //現在のページの相対パスを取得
    var path = this.$route.path
    //現在のページがAMPなら
    if ( this.$isAMP ) {
      //正規表現で末尾の「/amp/」を「/」に置換
      path = path.replace(/\/amp\/$/g, '/')
    }
    
    return {
      link: [
        { rel: 'canonical', href: 'https://dev.ore-shika.com' + path },
      ],
    }
  },
}

</script>

これまた無事に成功。

まぁ、

ちなみのこの「this.$isAMP」。 「@nuxtjs/amp」が設定している値だと思うんですが、モジュールを外した状態だと「false」と評価してくれるようです。

後からモジュールを外すようなことがあってもエラーにはならなさそう。 あまりよくはないでしょうが。

まとめ

モジュール「@nuxtjs/amp」のオプションを使えばcanonicalの設定は楽勝でした。

export default {
  modules: [
    '@nuxtjs/amp',
  ],
  amp: {
    origin: 'https://dev.ore-shika.com',
  },
}

ただ、このやり方だと直接URLを受け取れるわけではないので、OGPの「og:url」や今後構造化データを追加する際に手間になりそうです。

手動でのやり方も覚えておいて損はなさそう。