モバイルファーストインデックスとは？ECサイトで確認すべき項目
目次
モバイルファーストインデックスとは、Googleが主にスマートフォン向けページの内容を使ってインデックスと評価を行う仕組みです。パソコン版にだけ詳しい商品説明や内部リンクがあり、モバイル版では省略されていると、その情報が十分に伝わらない可能性があります。
画面を小さくするだけではなく、商品情報、リンク、画像、構造化データ、robots設定がモバイルでも保たれているかを確認します。デザインは変えても、主要内容の意味を同等にすることが基本です。
モバイル版が基準になる理由
スマートフォンから検索し購入する利用者が多く、Googleもスマートフォン用Googlebotでほぼすべてのサイトをクロール・インデックスしています。モバイルでまったくアクセスできない内容は、検索対象としても問題になります。
パソコン版を確認して問題がないだけでは不十分です。Search ConsoleのURL検査や実機で、Googlebot Smartphoneと利用者が見られる内容を確認します。
レスポンシブデザイン
同じURLとHTMLを使い、画面幅に応じて表示を変えるレスポンシブデザインは、Googleが実装と保守のしやすさから推奨する方法です。URLの対応関係や端末別転送を管理する負担を減らせます。
レスポンシブでも、CSSで重要内容を完全に非表示にする、モバイルだけJavaScriptで読み込めないといった問題は起こります。方式ではなく実際の表示を検証します。
主要コンテンツを同等にする
商品名、価格、在庫、説明、仕様、レビュー、配送情報など、購入判断に必要な内容をモバイルにも用意します。画面を短くするために説明を削除するのではなく、アコーディオンやタブで整理できます。
折りたたみ内の内容も、HTMLやレンダリング後のDOMに存在し、操作に依存せず取得できることを確認します。クリック後に初めてサーバーから読み込む主要情報は注意が必要です。
titleとmeta descriptionをそろえる
端末別URLや動的配信を使う場合、モバイルとパソコンで同等のtitleとmeta descriptionを提供します。モバイル版だけ汎用titleになると、商品やカテゴリの内容が伝わりにくくなります。
検索結果上のtitleやスニペットはGoogleが書き換える場合がありますが、ページ固有の正確な情報を用意することが基本です。
内部リンクを減らしすぎない
モバイルメニューの簡略化で、重要カテゴリや関連商品へのリンクが消えることがあります。パソコンではメガメニューから到達できても、モバイルではサイト内検索しか入口がない状態を避けます。
主要カテゴリ、パンくず、商品カード、ページネーションが通常リンクとして機能するかを確認します。タップしやすさとクロール可能性の両方を見ます。
画像とaltを確認する
モバイルでも高品質な主要画像と説明的なaltを提供します。端末別に画像URLを変える場合は、切り替え後のURLが取得可能で、安定しているかを確認します。
遅延読み込みは表示速度に役立ちますが、利用者のスクロールやタップがなければ読み込まれない実装にしないようにします。ファーストビューの商品画像は優先度も検討します。
構造化データを同等にする
モバイル版とパソコン版が別HTMLの場合、Product、Breadcrumbなどの構造化データも両方に用意します。記載する価格、在庫、URLは画面上の情報と一致させます。
モバイルURLを別に持つ場合は、構造化データ内のURLも対応するモバイルURLへそろえます。リッチリザルトテストとURL検査で確認します。
robots設定とリソース
モバイル版だけnoindexが付く、robots.txtで画像やJavaScriptがブロックされるといった差をなくします。動的配信ではUser-Agent判定の誤りでGooglebotへ空ページを返すこともあります。
CDNやWAFのログを見て、スマートフォン用Googlebotが200でリソースを取得できているかを確認します。
モバイル特有の利用体験
文字サイズ、タップ領域、固定バナー、画面を覆う案内、フォーム入力を確認します。購入ボタンを固定する場合も、商品情報や閉じる操作を妨げないようにします。
表示速度とCore Web Vitalsは低速回線や一般的な端末で確認します。高性能な社内端末とWi-Fiだけでは実際の問題を見落とします。
確認手順
トップ、主要カテゴリ、商品、記事、カートからサンプルを選び、パソコンとモバイルの内容を比較します。title、説明、リンク数、画像、構造化データ、canonical、robots設定を一覧にします。
URL検査のレンダリング結果も使い、画面とHTMLの両方を確認します。テンプレートの問題が見つかったら、個別ページではなく共通部品を修正します。
よくある間違い
- モバイルでは説明文をすべて削除する
- 重要リンクをパソコンのメニューにだけ置く
- タップ後にだけ主要内容を読み込む
- モバイル版だけnoindexや汎用titleになる
- 高性能端末とWi-Fiだけでテストする
確認項目
- 主要内容が端末間で同等か
- title、description、robots設定が一致するか
- 主要商品へ通常リンクで到達できるか
- 画像と構造化データが取得できるか
- 固定要素が操作を妨げていないか
- URL検査でレンダリング結果を見たか
端末別URLを使う場合
パソコン用とモバイル用で別URLを持つ場合、両ページの対応関係を明確にし、端末に応じた転送を正しく行います。モバイル用ページはパソコン用の一部へ転送せず、同じ内容の対応ページへ案内します。
canonicalとalternateの設定、サイトマップ、構造化データ内URLを確認します。User-Agent判定のキャッシュが誤ると、パソコン向けHTMLがモバイルに配信されるため、Varyヘッダーなど配信方式も開発担当と確認します。
モバイルの商品一覧を確認する
画面幅の都合で商品カードの説明や価格、在庫ラベルを省略しすぎると、商品を比較できません。商品名だけで違いが分からない場合は、容量、素材、対応機種など主要な比較属性を残します。
ページ送りや「もっと見る」がモバイルだけ別実装になっていないかを確認します。後半の商品へ直接アクセスできるURLとhrefリンクを維持します。
実機テストのシナリオ
検索結果から商品へ入り、画像確認、バリエーション選択、在庫確認、カート追加まで操作します。次にカテゴリへ戻り、絞り込みとページ送りを試します。各場面で表示欠け、誤タップ、戻る操作、URL共有を確認します。
ログイン前後、在庫切れ、セール価格、エラー時もテストします。モバイル表示の問題はSEOだけでなく購入離脱につながるため、デザイン、開発、商品担当で共通の確認項目にします。
変更後の監視
レスポンシブ改修やモバイルメニュー変更後は、Search Consoleのインデックス、Core Web Vitals、構造化データを確認します。主要カテゴリへの内部リンク数が大きく減っていないかもクロール結果で見ます。
検索流入の変化だけでは、モバイル側の技術問題か需要変化かを分けにくいため、レンダリング結果と実際の操作を先に確認します。
ECサイトでの確認例
パソコン版の商品説明にサイズ表と配送条件があり、モバイル版では「詳しく見る」を押した後にAPIから取得する場合、Googlebotがその操作をしなくても内容を確認できる実装へ変えます。最初からDOMへ置き、折りたたみ表示にできます。
モバイルメニューでカテゴリを三階層まで省略した結果、下位カテゴリがサイト内検索からしか見つからない場合は、カテゴリ一覧や親ページから通常リンクを用意します。メニューを大きくしすぎず、リンク経路を保つ方法を選びます。
商品画像をモバイル専用URLへ切り替える場合は、画像が200で取得でき、robots.txtで許可され、構造化データにも正しいURLが入っているかを確認します。画面だけでなく検索エンジンが取得する資源まで比較します。
まとめ
モバイルファーストインデックスでは、スマートフォン向けページの内容が検索上の基準になります。デザインは変えても、商品情報、リンク、メタ情報、構造化データを同等に保ちます。
主要なページ種類を端末間で比較し、モバイルだけ欠ける要素を見つけてください。検索エンジンのためだけでなく、実際の購入者が迷わず商品を確認・操作できる状態を目指します。
