目次を見る07

モバイル対応の点検手順:スマホ版の中身とGoogleの見え方

Wemiro編集部読了目安 11分
モバイル対応モバイルファーストインデックスSearch Console

手元のスマホで開くと、きれいに表示される。それでも安心はできません。

モバイル対応の点検で先に見るべきなのは、見やすさではなく「スマホ版に、PC版と同じ中身が載っているか」です。Googleは、スマートフォン用のクローラー(巡回プログラム)で取得したスマホ版の内容を、インデックス登録(検索の台帳への登録)と順位づけに使っています。これをモバイルファーストインデックスと呼びます。つまり、スマホ版から消した文章は、検索の評価材料として使われないおそれがあります。

見やすさや操作のしやすさも大事です。ただ、それは2番目の点検です。順番を逆にすると、表示速度の改善に何週間もかけたあとで、肝心の料金表がスマホ版に無かったと気づく、ということが起こりえます。

なぜ「見やすい」だけでは合格にならないのか

Googleの公式ドキュメントは、スマホ版にPC版と同じ内容を載せるよう求めています。スマホ版の内容が少ない場合は、主要な内容がPC版と同等になるよう更新を検討すること、とも書いています。

理由ははっきりしています。公式の説明では、サイトのインデックス登録はスマホ版から行われます。スマホ版の内容を意図的に減らした場合は、Googleが得られる情報が減るため、モバイルファーストインデックスの適用時にある程度のアクセス減を見込むことになる、とまで書かれています。

ここでよくある誤解が一つあります。「画面を短くするために、スマホでは一部を省いている。PC版には全部あるから問題ない」という考え方です。PC版にあるかどうかは、この点検では決め手になりません。見るべきは、スマホ版に載っているかどうかです。

一方で、デザインまで同じにする必要はありません。公式も、アコーディオン(タップで開閉する折りたたみ)やタブに移して見た目を整えるのは構わないとしています。削るのではなく、畳む。この区別が点検の軸になります。

なお、表示の仕組みによって点検の重さは変わります。PCとスマホで同じURL・同じHTMLを使い、画面幅に合わせて見た目だけを変えるレスポンシブデザインなら、公式の説明では内容とメタデータは両方で同じになります。そのため、レスポンシブのサイトで差が出るとしたら、多くは「スマホのときだけ一部を出さない」テーマの作りや、操作されるまで読み込まない仕掛けです。PC用とスマホ用でURLが分かれている場合は、点検項目が増えます(後述)。

点検に使う道具は2つ

点検には、無料で使える公式の道具を2つ使います。

道具何が分かるか向いている点検
Search Console の URL 検査ツールGoogleのツールから見たページのスクリーンショット、取得したHTML、読み込んだリソース(画像や CSS・JavaScript などの部品)の一覧、使われたクローラーの種類(PC用かスマホ用か)スマホ版の中身がGoogleに見えているか
Lighthouse(Chrome の点検ツール)表示速度、使いやすさ(アクセシビリティ)、検索向けの基本設定などの項目ごとの合否スマホで快適に使えるか

URL 検査ツールの「公開URLをテスト」は、まだインデックスされていないページにも使えます。ただし、ログインなしでインターネットから見られるページである必要があります。会員限定ページは対象外です。

Lighthouse は、Chrome のデベロッパーツールから実行するほか、PageSpeed Insights の画面にURLを入れて「分析」を押すだけでも動きます。公式の説明では、不合格になった項目を改善の手がかりとして使うよう案内されています。Googleのページエクスペリエンス(ページの使い心地)の解説でも、モバイルでの使いやすさを含む改善点を見つける道具として紹介されています。

自社サイトで通す6ステップ

ここからは、架空の会計事務所サイトの「サービス案内」ページを例に、実際に手順を通してみます。PC版には、料金表、よくある質問8問、相談事例3件が載っています。スマホ版は「長すぎる」という声を受けて、テーマの設定で料金表を非表示にしていました。よくある質問は「もっと見る」を押すと読み込まれる作りです。

  1. 点検するページを3本に絞る。 全ページを一度に見る必要はありません。問い合わせにつながるページ、検索からの入口になっている記事、トップページの3本から始めます。例のサイトでは、売上に直結する「サービス案内」を最初に選びました。
  2. スマホ版とPC版の中身を項目ごとに突き合わせる。 本文、見出し、画像の代替テキスト(画像の内容を説明する文字)、構造化データ(検索エンジン向けの補足情報)の4つを、PCとスマホで見比べます。公式はこれらをそろえるよう求めています。例では、スマホ版に料金表がまるごと無いことが分かりました。ここで1つめの不合格です。
  3. URL 検査ツールで「公開URLをテスト」を実行する。 Search Console でページのURLを検査し、「公開URLをテスト」を押します。結果が出たら「テスト済みページを表示」を開きます。スクリーンショット、取得したHTML、読み込んだリソースの一覧が確認できます。取得に使われたクローラーがPC用かスマホ用かを示す欄もあります。
  4. スクリーンショットとHTMLで、主要な内容が出ているかを見る。 見るのは見た目の美しさではありません。本文と見出しが、操作なしの状態で入っているかです。公式は、スワイプやクリック、文字入力などの操作をしないと読み込まれない内容を、Googleは読み込まないと書いています。例のサイトでは、取得したHTMLによくある質問が1問も入っていませんでした。「もっと見る」を押して初めて読み込む作りだったためです。2つめの不合格です。
  5. クロールを止める設定がPCとスマホでそろっているかを見る。 URL 検査ツールには、robots.txt(クローラーの立ち入りを制限するファイル)でクロールがブロックされていないかを示す欄があります。まずここを確かめます。あわせて、ページの robots メタタグ(noindex など、検索への登録を制御する指定)がPCとスマホで同じかも見ます。公式は、スマホ版だけ noindex や nofollow が付いていると、クロールやインデックスに失敗するおそれがあると注意しています。例のサイトはここは問題なしでした。
  6. 最後に Lighthouse で使い勝手を点検する。 PageSpeed Insights にURLを入れて分析し、不合格になった項目を上から確認します。例では、中身の修正(料金表とよくある質問)を先に済ませてから、ここに進みました。

