何年もの間、GoogleはWebサイトのデスクトップバージョンを「プライマリ(主要)」バージョン、モバイルバージョンを「代替」として扱ってきました。その時代は終わりました。
モバイルファーストインデックスにより、Googleはインデックス登録とランキングに主にコンテンツのモバイルバージョンを使用します。サイトに優れたデスクトップコンテンツがあっても、モバイルバージョンが削ぎ落とされていたり壊れていたりすると、デスクトップで検索しているユーザーであっても、ランキングに悪影響が及びます。
このガイドでは、モバイルファーストの世界でサイトが生き残り、繁栄するための方法を説明します。
1. モバイルファーストインデックスとは?
一般的な誤解を明確にすることが重要です。個別の「モバイルインデックス」はありません。 Googleインデックスは1つだけです。
- 昔の方法: Googlebot(デスクトップ)がサイトをクロールしていました。大画面で見たものに基づいて、ランキングの順位を決定していました。
- 現在の方法: Googlebot(スマートフォン)がサイトをクロールします。モバイル画面で見たものに基づいて、ランキングの順位を決定します。
影響: 「スペースを節約する」ためにモバイルでコンテンツを隠すと(例:テキストやタブを削除する)、Googleはそのコンテンツを効果的に見ることができなくなります。インデックスされません。
2. 解決策:レスポンシブウェブデザイン
個別のモバイルサイト(m.example.com)を持つこともできますが、Googleはレスポンシブウェブデザインを強く推奨しています。
レスポンシブデザインとは、Webサイトがすべてのデバイスで同じHTMLコードと同じURLを使用するが、CSSを使用して画面サイズに基づいてレイアウトを変更することを意味します。
重要なタグ:ビューポート
レスポンシブデザインを機能させるには、サイトのすべてのページの<head>セクションに次のメタタグを含める必要があります。
<meta name="viewport" content="width=device-width, initial-scale=1">この行はブラウザに次のように伝えます。「使用されている特定のデバイスの幅に合わせて、このコンテンツをスケーリングしてください。」これがないと、モバイルブラウザはデスクトップバージョンをレンダリングして縮小しようとし、ユーザーにピンチ操作やズーム操作を強いることになります(ユーザビリティの大きな失敗)。
3. 「コンテンツのパリティ(等価性)」ルール
モバイルファーストインデックスで成功するには、デスクトップバージョンとモバイルバージョンの間でパリティ(等価性)を確保する必要があります。
- 同じコンテンツ: テキスト、画像、動画は同一である必要があります。モバイルユーザー向けに記事を要約しないでください。
- 同じ構造化データ: スキーママークアップ(JSON-LD)はモバイルバージョンに存在する必要があります。
- 同じメタデータ: タイトルとメタディスクリプションは同じである必要があります。
- 視覚的チェック: 広告やポップアップ(インタースティシャル)がモバイルの実際のコンテンツを覆っていないことを確認してください。Googleは、ユーザーをイライラさせる「押し付けがましいインタースティシャル」にペナルティを科します。
4. Google Search Consoleでのトラブルシューティング
Google Search Console(GSC)には、「エクスペリエンス」タブの下に専用の「モバイルユーザビリティ」レポートがあります。モバイルユーザーにとって使いにくいページが強調表示されます。
最も一般的な3つのエラーとその修正方法は次のとおりです。
エラーA:「テキストが小さすぎて読めません」
- 問題: フォントサイズが小さすぎて、ユーザーが読むためにズームインする必要があります。
- 修正: Googleは、本文テキストの基本フォントサイズとして少なくとも16pxを推奨しています。CSSを確認して、フォントを固定の小さなサイズ(例:10px)に設定していないことを確認してください。
エラーB:「クリック可能な要素同士が近すぎます」
- 問題: 「太い指症候群」。ボタンやリンクが近すぎて、「キャンセル」をタップしようとしたユーザーが誤って「送信」をタップしてしまいます。
- 修正: タッチターゲットのサイズが少なくとも48x48ピクセルであり、それらの間に約8ピクセルのマージンがあることを確認してください。
エラーC:「コンテンツの幅が画面の幅を超えています」
- 問題: ユーザーはページ全体を見るために水平方向(左から右)にスクロールする必要があります。これはUXでは厳禁です。
- 修正: これは通常、固定幅の画像またはテーブル(例:
width: 800px)によって引き起こされます。要素が自動的に縮小するように、CSSの固定幅を相対幅(例:max-width: 100%)に変更してください。
結論
モバイルファーストインデックスはオフにできる設定ではありません。Webのデフォルトの状態です。レスポンシブデザインを採用し、コンテンツのパリティを確保し、Search Consoleでユーザビリティエラーを監視することで、小さな画面で閲覧している60%以上のユーザーがサイトにアクセスできるようになります。