この記事はAhrefs公式ブログの日本語訳です。
原文：Mobile SEO: 10 Optimization Tips to Build a Mobile-Friendly Site
（著者：Jamie Grant / 原文の最終更新日：March 30, 2023）
※フルスピード註：この記事は2023年3月30日時点の記載をもとに翻訳しています。Ahrefs公式ブログの記事は今後追記・再公開されることがありますことをご了承ください。
世界中のすべての Web サイト訪問の大部分はモバイル デバイスによるものです。 Web サイトをモバイル向けに最適化することは、SEO においてかつてないほど重要になっています。
この記事では、モバイル SEO とは何か、そしてそれがなぜ重要なのかを説明することから始めます。次に、この記事の核心に入り、効果的なモバイル最適化のためのトップ 10 のヒントを共有します。
モバイルSEOとは？
モバイル SEO は、検索エンジンからのオーガニック トラフィックを促進するために Web サイトのモバイル バージョンを最適化するプロセスです。モバイルの最適化は、レスポンシブ デザインの使用などの技術的な実装が重要な役割を果たすモバイル デバイスで最高のエクスペリエンスを提供することに重点を置いています。
なぜ、モバイル最適化が重要なのか？
Statistaによると、2022 年の最終四半期には、モバイル デバイスが世界のモバイル トラフィックの 59% を生成しました。
主にモバイル デバイスからサイトを閲覧するのはユーザーだけではなく、Googlebot（※フルスピード注：Googlebotとは？どのように機能する？の翻訳記事はこちら）も同様です。
2016 年、Google はモバイル ファースト インデックス（※フルスピード注：モバイルファーストインデックスの採用について：知っておくべきことの翻訳記事はこちら）作成を発表しました。その結果、Google は主に Googlebot スマートフォン ユーザー エージェントを介してウェブをクロールします。これは、Google がインデックス作成とランキングに主にモバイル バージョンのコンテンツを使用することを意味します。
モバイル ファースト インデックスは 2018 年に展開を開始しました。2021 年までに、大多数のサイトが新しい形式のクロールに移行しました。
長年にわたり、これは SEO 専門家の間で大きな話題でした。しかし、Google の John Mueller 氏が言うように、モバイル ファースト インデックスは今や「生活の一部」になっています。
ウェブサイトをモバイル対応にするための 10 のヒント
これで、モバイルの最適化が非常に重要である理由がわかりました。ここでは、モバイル向けに効果的に最適化するための私のトップ 10 のヒントを紹介します。
ヒント 1. レスポンシブ デザインを使用する
さまざまなデバイスにコンテンツを提供するアプローチを選択する場合、いくつかのオプションがあります。
レスポンシブデザイン（推奨）
レスポンシブ デザインを使用すると、デバイスに関係なく同じ HTML ファイルを提供できます。次に、CSS はデバイスのビューポートの寸法に合わせてページのレンダリングを変更します。これは、単一の URL を使用してコンテンツのすべてのバージョンを提供することも意味します。
レスポンシブ デザインにより、デバイスに合わせて同じコンテンツを効果的に読み込むことができます。
レスポンシブ デザインは、SEO だけでなく Google のガイダンスでも推奨されています。
2019年に遡ると、ジョンはRedditで「ある時点で、個別のモバイルURLを持つこれらすべてのサイトはレスポンシブデザインに移行すべきだ」と述べた。
結局のところ、レスポンシブ デザインを使用しても SEO のメリットはありません。ただし、メンテナンスははるかに簡単でクリーンです。たとえば、正規の問題（※フルスピード注：Google、20の正規化シグナルを使用。Canonicalタグだけではないの翻訳記事はこちら）や、モバイル/デスクトップのランキングでどの URL を提供するかを Googlebot が誤解することを心配する必要はありません。
モバイル用に個別のドメイン/URL 構造を設定する（非推奨）
過去に一般的に使用されていたアプローチは、別の URL またはドメイン構造を介してページのモバイル バージョンを提供することでした。一般的な例としては、「m.example.com」のようなモバイル用サブドメインの構造を言います。
デスクトップ：example.com/page
携帯：m.example.com/page
ユーザーがページを読み込むと、サーバーはユーザーが使用しているデバイスを判断し、ユーザーを適切な URL に誘導する必要があります。
1 つのページに複数の URL を使用すると、URL 管理が煩雑になるため、この方法はお勧めできません。
正しいシグナルが設定されている場合でも、Googlebot がこれらのシグナルを適切に解釈しないリスクが追加されます。これにより、インデックス作成の問題が発生したり、Google がそのページを重複コンテンツ（※フルスピード注：重複コンテンツ: 重複コンテンツが発生する理由と修正方法の翻訳記事はこちら）として識別したりする可能性があります。
現在この設定を使用している場合は、以下の正規のタグ（※フルスピード注：canonicalタグ：初心者のための簡単ガイドの翻訳記事はこちら）構造に従っていることを確認する必要があります。
デスクトップ: 自己参照の正規タグ
モバイル: ターゲットデスクトップ URL への正規タグ
デスクトップ バージョンに rel=”alternate” タグを実装することもできます。
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/">
とはいえ、長期的に見た最善の解決策は、レスポンシブ デザインのセットアップに移行することです。
動的な配信（非推奨）
レスポンシブ デザインと同様に、動的配信では、単一の URL を介してさまざまなデバイスに適したコンテンツを配信します。
ただし、動的配信との主な違いは、それぞれのデバイスに合わせて事前定義されたさまざまな HTML ファイルを配信することです。
このアプローチは、単一の URL を介して複数のデバイスにコンテンツを提供できるという利点があるため、個別の URL/ドメイン構造オプションよりも確実に優れています。
ただし、動的な配信は推奨されません。歴史を見れば、このアプローチは技術的な問題で有名であることがわかります。
動的配信では、ユーザーがどのデバイスで閲覧しているかを決定するのは Web サーバー次第です。動的配信設定では、デスクトップ バージョンのページがモバイル デバイス上のユーザーに誤って表示されることがよくあります。
ヒント 2. モバイル デバイスのページ速度を最適化する
Core Web Vitals（※フルスピード注：SEOと開発者のためのコアウェブバイタルの翻訳記事はこちら）の時代には、強力なページ速度パフォーマンスが SEO プロフェッショナルによってかつてないほど求められていると言えるでしょう。
実際、Google が 2021 年に初めて Core Web Vitals をランキング要素として展開したとき、モバイル パフォーマンスのみに焦点を当てていました。その後、Google は 2022 年 2 月まで待ってから、デスクトップの Core Web Vital パフォーマンスをランキング要素として使用しました。 Google がどのデバイスを優先しているかは明らかです。
Google は、モバイルおよびデスクトップの Core Web Vital ランキング シグナルをそれぞれの検索結果に適用します。そのため、モバイル検索結果については、Google はモバイル デバイスからの Core Web Vital パフォーマンスに重点を置くことになります。
Core Web Vitals に対してサイトのパフォーマンスを確認するための優れた出発点は、Google Search Console (GSC) の専用レポートにアクセスすることです。 [エクスペリエンス] セクションの左側のナビゲーションを使用して、このレポートに移動できます。
モバイル レポートをクリックすると、過去 3 か月間の Core Web Vital の各指標に対するサイトのパフォーマンスが表示されます。このデータは、モバイル デバイスを使用したサイト上の実際のユーザーからCrUX (Chrome ユーザー エクスペリエンス レポート)を介して収集されます。
GSC のこのレポートの優れている点は、問題の URL が同様のページのグループにまとめられていることです。つまり、作業が必要な主要なページ テンプレートのリストを書き留めることができます。
問題領域と修正の可能性についてさらに詳しく知るには、PageSpeed Insights （※フルスピード注：SEOとデベロッパーのためのGoogle PageSpeed Insightsの翻訳記事はこちら）を常にチェックする価値があります。
PageSpeed Insights の使い方は簡単です。テストしたいページの URL を入力して「Enter」を押すだけです。デフォルトでは、ツールはページのモバイル版を自動的にレビューします。
最初に、「実際のユーザーが経験していることを発見する」という見出しの下にいくつかの洞察が表示されます。まず、このレポートが私が主に焦点を当てているレポートです。
このレポートは、CrUX を介して実際のユーザー データを利用します。ボットではなく実際のユーザーのエクスペリエンスを理解することが重要であるだけでなく、Google はランキング アルゴリズム内でこのデータ ソースも使用しています。
ここでは、Ahrefs のホームページが 3 つの Core Web Vital 指標をすべて満たしていることがわかります。
レポートのさらに下の「機会」セクションと「診断」セクションにもいくつかのアクションが表示されます。これらは、Core Web Vital のパフォーマンスの向上について開発者と会話する際の優れた出発点となります。
PageSpeed Insights を使用する場合は、ツール内で複数のページ テンプレートの URL をテストすることを忘れないでください。ページ速度のパフォーマンスは、ページの種類によって大きく異なることがよくあります。
ただし、ここでは表面をなぞっただけです。 GSC と PageSpeed Insights は、ページ速度を監査するための優れた出発点にすぎません。
ページ速度とCore Web Vitals（※フルスピード注：SEOと開発者のためのコアウェブバイタルの翻訳記事はこちら）に関する Patrick Stox の専用ガイドを確認して、ページ速度の知識、分析、アクション プランを次のレベルに引き上げてください。
ヒント 3. サイトのテストとエラーの監視
モバイル ユーザビリティに関する主要なエラーがないかサイトを定期的にテストすることをお勧めします。
これには複数のツールがありますが、専用の「モバイル ユーザビリティ」レポートを備えた GSC 経由から始めるのが最適です。このレポートは、左側のナビゲーションの [エクスペリエンス] セクションにあります。
ここでは、モバイルのユーザビリティに問題がある URL の数を追跡できます。 GSC は 3 か月の速度グラフを提供します。これはエラーの急増を特定するのに便利で、エラーを開発リリースと関連付けることができます。
下にスクロールすると、サイトで発生しているモバイル ユーザビリティの問題を正確に確認できます。クリックして個々のレポートにアクセスすると、影響を受ける URL を確認することもできます。
Search Console 以外で、Google のモバイル フレンドリー テストツールを使用して、モバイル ユーザビリティの問題を明らかにすることもできます。
これは、レビューしたいサイトに GSC アクセス権がない場合に特に便利です。ただし、より広範囲の URL が自動的にカバーされるようになるため、アクセス権を取得することをお勧めします。
モバイル フレンドリー テストを使用するには、テストしたいページの URL （またはコード） を入力するだけで、ページがモバイル フレンドリーであるとみなされるかどうかを確認できます。
この場合、ツールは Ahrefs ホームページがテストに合格したことを示します。
一方、テストしたページがモバイル対応でない場合は、モバイルでは使用できないというメッセージとその理由のリストが表示されます。
特定のモバイル ユーザビリティの問題とその対処方法について詳しく知りたいですか? Google には、さらに詳しく説明した優れたドキュメントがいくつかあります。
ヒント 4. コンテンツをモバイル対応にする
Web サイトがモバイル向けに最適化されていることを確認することは、技術的な基盤だけではありません。モバイル ユーザーも念頭に置いてコンテンツが作成されていることを確認する必要があります。
多くの SEO は短い段落や文を使用することを好みます。これは、モバイル最適化の実践とうまく調和しています。
このアプローチにより、コンテンツがモバイル デバイスで確実に読めるようになります。記事にアクセスして、膨大な量のテキストを読みたい人がいるでしょうか?私じゃない。
一般的なガイドとして、1 段落あたり最大 3 文を目指します。段落に自然に 1 つの文だけが含まれる場合でも、それは問題ありません。
コピーの下書きを校正するときは、可能な限り長い文を短い文に分割することをお勧めします。
同じルールが紹介にも適用されます。実際、ここではこれらのルールを最も厳密に適用する必要があります。これらは短く、簡潔で、要点を押さえたものでなければなりません。
読みやすさをさらに高めるには、さまざまな要素やメディアを含めてコピーを分割するとよいでしょう。
これらには次のものが含まれます。
- 箇条書き
- 番号付きリスト
- 引用
- 画像
- 動画
私がそこで何をしたかわかりますか？
さまざまな種類のメディアを使用する場合は、それらがモバイル デバイスで正しく表示されることを確認する必要があります。画像が不釣り合いに読み込まれると、ユーザーは非常にイライラします。
ヒント 5. モバイル SERP 向けに最適化する
モバイル SERP （検索エンジンの結果ページ） は、モバイル バージョンとデスクトップ バージョンの間でかなり異なる場合があります。
選択したキーワードの SERP を参照するときは、デスクトップとモバイルの両方の結果を手動で確認することが重要です。
ここに例を示します。 「卵の目玉焼きの作り方」というクエリに対する wikiHow の検索結果を見てみましょう。
デスクトップの検索結果には、非常に標準的な検索結果が表示されます。
ただし、モバイルの検索結果では、Google がハウツー画像のリッチリザルト（※フルスピード注：Rich Snippets: リッチスニペットとは何か?の翻訳記事はこちら）を含めていることがわかります。
「SERP 資産」は非常に重要です。上の例のような豊富な機能を取得すると、結果が他より目立つようになります。
これは、スキーマ マークアップ（※フルスピード注：スキーママークアップとは何ですか?SEOに使用するには?の翻訳記事はこちら）がモバイル最適化にとっていかに重要で関連性があるかを示しています。この例では、wikiHow がハウツー スキーマ を組み込むことで素晴らしい仕事をしました。
検索結果でデバイスを切り替えようとしていますが、携帯電話を手に取りたくないですか? Ahrefs のSEO ツールバーを使用すると、別のデバイスから結果をデスクトップ ブラウザに直接読み込むことができます。
ヒント 6. モバイル フレンドリーなナビゲーションを含める
モバイル デバイス向けにサイトを最適化する際の最大の考慮事項の 1 つは、ヘッダー ナビゲーションの実装の選択です。
これは、サイト内でモバイル デバイス向けに適切に対応するのが最も複雑な領域の 1 つです。
ハンバーガー メニューは、モバイルファーストの世界で人気のオプションになっています。ボタンがハンバーガーに似ていることが多いため、この名前が付けられました（だそうです）。
以下は、Amazon で実際に使用されているハンバーガー メニューの例です。
通常ページの最上部にある「ハンバーガー」アイコンをクリックすると、メニューが開きます。
この場合、メニューは左側から開き、ナビゲーション サブカテゴリにさらに展開するオプションが表示されます。
ハンバーガー メニューについては、SEO 担当者や UX 専門家の間で激しく議論されています。しかし、私の意見では、モバイル向けの最適化に関してはハンバーガー ナビゲーションに勝るものはありません。
このアプローチはクリーンでコンパクトであるだけでなく、ユーザーはモバイルでのこの種のメニューに慣れてきています。
デスクトップ サイトでは「メガ メニュー」アプローチを採用し、モバイル サイトではハンバーガー メニューに切り替えても問題ありません。
一番のルールは、両方のメニュー内のリンクが同じであることを確認することです。デスクトップとモバイルの両方のナビゲーションにまったく同じリンクを含めるようにしてください。
ここでは、Apple がデスクトップにメガ メニューを表示していることがわかります。
モバイル サイトではハンバーガー メニューが使用されますが、デスクトップ バージョンとまったく同じリンクが表示されます。
電子商取引 Web サイトの場合、ファセット ナビゲーション（※フルスピード注：ファセットナビゲーション： 定義、例、SEOのベストプラクティスの翻訳記事はこちら）も重要な考慮事項です。
アマゾンを振り返ってみましょう。製品リストページにはたくさんのフィルターオプションがあります。
モバイル ユーザー向けにファセット ナビゲーションをコンパクトに保つために、ハンバーガー メニューと同様のアプローチが使用されます。
ボタンをクリックするだけでファセット ナビゲーションを展開できるため、ページがすっきりとコンパクトに保たれます。モバイルユーザーに最適です。
サイト ナビゲーションについて詳しく知りたいですか?ウェブサイトのナビゲーションの習得（※フルスピード注：Web サイトのナビゲーションをマスターする: 究極のガイドの翻訳記事はこちら）に関する Sam Underwood の記事を必ずチェックしてください。
ヒント 7. コンテンツを同じにする
サイトのモバイル バージョンとデスクトップ バージョンを同等にすることが重要です。前述したように、Google は主にウェブサイトのモバイル バージョンをクロールします。
モバイル版のページからコンテンツを削除すると、Google の目にコンテンツが弱くなるリスクがあります。
このルールは、コピー自体から画像に至るまで、あらゆる種類のコンテンツに適用する必要があります。このルールは、正規タグから内部リンク（※フルスピード注：今年のSEOは内部リンク施策を優先すべき理由の翻訳記事はこちら）に至るまでの技術的な項目にも適用されます。
モバイルの同等性をテストする優れた方法は、モバイル サイトでクロールを実行し、デスクトップ バージョンのサイトでのクロールと比較することです。
Ahrefs のサイト監査 を介してクロールを設定すると、モバイル ユーザー エージェントとデスクトップ ユーザー エージェントを切り替えるオプションがあります。
この設定は、サイト監査のクロール設定「ロボットの指示（Robots instructions）」セクションにあります。
Site Audit 経由でモバイル パリティをテストするには、2 つの別々のクロールを開始します。 1 つはユーザー エージェントが「AhrefsSiteAudit （デスクトップ）」に設定されており、もう 1 つは「AhrefsSiteAudit （モバイル）」に設定されています。
次に、プロジェクト履歴内のこれらのクロールを並べて比較し、デスクトップ クロールとモバイル クロールの同等性を確認できます。
デスクトップ クロールと比較してモバイル クロールではエラーが大幅に多いことに気づきましたか?これは、技術要素がモバイルに正しく実装されていないことを示している可能性があります。
サイト監査では、モバイル クロールとデスクトップ クロールの HTML ソース コードを比較する価値があります。これにより、ページのモバイル コードとデスクトップ コード間の予期せぬ違いを簡単に識別できます。
以下の例では、モバイル クロールとデスクトップ クロールの間でヘッダー メニュー コードが変更されていることがわかります。幸いなことに、この場合、このコードの違いは予期されたものです。
JavaScript に大きく依存している Web サイトのクロール設定で JavaScript をレンダリングすることも検討する必要があります。その後、異なるユーザー エージェントによるクロール間でレンダリングされた HTML を比較できます。詳細については、JavaScript SEO（※フルスピード注：JavaScriptのSEO：知っておくべきことの翻訳記事はこちら）ガイドをご覧ください。
ヒント 8. 煩わしいインタースティシャルを避ける
邪魔で気が散るインタースティシャル （ポップアップとも呼ばれる） は、ユーザーにとってイライラさせられます。ポップアップは画面のさらに大きな部分を占めることが多いため、これはモバイル ユーザーにとってさらに大きなフラストレーションとなることがよくあります。
迷惑で煩わしいポップアップによりコンバージョン率が低下するだけでなく、Google からサムダウンを受けることになります。
Google のページ エクスペリエンス セットのランキング シグナルの一部として、Google は大きなフラストレーションを引き起こす大きなインタースティシャルとは対照的に、より微妙なインタースティシャルを承認しています。
ここでのルールの大きな例外は、インタースティシャルが法律で義務付けられている場合があることです。一般的な例には、Cookie への同意や年齢ゲートのポップアップなどがあります。
たとえば、アルコール関連コンテンツの場合、コンテンツにアクセスする前にユーザーに生年月日の入力を強制しなければ、サプライヤーはひどい目に遭う可能性があります。
ヒント 9. モバイルのパフォーマンスを確認する
Web サイトのオーガニック トラフィックを促進するデバイスを定期的に確認することをお勧めします。
GSC から始めて、検索パフォーマンス レポートでデバイス タイプでフィルタリングできます。
レポートの上にある [+ 新規] ボタンをクリックして新しいフィルターを追加し、[デバイス…] を選択するだけです。
ここでは、デバイスごとにオーガニック パフォーマンス レポートをフィルタリングして、モバイル デバイス経由で獲得したオーガニック トラフィックの量を確認できます。デバイスごとにトラフィックを比較するオプションもあります。
GSC の「モバイル ユーザビリティ」レポートと同様に、モバイル トラフィックの予期せぬ変動やトラフィックの低下に注意する価値があります。これは、さらなる調査が必要なモバイル最適化の問題の兆候である可能性があります。
Google Analytics 4 でデバイスごとのトラフィックを表示することもできます。 [レポート] > [ユーザー] > [技術] > [概要] をロードして、「デバイス カテゴリ」レポートに進みます。
ここで、デバイスごとの完全な分析を表示するには、[プラットフォーム デバイスの表示] をクリックします。
次に、デバイス タイプ別のトラフィックに基づいたデータ テーブル、チャート、グラフが表示されます。純粋に「SEO トラフィック」を確認できるように、オーガニック トラフィック フィルターを追加することを忘れないでください。
ヒント 10. モバイル デバイスでランキングを追跡する
キーワードの追跡に関しては、ランキングがデスクトップとモバイルの SERP で異なる可能性があることを忘れがちです。
幸いなことに、Ahrefs のランク トラッカーでデスクトップとモバイルを切り替えるのは簡単なので、どちらの SERP でサイトがどのようにランク付けされているかを確認するのが非常に簡単になります。
Rank Tracker の優れた点は、最初にキーワードを追跡するときに設定としてデバイスを指定する必要がないことです。キーワードは、モバイルとデスクトップの両方の SERP 内で自動的に追跡されます。
キーワード レポートをロードし、左上隅でモバイルとデスクトップのレビューを切り替えるだけです。
まとめ
「デスクトップ版のサイトをやめて、モバイルの最適化に注力すべきでしょうか?」と疑問に思われるかもしれません。
着実に進んでいます。現在、モバイルが主流のデバイスであることは事実ですが、デスクトップ エクスペリエンスを完全に無視することはできません。
一部のユーザーはデスクトップ経由でサイトにアクセスするだけでなく、Googlebot も時々 （モバイル版ほど頻繁ではありませんが） デスクトップ ユーザー エージェント経由でクロールします。
実際、多くの Web サイトでは引き続き、主にデスクトップ上のユーザー経由でトラフィックが発生しています。これは特に SaaS 企業や多くの B2B 中心の Web サイト全般に当てはまります。たとえば、Ahrefs ブログでは、オーガニック トラフィックの 70% 以上がデスクトップ デバイスのユーザーからのものです。
要約すると、重要なポイントは次のとおりです。
- モバイル サイトでも、デスクトップ サイトと同じコンテンツを表示します。
- レスポンシブ デザインが最適な方法であることを理解してください。
- ページ速度の最適化のためにモバイル ページを優先します。
- モバイル デバイス用のハンバーガー メニューを使用することを恐れないでください。
- モバイルのユーザビリティとモバイルのトラフィック/ランキングを定期的に監視および追跡します。
著者プロフィール
何か質問はありますか？ Twitterでお知らせください。
Jamie Grant
ジェイミーは英国出身の社内 SEO で、以前はエージェンシー側で 4 年以上働いていました。ジェイミーは特に技術的な側面を楽しんでおり、大規模なコンテンツ キャンペーンを楽しんでいます。 canonical タグや hreflang から休憩を取るときは、最新のサッカーの試合や F1 グランプリに夢中になる可能性が高くなります。
コメント