検索結果にモバイルページが先に出てくる問題をrel=canonicalで解決する

検索エンジンを使ってると「自分のブログやサイトが引っかかって来る」ことは当然あるんだけど、たまに「本来のPC版のページではなくモバイル版のページが表示される」ことがある。もちろん検索結果からアクセスすればそのままモバイルテンプレートで表示されてしまう。以前から気にはなっていたけど、レンタルサーバ + ブログツールならともかくFC2ブログでは（metaタグでモバイルページにnoindexでも指定しない限り）根本的な解決方法はないからしょうがないか、と思っていて諦めていた。

ところが以前から知ってはいたけど使っていなかったlink要素の「rel="canonical"」属性を使えば、この問題を解決できるんじゃないか？と考えた。

「rel="canonical"」は同じコンテンツ（内容）のページが重複している場合に、検索エンジンに「正規のページはここなので、こっちをインデックス（登録）してください」と指定することができる比較的新しく作られたタグ属性。Googleのヘルプページには以下のように書いてある。

リンク要素と属性を追加することで、サイト所有者は重複ページのリストと、その中で最も重要な情報が含まれ、優先されるページを Google に通知することができます。このページは、検索結果上でも優先表示するようにリクエストされます。

rel="canonical" 属性について - ウェブマスター ツール ヘルプ

そして具体的な重複コンテンツについてはこう書かれている。

悪意のない重複コンテンツの例には、次のようなものがあります。

  • 通常のページと携帯端末用の簡易ページの両方を生成するディスカッション フォーラム
  • 複数の異なる URL で表示またはリンクされる商品ページ
  • ウェブページの印刷用バージョン

重複コンテンツ - ウェブマスター ツール ヘルプ

さらに調べてみると「rel="canonical"」は表示されるコンテンツが完全に同一でなくてもいいようだし、Google自身が「携帯端末用の簡易ページ」を重複コンテンツとして認識してるなら「PC用のページをモバイルページより優先させる」のも問題ないと考えられる。つまり.htaccessなんかを使ってサーバ側でリダイレクトできない（FC2ブログのような）環境でこの問題を解決するなら、この「rel="canonical"」を使うのが一番適切ではないかと思う。

ということで次は具体的な方法を紹介。

「rel="canonical"」でモバイル版よりPC版のページを優先させる

1. モバイルテンプレートを導入する

FC2ブログは利用者側で特に何も設定しなくても、標準のモバイルテンプレートが適用されている。（チェックしたい場合はブログURLの最後に「?m」を付ければ表示される。）ところが少し面倒なことに、そのままだとカスタマイズできない。なので何でもいいので以下の手順でモバイルテンプレートを導入する。すでに使っている場合は読み飛ばして次へ。

  1. テンプレートの設定を選択
  2. 「携帯用」の公式テンプレート追加（あるいは公開テンプレート追加）を選択
  3. どれでもいいので「詳細」を選択してダウンロードする
  4. テンプレートの管理から「適用」する

2. 以下のタグをモバイルテンプレートに書き込む

次のコード（タグ）をモバイルテンプレートの<head>から</head>の間のどこかに書き込んで保存。

<!--index_area--><link rel="canonical" href="<%url>" /><!--/index_area-->
<!--permanent_area--><link rel="canonical" href="<%url>blog-entry-<%pno>.html" /><!--/permanent_area-->

以上でブログのトップページと個別記事のページに「rel="canonical"」が設定される。

ちなみにモバイルページにもカテゴリページ（&cat=XX）が存在するのでそちらにも設定しておきたいところだけど、FC2ブログでそのままやると「2ページ目以降がある場合に適切なURLが設定できない」という問題があるので意図的に書いていない。（「2ページ目、3ページ目なのにPCサイトの1ページ目を正規のページと指定してしまう」など。）どうしてもやりたいなら以下のコードを書き込めばいいけど、個人的には「おすすめしませんよ」と注意しておきたい。

<!--category_area-->
<link rel="canonical" href="<%url>blog-category-<%cno>.html" />
<!--/category_area-->

さらに月別ページ（&date=XX）もあってこちらも同様に設定しない方がいいんだけど、それ以前にこっちはモバイルテンプレートだと月別ページでFC2の変数<%now_year>と<%now_month>が正常に表示されなかったので設定ができなかった。モバイル版にだけ使えない変数もある模様。

モバイル端末で見る人には影響がないのか？という話

「モバイルページを重複コンテンツとして扱うと、モバイル端末で見た場合に（PC版ページが優先されて）困るんじゃないの？」という疑問がある人もいるかもしれない。でも実はこの心配をする必要はない。

なぜなら「PC版だろうがモバイル版だろうがモバイル端末でアクセスした時点で、自動的にモバイルテンプレートで表示される」から。例えばアクセスしたURLが「http://example.blog00.fc2.com/blog-entry-10.html」だったとしても、表示される結果は「http://example.blog00.fc2.com/?m&no=10」とまったく同一のものになる。そういった意味では、モバイル端末で見たときに限れば前述ふたつのURLの内容は「完全に重複している」と言えるかもしれない。

「rel="canonical"」でPC版の重複コンテンツ問題も解決させる

FC2ブログは一般的に使われている「http://XXXX.blogXX.fc2.com/blog-entry-XX.html」という記事のURL以外にも「http://XXXX.blogXX.fc2.com/?no=XX」というのがあって、これも内容が重複している。「?no=～」の方でアクセスされることはほとんどないと思うんだけど、念のためこれも以下のように設定しておけば「blog-entry-XX.html」に統一される。

<!--permanent_area--><link rel="canonical" href="<%url>blog-entry-<%pno>.html" /><!--/permanent_area-->

さらに記事のページと同じように「archives.html」と「?all」で内容が重複している全記事一覧（アーカイブページ）と、念のためにブログのトップページにも設定したのが以下のコード。対象ページが少ないので、必要に応じて使用すればいいかと。（ただし、もし全記事一覧で今まで使っていたのが「?all」の方なら、そちらに書き換えた方がいい。）

<!--index_area--><link rel="canonical" href="<%url>" /><!--/index_area-->
<!--titlelist_area--><link rel="canonical" href="<%url>archives.html" /><!--/titlelist_area-->

これをPC版のテンプレートのhead部分に書き込めばOK。ちなみにこの「rel="canonical"」を設定しておくと、はてなブックマークへの追加時に不要なクエリ（「?utm_source」など）が付いていても指定してあるURLへ誘導してくれるという効果もある。なので、検索エンジンを気にしない人でもとりあえず設定しておいて無駄にはならないはず。

コメント欄でアドバイスをもらったので、無駄な変数がないシンプルなものに差し替えました。