モバイルデザインのチートシート：レスポンシブデザイン、ダイナミックサービング、モバイルサイト

公開: 2022-06-12

編集者の更新（2015年7月）：2015年4月、Googleは、モバイル検索結果をランク付けするアルゴリズムに事前に発表された更新を行いました。ウェブサイトのモバイルフレンドリーは、モバイル検索ランキングの確認されたランキングシグナルです。次の記事を参考にして、メモを取り、ウェブサイトをモバイルフレンドリーにします。

統計を聞いたことがあるでしょう。2014年は、コンピューターやラップトップよりもスマートフォンでインターネットにアクセスする人が多い年です。モバイルデザインは未来です。あなたはあなたのサイトを置き去りにしたくありません、しかしあなたはこのますますモバイル化するインターネットのためにどのように正確にプログラムしますか？ 3つの主なオプションがあり、それぞれに長所と短所があります。この投稿では、モバイル対応オプションを分類し、それぞれの長所と短所を示して、WebサイトとSEO戦略に最適な方法を選択できるようにします。

オプション1：レスポンシブデザイン

レスポンシブデザインは、メディアクエリを使用してページが表示されている画面の解像度を決定し、ページのサイズとレイアウトを適切に調整します。グーグルはレスポンシブウェブデザインを好むと述べているので、この議論ではそれが重くなります。

長所：

各ページのバージョンは1つだけです。同じページが、それを表示しているデバイスのタイプに適応します（デバイスのタイプを検出し、それに基づいて異なるコンテンツを提供するのではありません）。すべてのデバイスで同じHTMLとURLを使用すると、サイトのメンテナンスが簡単になります。
レスポンシブデザインは、他の2つのオプションのように、ユーザーエージェントの検出に依存しません。ユーザーエージェントの検出（つまり、どのブラウザーまたはデバイスがWebページを要求しているかを検出する）自体は悪いことではありませんが、完全ではありません。プロセスに不具合があると、ユーザーに間違ったバージョンのサイトが提供される可能性があります。さらに、これにより、検索エンジンのスパイダーが複数の異なるユーザーエージェントとしてサイトをクロールする必要がなくなります。つまり、より多くのサイトがクロールされます。
レスポンシブは通常、ブラウザでより速く読み込まれます。すべてのデバイスが同じコンテンツを取得するため、要求-ユーザーエージェントの検出-可能なリダイレクトのプロセスはありません。そして、これまでお腹が空いていてスマートフォンで良いレストランを探したことがある人なら誰でも、スピードが重要であることを知っています。

短所：

既存のサイトを再設計することは、長くて集中的なプロセスになる可能性があります。したがって、大きなサイトがある場合、レスポンシブに移行するのは最善の選択ではないかもしれません。
サイトのレイアウトによっては、コンテンツをモバイル画面に詰め込むのが難しい場合があります。 NYTimes.comのようなサイトは、コンテンツを1つのページにまとめるよりも分割する方が簡単なため、個別のモバイルサイトを維持しています。
ナビゲーション要素のサイズは必ずしも適切ではありません。ホバーオーバー要素は、タッチスクリーンではまったく機能しません。したがって、応答性を高めることは、ナビゲーションを変更することを意味する場合があります。
レスポンシブデザインでは、画像が多いレスポンシブページの読み込みが遅くなる場合があります。これは標準ではないことを強調する必要がありますが、それは起こっています。

レスポンシブデザインを選択する場合は、ライブにプッシュする前に、画像を最適化し、さまざまなブラウザーやデバイスでサイトをテストする（または優れたユーザーエージェントエミュレーターを使用する）必要があることに注意してください。

オプション2：動的サービング

ユーザーエージェントの「スニッフィング」と呼ばれることもある動的サービングは、2つの方法で実行でき、実装が困難です。実際、Googleは動的配信でよくある間違いの概要を説明しています。この手法は、訪問者のユーザーエージェント（つまり、訪問者がサイトを表示するために使用しているデバイス）を検出し、サーバーレベルでリダイレクトします。動的サービングを実装する1つの方法は、単方向リダイレクトです。この場合、サイトへのリンクはデフォルトでデスクトップサイトになりますが、モバイルデバイスはデスクトップサイトからモバイルサイトにリダイレクトされます。

2番目のタイプである双方向リダイレクトは、デスクトップサイトとモバイルサイトの両方にコードがあり、デバイスに関係なく、すべての訪問者に適切なコンテンツが提供されるようにします。（これらのコードは、スイッチボードタグと呼ばれることもあります。）実装とは、モバイルサイトを指すrel =” alternate”タグをデスクトップに配置することを意味します。また、モバイルサイトでは、デスクトップサイトを指すrel =” canonical”タグを付けます。

