ブログ

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

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

この記事の目次

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-labo.jp/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 – ウェブマスター向けモバイルガイド

まとめ

ここまでGoogleがサポートするスマホ最適化3パターンを見てきました。
パターンごとに違いがありますが、基本としてはGoogleに正しくURLおよびコンテンツが認識され、インデックスされるための施策になります。
どれもスマホ最適化する上で重要な項目になりますので、きちんと対応していきましょう。





■関連情報:サクラサクマーケティングのSEOコンサルティングサービス
中小・ベンチャー企業の売上をサポートするSEO対策低価格・高品質なSEOコンサルティング

監修者:笹本 雅人

記事一覧

SEOシニアコンサルタント

2013年株式会社ブレインネットに入社し、会社合併を経てサクラサクマーケティング株式会社に合流した後も現在に至るまでSEOコンサルタントとして大小問わず様々なクライアントの集客向上に貢献。

特にシステム開発がからむSEOを得意としているほか、自社メディアのブログの作成・監修を行い、数多くのキーワードで上位表示を達成している。



SEOトレンドレポート

資料ダウンロード

用語集

ソースコード集

お役立ちリンク集

お役立ちツール

カテゴリ一覧

タグクラウド

新着記事一覧

    1. 観測ワード数50倍!超大型サイトの健康状態を瞬時に把握可能になったアイスタイル様(@cosme)事例

      大規模なサイトを運営するweb担当者が抱えるミッションには、「サイトの健康状態をいかに明瞭に把握できるか」、「いかに社内共有しやすい環境を作るか」といった点が挙げられるでしょう。特にサイトの規模が大きければ、それだけ自然 […]...

      1. 2019年 新年のご挨拶

        新年、明けましておめでとうございます。 サクラサクラボを運営しております、 サクラサクマーケティング株式会社 取締役社長の根岸でございます。 このブログの場を借りまして、新年のご挨拶を申し上げさせて頂きたく存じます。 皆 […]...

おすすめコンテンツ

  1. モバイルファーストインデックス(MFI)とは?導入時期や必要な対策まとめ

    2016年11月、Googleウェブマスターブログから、モバイルファーストインデックスMFI)についての取り組みを紹介するブログが公開されました。 Google ウェブマスター向け公式ブログ: モバイル ファースト イ […]...

    1. Googleの順位変動が起こる原因と必要な対策(2017年版)

      2017年に入って以前にも増してGoogleの順位変動が大きくなっています。 これまで安定していた順位が下落し、ひどい時には圏外まで急落するなどの経験をされたWeb担当者さまもいると思います。 すでにSEOにおいてはこの […]...

      1. SEOに強いコンテンツは回答性×網羅性×文字数×ユーザー体験

        SEOに強いコンテンツとは 検索エンジンで上位表示をさせるためには、サイトパワーとユーザーが求めるコンテンツが必要です。 ユーザーが求めるコンテンツとは、情報や課題の解決方法であり、それを満たすコンテンツを多く提供してい […]...

最新情報を取得する

PAGE TOP