ブログ

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コンサルティング

無料メルマガのご登録(無料)

SEOの最新情報を無料でお届けします!





プライバシーポリシー

監修者:笹本 雅人

記事一覧

SEOシニアコンサルタント

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

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



無料資料ダウンロード

サービス資料ダウンロード

用語集

ソースコード集

お役立ちリンク集

無料メルマガのご登録(無料)

SEOの最新情報を無料でお届けします!





プライバシーポリシー

お役立ちツール

カテゴリ一覧

タグクラウド

新着記事一覧

  1. サイトリニューアルで失敗しない為のSEOチェックポイント

    制作してから年月が経過したWebサイトでは、リニューアルを行うケースもあるかと思います。 メインとする目的は様々でしょうが、その際、検索流入を失いたくないというのはすべてのWeb担当者が持つ共通の思いでしょう。 この記事 […]...

    1. インスタグラムの公式な投稿埋め込み方法がSEOに不向きな理由

      ブログやWebサイトだけでなく、インスタグラムやtwitterなどのSNSを運営していて、ブログ上でSNSの紹介や、逆にSNS上でブログの紹介をされる方も多いかと思います。 ブログ上でSNS投稿を紹介する場合、投稿埋め込 […]...

おすすめコンテンツ

  1. SEO対策(検索エンジン最適化)とは?初心者にもわかりやすく解説します

    SEO対策とは「検索エンジン最適化」のことで、数あるWeb集客手法の中でも、検索エンジンからの成果を最大化することです。基本的にはユーザーや検索エンジンからより評価されるように、WebサイトやWebページの変更・改修を続 […]...

    1. コンテンツマーケティングとは?特徴と事例、社内でできる方法を解説します

      ここ数年で急激にコンテンツマーケティングという言葉を聞くようになりました。しかし、「興味があるがまだ着手できていない」という人や、「そもそもどんなコンテンツを作ればいいのかわからない」、「社内で運用しているが成果がでない […]...

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

        目次 SEOに強いコンテンツとは回答性網羅性文字数ユーザー体験[回答性×網羅性×文字数×ユーザー体験]を考慮したSEOに強いコンテンツ制作お問い合わせフォーム SEOに強いコンテンツとは 検索エンジンで上位表示をさせるた […]...

最新情報を取得する

PAGE TOP