例のサイトの結論はこうです。料金表は消さずにアコーディオンへ移す。よくある質問は、最初のHTMLに全文を入れたうえで折りたたむ。Lighthouse の指摘は、そのあとに順に片づける。表示速度の改善より先に、この2つを直すことにしました。

判定表:どこで不合格になったら、何を優先するか

点検で見つかった問題を、優先度つきで仕分けるための表です。合否の目安と優先度は、公式の記述をもとにした編集部の整理です。

見る場所合格の目安不合格のときの典型例優先度
スマホ版の本文・見出しPC版と同じ内容がある(畳まれていてもよい)スマホだけ一部を非表示・削除している高
取得したHTML主要な内容が操作なしで入っている「もっと見る」で初めて読み込む高
robots メタタグ・robots.txtPCとスマホで同じスマホ版だけ noindex が付いている高
画像の代替テキスト・構造化データPCとスマホで同じスマホ用テンプレートだけ抜けている中
スクリーンショット本文が読める形で写っている真っ白、または大きく崩れている中(原因を HTML とリソース一覧で確認)
Lighthouse の項目不合格の項目が少ない速度や使いやすさで不合格が多い中〜低

さきほどの例に当てはめると、料金表の非表示は1行め、よくある質問の読み込み方は2行めに当たります。どちらも「高」です。Lighthouse の指摘は最後の行なので、後回しで構いません。

優先度を「高」と「それ以外」に分けているのには理由があります。公式は、ページの使い心地が十分でなくても、Googleは最も関連性の高い内容を表示しようとする、と書いています。使い心地は大事ですが、そもそも中身が読まれていなければ、関連性を判断する材料がありません。だから中身の点検を先にします。

PCとスマホでURLが分かれているサイトの追加点検

m. で始まるスマホ専用URLを使っている場合や、端末によって返すHTMLを変えている場合は、上の6ステップに加えて次を確かめます。

  • robots.txt がそれぞれ意図どおりに働いているか。 公式は、両方のバージョンで robots.txt が意図どおりに動くかを確認し、多くの場合は同じルールを使うよう勧めています。
  • 構造化データと代替テキストが、スマホ側にもあるか。 テンプレートが別だと、片方だけ抜けることがあります。
  • canonical(正規URLの指定)と alternate の向き。 この確認は手順が長くなるため、PC・スマホで別URLのときのcanonicalの向きで詳しく扱っています。

自己点検チェックリスト

自社のページを1本選んで、次の質問に答えてみてください。1つでも「いいえ」なら、そのページから直します。

  • スマホ版に、PC版と同じ本文・見出しが載っているか(畳まれていてもよい)
  • URL 検査ツールで取得したHTMLに、主要な内容が操作なしで入っているか
  • スマホ版だけに noindex や nofollow が付いていないか
  • 画像の代替テキストと構造化データが、スマホ版にもあるか
  • コンテンツはモバイル端末でうまく表示されるか
  • 広告が多すぎて、本文の邪魔になっていないか
  • 本文を覆うような割り込み表示(全画面の案内など)を避けているか
  • 本文と、それ以外の部分の区別がつきやすいか

後半の4つは、Googleがページの使い心地を自己評価するための問いとして挙げているものを、日本語にしたものです。公式自身が、これで使い心地のすべてを網羅するわけではないと断っています。点検の入口として使ってください。

よくある誤解:使い心地はサイト単位で決まる?

「スマホで重いページが1つあると、サイト全体の評価が下がるのでは」と心配する人がいます。公式の説明では、Googleの主要な順位づけの仕組みは、使い心地の面も含めて、基本的にページ単位で内容を評価します。ただし、サイト単位の評価も一部ある、と書かれています。

全部をいっせいに直す必要はありません。まずは、問い合わせにつながる重要なページから順に点検すれば十分です。

折りたたんだ内容が本当に読み込まれているかを詳しく確かめたいときは、アコーディオン内のテキストはインデックスされる?が役に立ちます。Search Console のウェブに関する主な指標(表示速度などの指標)で「低速」と出ている場合は、コアウェブバイタル悪化を切り分ける手順もあわせて確認してください。

出典

  1. Google 検索セントラル - モバイルファーストインデックスに関するベストプラクティス
  2. Search Console ヘルプ - URL 検査ツール
  3. Google 検索セントラル - Google 検索結果でのページ エクスペリエンスについて
  4. Chrome for Developers - Lighthouse の概要

NEXT STEP

クライアントへの説明に使える実際の画面を見てみませんか

ご自身の目で、GA4・Search Consoleのデータがどう整理されるかを確認いただけます。

無料デモを見てみる