長所：

リダイレクトはサーバーレベルで行われるため、ページごとに1つのURLのみが必要です。
ダイナミックサービングはフィーチャーフォンにも適しています。 PCMag.comで定義されているように、フィーチャーフォンは「音声通話やテキストメッセージング以外の機能の固定セットを含むが、スマートフォンほど広範ではない携帯電話」です。たとえば、フィーチャーフォンは通常アプリをダウンロードできませんが、通常はWebブラウジング機能があります。 Googleによると、最大の違いは、フィーチャーフォンはCSSを処理できないため、レスポンシブデザインをうまく処理できないことです。したがって、オーディエンスと、彼らが使用しているモバイルデバイスの種類を知ることが重要です。
モバイルユーザー専用の個別のキーワードセットが必要な場合は、モバイルユーザーとデスクトップユーザーがそれぞれ異なるHTMLを表示するため、このオプションを使用するとそれが可能になります。（検索エンジンランドには、モバイル固有のキーワードについて説明したすばらしい記事があります。）

短所：

動的リダイレクトは、モバイル用に別のサイトをセットアップし、別のSEOプロジェクトを必要とするインデックス付きHTMLの別のセットを使用するため、サイトのメンテナンス作業が2倍になります。
新しいモバイルデバイスがリリースされるたびに新しい文字列を追加する必要があるため、ユーザーエージェント文字列の必要なリストも定期的なメンテナンスが必要です。
最後に、サイトがコンテンツを動的に提供する場合は、「VaryHTTP-UserAgents」ヘッダーを使用する必要があることに注意してください。ヘッダーは、コンテンツが適切に提供され、エンジンがコンテンツを適切にキャッシュするのに役立ちます。 Googleには、このヘッダーを追加する方法の詳細があります。

オプション3：モバイルサイト

このオプションは、その名前が示すように、モバイルユーザー専用の個別のドメインを作成することを含みます。最も一般的な例は、 m.domain.comまたはmobile.domain.comです。これは大規模な小売業者に人気のあるオプションです。 Bridget Randolphは、「Quantcastの上位100,000サイトにランク付けされたWebサイトの73％が、モバイル固有のURLへのURLリダイレクトを使用した」と指摘しています。動的配信と同様に、この手法には、モバイルデバイスを使用する訪問者専用のコンテンツの開発が含まれます。ただし、個別のモバイルサイトのURLは異なるため、サーバーレベルのリダイレクトはありません。

長所：

ページ数が数十万または数百万の大規模なサイトの場合、レスポンシブデザインの実装は単純に手間がかかりすぎる可能性があります。モバイルサイトを使用すると、ユーザーエクスペリエンスを調整し、独自のモバイルエクスペリエンスをゆっくりと構築できます。
ダイナミックサービングと同様に、モバイルサイトはレスポンシブデザインよりもフィーチャーフォンに適しています。サイトの人口統計によっては、これが基準にならない場合があります。しかし、一部の企業にとって、それは重要な考慮事項です。

短所：

モバイルサイトは、デスクトップサイトが構築したポジティブバックリンクプロファイルの恩恵を受けることはありません（双方向リダイレクトを実装しない限り）。したがって、モバイルユーザーにオーガニック検索であなたを見つけてもらうことを検討している場合、これは本当の挫折かもしれません。
あなたのモバイルサイトはいくつかの追加のSEO作業を必要とします。別のXMLサイトマップをGoogleとBingWebmasterToolsに送信する必要があります。さらに、画面が小さいほどSERPが小さいため、メタタグを編集する必要がある場合があります。モバイル固有のメタタグは、デスクトップサイトのタグよりも短くする必要があります。

ご覧のとおり、コンテンツは劇的に再フォーマットされ、モバイルデバイスで読めるように縮小されています。

このすべての情報を調べてサイトに適切な選択をする際には、サイトにアクセスするためにモバイルデバイスを使用している訪問者の数を自問することを忘れないでください。分析を確認してください。モバイルトラフィックの合計割合が5％未満の場合は、モバイルデザインの実装を待つことができます。今のところ。予測が正しければ、モバイルの使用はますます多くのインターネットトラフィックを要求し続けるだけです。

速度とモバイルSEOのためにページを最適化する方法については、次のリソースから始めることをお勧めします。

オールインワンのモバイルSEOとデザインのチェックリスト
7モバイルフレンドリーなナビゲーションのベストプラクティス
SEOガイド：モバイルSEOとUXの最適化
画像の最適化：モバイルUXを改善するためにできる一番のこと
Googleデベロッパーによるウェブマスターのモバイルガイド

mobile-seo-and-design-checklist