Google推奨！スマホ最適化における3つのパターンを解説

本稿ではGoogleがモバイルサイト – PCサイトの連携をどう理解するかについて、Googleの公式ガイドを元にいくつかポイントを踏まえて解説していきたいと思います。
Googleが理解するタイプを3つにまとめ、それぞれアノテーション、canonical、Vary http header等での正しいGoogleへの対応をまとめます。
※なお今回は紙面の都合上 javascript の最適化については割愛致します。

対策キーワードで1位を狙いませんか？
貴社コンテンツを徹底的に分析し、1位にするための改善案を無料でご提案します！
まずはサクラサクのコンサルタントにご相談ください。
無料相談はこちら

Googleが理解するタイプ

Googleにおけるスマホページの理解は3つに大別できます。

1. 同一URL 同一コンテンツ
2. 同一URL 別コンテンツ
3. 別URL

1 は、いわゆるレスポンシブデザインが該当し、2 はphp等でユーザエージェント等を見て動的に変更するタイプ、3 は完全に別々にページを作成して見せるタイプになります。
タイプごとに対応すべきポイントは変わってきますので、ここからはタイプ別に順番にまとめて見ていきます。

1. 同一URL 同一コンテンツ

このタイプは、常に同じHTMLコードを返し、CSSでデバイスに合わせて表示を切り替えるレスポンシブウェブデザインのことを指します。
検索エンジンから見ると、まったく同一のURL、同一のコンテンツであり、表示形式が変わるのみとなります。

検索エンジンがこれを理解するには、すべての画像、CSS、javascriptをクロール可能な状態にすることが必要です。
robots.txt 等で画像、CSS等へのクロールをブロックしている場合、解除する必要があります。
また、ページがすべてのデバイスに対応していることを通知するため、HTMLのメタタグである「viewportタグ」を挿入します。

※view-port サンプル

viewportタグはページのサイズや縮尺を、デバイスの幅に合わせてどう調整すべきかをブラウザに伝えるために使用します。
Googleは、色々な情報を総合的に判断しますが、viewportタグから得られる縮尺や幅が合っているかといった情報も、
モバイルフレンドリーであるかの判断の一部に使用していますので、正しく記載する必要があります。

2. 同一URL 別コンテンツ

ユーザエージェントに応じてHTMLが変更されるこのタイプは、GoogleのPCクローラではスマホページが見れないという特徴があります。
従って、モバイルでアクセスした場合にHTMLが変更されることが、Googleのクローラにはすぐには理解することができません。

これに対応するために重要なものが「Vary HTTP Header」です。Vary HTTP Header はキャッシュ制御のための仕組みですが、
通知する内容は「このページは＊＊が変わると内容も変わります」（＊＊にはユーザエージェントやクッキーが入ります）という性質のため、
これを利用して、「このページはユーザエージェントが変更されると内容も変わります」と通知し、
Googleはこれを持って、「このURLはPC用とスマホ用の2つのコンテンツを持っている」と理解します。

なお、任意のURLにて Vary HTTP Header が送信されているかどうかを確認するには、サクラサクラボの「リダイレクト＆ステータスコードチェックツール」を利用すると便利です。よろしければご活用下さい。

リダイレクト＆ステータスコードチェックツール
https://www.sakurasaku-marketing.co.jp/labo/tools/status_code

3. 別URL

PC用とスマホ用で別々のページが存在するタイプは、URLが対になっていることを正しく通知することがポイントとなります。

このタイプの場合、そのままPCおよびスマホ、2つのURLを公開してしまうと、Googleは正しく2つのURLが PC – スマホの関係にあることを理解できません。
これを回避するための方法が、アノテーションになります。

※PC用ページのアノテーションサンプル

アノテーションは上記のようなタグをPC用URLのHTMLに記載し、「対応するスマホのURLはこちら」という具合に通知するものになります。
これにより、PC用ページに来たGoogleのクローラにスマホ用URLを発見させやすくします。

また、これに合わせてスマホページでは canonical タグを設置します。
スマホ用ページの canonical は、コンテンツがPCと同一であることを示すためにPCページのURLを記載します。

※スマホ用ページの canonicalタグサンプル

ここで注意するポイントがあります。それはスマホ用ページに設定する canonical です。
Canonicalを正しく設定し忘れてしまった場合、PC用、スマホ用の2つのページが同一コンテンツだと認識できず、
両ページがPCの検索結果に表示される上、ランキングが下がってしまう可能性があるとGoogleが明記しています。

またこのタイプのように、別々のURLを作成する場合、リダイレクトにも気をつけなければいけません。
リダイレクトはサーバ上で行うものと、javascript等を使用してブラウザ側で行うものがありますが、どちらを利用する場合も、可能な限りステータスコードは302を使用することが推奨されています。
また一貫性のあるリダイレクトであることも必要です。ユーザの利便性を第一に考え、PC – モバイル間で互いに対応するコンテンツに設定しましょう。

参考URL:
Google 別々の URL – ウェブマスター向けモバイルガイド