今日はイギリスのスコットさんからの質問です。今日の質問は、ポピュラーな質問でモバイル用ページについてです「PC用のページの他にモバイルバージョンのページがある場合、Googleに認識してもらう方法をおしえてください。もしくはレスポンシブルデザインであれば、同じURLでモバイルページとしてきちんと認識してくれるのでしょうか？」
matt:はい、非常にポピュラーで模範的な質問ありがとう！ひとつ前提として話しますが、フィーチャーフォンについてはここでは無視させてください。主にスマートフォンについてお話します！モバイル対応についてはリンクやコンテキストの件そしてmeta descriptionなどの最適化などいろいろ工夫できることはあるのですが、今日は「モバイル端末ではモバイルバージョンのページを見ることができ、PCからはデスクトップバージョンのページが見れる」という観点でお答えします。
matt:はい、ご存知の方も多いかもしれませんが、いくつかの方法を紹介しましょう。
一つ目は、レスポンシブルデザインです。これは同じページソースをPCとモバイルに対して表示するものです。JavascriptやCSSによって個々のウィンドウに表示を最適化する手法です。
この手法をとった場合に注意してほしいのは、GoogleBotに対して、「JavascriptやCSSをブロックしないでください！」ということですね。我々のBotがJavascritpやCSSをきちんとレンダリングできることで、レスポンシブルなページなのかどうかグーグル側が認識できるようになるのです。ですので、これまでも何度もいってきていますが、JavascriptやCSSをブロックしないように気を付けてください！
matt:はい、一つ目の方法は、レスポンシブデザインを活用し、JavascriptやCSSをブロックせずに、グーグルのクローラーがきちんとクロールできるようにするという内容ですね。ではもう一つの手法を紹介します。これは、デスクトップ用のページとモバイル用のページと2つのバージョンを持つ手法で、異なるURLでページを持つことになります。
では、このケースを正しくマネージする方法をこれからお話します。
まず初めに、PC用のページに対応するモバイル用ページを指し示すrel="alternate"を付けてください。こうすることで、Googleは「これら2つのページは同じ内容のページだけれども、一つはPC用のページ、もう一つはスマートフォン用のページなんだね。」と認識できるようになります。
それから、スマートフォンバージョンのページにも、対応するPCバージョンのページを指し示すrel="cannonical"を付けてください。これで、PC用ページからの参照とおなじく、２つの異なるURLで同じコンテンツが存在してもGoogleがきちんと認識できるようになるのですね。
つまり、PCページ側、モバイルページ側双方にこうしたバイディレクショナルなリンク構造を明示することで、PCサイトからは、対応するモバイルページがあるんだなぁ、これか！、モバイルページからは、対応するPCサイトがあるのですねぇ、これか！とGoogleは正しく2つのページの関連について認識することができるのです。
matt:それからもう一つ重要な点は、user-agentによるリダイレクト処理をきちんと行う事です。スマートフォンのuser-agentであったら、モバイルバージョンのURLへリダイレクトするという具合ですね。GoogleMobileBotがきたら、そのようにキチンとリダイレクトしてください。そうすることで、僕らは、あら、モバイル用のページがこちらにあるんですね。と認識することができるんです。よくあるミスで、これはレスポンシブルデザインのケースもそうなのですが、GoogleMoblebotがブロックされていて、正しくリダイレクトさなかったり、Javascriptやcssが正しくロードで本来あるべき姿でページがクロールされないことがあるようなのですが、MobileBotはスマホのuser-agentできますので、普通にリダイレクトしてもらうか、もしくはきちんとJavascriptやCSSをロードできるようにしておいてください。そしてレギュラーGooglebotが来たらPCページへ誘導してください。きちんとこのようにしていただければ、レスポンシブルデザインであれ、PCverとモバイルver２つのソースとURLを持つ構造であれ、正しく認識しますのでご安心ください。
ねずみ小僧：フィーチャーフォン時代は端末キャッシュの問題やセルネットワークの細さなどを加味し、完全にモバイル専用のサイトを別に作成するケースが多かったと思います。そもそも利用者はちょっと高めのフルブラウジング可能な定額契約をしていないとPCもどきのページは見れない感じだったので、chtmlやもっと昔にはHDMLなどフィーチャーフォンに特化した特殊なマークアップや画像バイナリ対応、httpsでの画像エンコードできない等いろいろな対策が必要でした。
個人的にはスマホ対応については、レスポンシブルデザインの対応が一番費用対効果がいいと考えいますが、大手企業では、過去の遺産が残っており、モバイル用ドメイン資産などやモバイルチームなる部隊がいたり組織上の構造もあり２つのバージョンのページを持つケースもまだ多いかもしれません。（ここ1年弱で大分変った企業も多いと拝見しています..)
今日は改めてスマホ対応のおさらいのようなビデオでしたがどちらの手法でWebサイトを構築するかメリット・デメリットがそれぞれの企業の歴史や資産により悩むところかもしれませんが、バックエンド部、フロントエンド部含め長期的にどちらがメリットがあるか、2重運用コスト含めきちんと計画することをおすすめさせていただきます。
実は当サイトもそろそろスマホ用のテンプレートをつくろうかと思っているのですが、忙しさにかまけて手つかずですので偉そうなことはいえませんね。すみません。