SEO研究所サクラサクラボ

SEO・コンテンツマーケティングを成功に導くパートナー

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およびコンテンツが認識され、インデックスされるための施策になります。
どれもスマホ最適化する上で重要な項目になりますので、きちんと対応していきましょう。

MFIへの早めの対応を!

Googleは2020年度中に全サイトをMFIへ切り替えると発表しています。
もし自身のサイトがモバイルに最適化されていない場合、早めの対応をしないと切り替え後に順位の下落、流入減少が起きる可能性があります。

こうした最新情報をサクラサクラボでは無料のメルマガで発信中!

どなたでもお名前とメールアドレスのみで簡単に登録がいただけます!

↓↓↓メルマガ登録はコチラ↓↓↓

執筆者 / 監修者

執行役員 CTO
コンテンツマーケティング部 部長
プロダクトエンジニアリング部 部長

株式会社CSK(現株式会社SCSK)にて保守運用マネージャとして活躍後、独学でプログラミングおよびSEOを学び、サクラサクマーケティングの前身である株式会社ブルトアに入社。
SEOの知識と技術力を生かして主にSEOにおけるツール開発、R&Dなどを進め、中核事業に成長させる。

現在はエンジニア以外にシステム運用チーム、コンテンツマーケティングチームも合わせて取りまとめ、プロダクト全般を統括中。

◇担当サービス
・SEO:システム設計、開発(インフラ、サーバサイド)
・コンテンツマーケティング:プランナー / ディレクター
・ASO:コンサルタント / システム設計、開発(インフラ、サーバサイド)


◇得意言語
・PHP
・JavaScript
・C#


◇その他(個人の活動)
・アプリ開発
個人アプリの企画、開発を手掛け、50万DLを超える実績を持つ。

・Webサービス開発
個人でもWebサービス開発を行い、「共起語」で長く1位を獲得している共起語ツールなども手がけている。

Blog | Twitter | Facebook | Note | Qiita

その他のブログ記事

Return Top