ブログ

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トレンドセミナー

  1. 【参加費無料】SEO強化セミナー   SEO対策のAtoZ!基礎からトレンドまで徹底解説!

    開催日:2018年3月22日
    場所:東京都新宿区北新宿2丁目21ー1新宿フロントタワー 18F

  2. 2018年抑えるべき最新のSEOトレンド『最新 Google攻略セミナー』

    開催日:2018年3月28日
    場所:サクラサクマーケティング株式会社

資料ダウンロード

用語集

ソースコード集

お役立ちリンク集

お役立ちツール

カテゴリ一覧

タグクラウド

新着記事一覧

  1. コンテンツマーケティング内製化支援サービス 『CACASEL(カカセル)』をリリース

    ~あなたのサービスの紹介を他の誰かに任せてはいけません~   SEO研究所サクラサクラボを運営するサクラサクマーケティング株式会社は、コンテンツマーケティング内製化支援サービス『CACASEL(カカセル)』をリ […]...

    1. サクラサクラボ リニューアルオープンのお知らせ

      デザインのフルリニューアルを行いました 平素はサクラサクラボをご利用いただきまして誠にありがとうございます。 この度、サクラサクマーケティングの運営するサクラサクラボのフルリニューアルを行いましたのでここにお知らせさせて […]...

      1. クローラーとは?SEO対策を行う上で押さえておくべきポイント

        クローラーとは、Googleの検索エンジンをはじめとするロボットがいろいろなサイトの情報を集めるために使用しているもののことです。 別名、Googlebotとも呼ばれ、ページを読み込み(クロールする)、サイト情報を収集格 […]...

おすすめコンテンツ

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

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

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

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

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

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

最新情報を取得する

PAGE TOP