モバイルSEOテクニック
最近の何百万人ものユーザーが、Android、iOS、またはWindowsで実行されているスマートフォンを使用してWebにアクセスしています。したがって、ウェブサイトがこの変化する環境に適応し、より多くの視聴者を引き付けるためにウェブサイトのデザインに適切な変更を加えることが不可欠になっています。
デスクトップバージョンのサイトは、モバイルデバイスで表示および使用するのが難しい場合があります。モバイル対応ではないバージョンでは、ユーザーがコンテンツを読むためにピンチまたはズームする必要があります。ユーザーはこれを苛立たしい経験と感じ、サイトを放棄する可能性があります。対照的に、モバイル対応バージョンは読み取り可能で、すぐに使用できます。
最近のGoogleの更新により、モバイル検索エンジンで効果を発揮するには、ウェブサイトがモバイルフレンドリーであることが義務付けられています。モバイルフレンドリーでないウェブサイトは、通常の検索エンジンにも影響を与えないことに注意してください。
この章では、モバイルデバイスからWebサイトにアクセスする訪問者が最適化されたエクスペリエンスを確実に得られるように、Webサイトをモバイルフレンドリーにする方法について説明します。
モバイルSEOとは何ですか？
モバイル検索エンジン最適化は、低帯域幅のさまざまな画面サイズのモバイルデバイスでの表示に適したWebサイトを設計するプロセスです。デスクトップWebサイトに適用されるすべてのSEO規則に従うこととは別に、モバイルデバイス用のWebサイトを設計する際にはさらに注意を払う必要があります。次の属性がある場合、Webサイトはモバイルフレンドリーです-
優れたモバイルWebサイトは、モバイルデバイスだけでなくデスクトップでも優れたパフォーマンスを発揮するレスポンシブデザインを備えています。それはウェブサイトのメンテナンスを減らすだけでなく、検索エンジンのためにコンテンツを一貫性のあるものにします。
優れたモバイルWebサイトのコンテンツは、画面をズームしなくてもモバイルデバイスで簡単に読むことができます。適切なフォント、色、レイアウトがあります。
小さな画面で優れたモバイルウェブサイトをナビゲートするのは簡単です。指で簡単に操作できるリンクとボタンを備えています。
優れたモバイルWebサイトは軽量であるため、モバイルネットワークへのロードにかかる帯域幅と時間が少なくて済みます。
モバイルウェブサイトのホームページは、ユーザーを探しているコンテンツに接続する上で最も重要な役割を果たします。したがって、優れたモバイルWebサイトでは、最も重要なリンクがホームページに表示され、十分な可視性が得られるようにします。
ウェブサイトのランキングは、それがどれだけユーザーフレンドリーであるかに大きく依存します。以下のガイドラインに従って、モバイルフレンドリーな優れたWebサイトを設計できます。
モバイル向けにサイトを最適化する
サイトがすでに検索エンジン向けに最適化されている場合は、モバイルデバイス向けに最適化することはそれほど難しくありません。まず、モバイル化に必要なことを理解しましょう。ステップは大きく3つのカテゴリに分類できます-
Step 1 −モバイル構成を選択します
Step 2 −検索エンジンに通知する
Step 3 −よくある間違いを避ける
モバイル構成を選択する
から選択できる3つの異なるモバイル構成があります-
Step 1 −レスポンシブウェブデザイン
Step 2 −ダイナミックサービング
Step 3 −個別のURL
それぞれに長所と短所があります。Googleはレスポンシブデザインを推奨していますが、3つの構成すべてをサポートしています。次の表は、モバイル構成がURLとHTMLコードにどのように影響するかを示しています-
| モバイル構成 | URL | HTML |
|---|---|---|
| レスポンシブウェブデザイン | 同じまま | 同じまま |
| ダイナミックサービング | 同じまま | さまざまなHTML |
| 個別のURL | 異なるURL | さまざまなHTML |
レスポンシブウェブデザイン
レスポンシブウェブデザインは最もシンプルなモバイル構成であり、実装が非常に簡単であるため、Googleはレスポンシブウェブデザインを推奨しています。同じURLで同じHTMLコードを提供しますが、モバイルデバイスの画面サイズに基づいて表示を調整します。
ダイナミックサービング
動的配信は、WebサイトのURLが変更されないタイプのモバイル構成ですが、モバイルデバイスからアクセスすると異なるHTMLコンテンツを配信します。
コンテンツがサーバーから動的に提供される場合は、クロールしているコンテンツがモバイルデバイスで異なって見える可能性があることをGoogleに通知してください。このアプローチの主な欠点は、コンテンツをユーザーに切断する前に、サーバーレベルでコンテンツに対して追加の処理を行う必要があることです。このアプローチでは、サーバーに不要な負荷がかかり、サーバーの速度が低下します。
個別のURL
モバイルユーザー用とデスクトップユーザー用の2つの異なるURLを維持する場合は、どのバージョンを提供するかをGoogleに明示的に通知してください。モバイルページがデスクトップページと異なることを自動的に検出できるため、Googleは個別のURLを推奨していません。
同じウェブサイトの2つのバージョンを維持するには、2倍の労力と費用が必要になるため、大きなウェブサイトがある場合、このアプローチは実用的ではありません。同時に、2つのバージョンを維持しながら、コンテンツのさまざまな不一致を回避することはできません。
SEOの観点からは、各URLは個別に実行されます。したがって、デスクトップのランキングがモバイルのランキングに追加されることはなく、常に別個のWebサイトと見なされます。SEOのメリットを享受したい場合は、モバイルバージョンとデスクトップバージョンで異なるURLを維持することはお勧めしません。
検索エンジンに通知する
Googleや他の検索エンジンがモバイル設定を理解していることを確認してください。何よりも重要なのは、Googleがあなたのページを理解して、あなたのウェブサイトを適切にランク付けできるようにする必要があるということです。Googleに通知する方法は、選択したモバイル構成（レスポンシブウェブデザイン、動的配信、または個別のURL）によって異なります。
あなたのサイトに responsive design,Googleのアルゴリズムは、Googleに通知しなくても、自動的にそれを理解できます。レスポンシブデザインの場合は、ウェブページのヘッダーに次のメタタグがあることを確認してください-
<meta name="viewport" content="width=device-width, initial-scale=1.0">ビューポートは、Webページがデバイスにどのように表示されるかを決定します。レスポンシブデザインのサイトは、デバイス画面のサイズに基づいてサイズが異なります。Webページがどのデバイスでも正しく表示されるように、ビューポートを宣言します。
あなたのウェブサイトが dynamically served, VaryHTTPヘッダーを使用してGoogleが構成を検出できるようにしてください-
Vary: User-Agentザ・ Varyヘッダーは、デスクトップとモバイルデバイスでさまざまなコンテンツが提供されることを検索エンジンに伝えるために重要です。このヘッダーは、コンテンツが次のようなキャッシュシステムによって提供される場合に非常に重要です。Content Delivery Network これらのシステムは、さまざまなデバイスでコンテンツを提供するときにこのヘッダーを利用します。
維持する場合 separate URLs, 例えば、 example.com そして m.example.com, 次に、特別なものを追加してGoogleに通知できます link rel=alternate 次のように、デスクトップバージョンでタグを付けます。その逆も同様です。
Desktop page should have following in its header:
<link rel="alternate" media="only screen and (max-width: 640px)"
href="http://m.example.com" >
Mobile page should have following in its header:
<link rel="canonical" href="http://www.example.com" >よくある間違いを避ける
モバイルデバイス用にWebサイトを最適化するために、次の間違いを犯さないようにしてください-
Slow Mobile Pages−モバイルネットワークは有線インターネットネットワークに比べて遅いため、モバイルページの読み込み速度に注意することが重要です。これはGoogleの重要なランキング要素です。モバイルSEOツールを使用して、モバイルページの速度を確認します。Googleは、使用できる優れたツールを多数提供しています。次のリンクを参照-https://www.google.com/webmasters/tools/mobile-friendly/
Don't Block CSS and JavaScript−モバイルフレンドリーなウェブサイトにはインラインCSSとJavascriptを使用して、コンテンツと一緒にダウンロードできるようにすることをお勧めします。したがって、CSSがあまりない場合は、タグ自体の中で調整してみてください。ただし、別々のファイルで多くのCSSを使用している場合は、ダウンロードされている他のコンテンツのブロックを停止するように、CSSを下部に含めるようにしてください。同じルールがJavascriptにも適用されます。これは、ページ自体の内部に保持することも、ページの下部に含めることもできます。ページの上部にファイルを含めることを避けることができる場合は、async それらを含めながら属性。
<script async type="text/javascript" src="jquery.js"></script>Mobile Redirects−モバイルネットワークは通常低速であるため、リダイレクトが多すぎるとページ速度が低下する可能性があります。複数のURLを管理している場合は、すべてのリンクが関連するページを指していることを確認してください。複数のURLを維持していて、ユーザーがモバイルデバイスからデスクトップページにアクセスしていて、別のURLに同等のモバイルページがあることを認識した場合、404エラーを表示する代わりに、ユーザーをそのURLにリダイレクトします。
Heavy Images−重い画像は読み込み時間が長くなりますが、便利で効果的であるため、完全に取り除くことはできません。したがって、テキストと重い画像のバランスを適切に保つ必要があります。優れたツールを使用して画像を最適化し、低解像度で保存して大量のダウンロードを回避します。
Avoid plug-ins and pop-ups− FlashやJavaなどのプラグインは、ユーザーのモバイルデバイスでは使用できない場合があります。モバイルページに再生できないコンテンツがないことを常に確認してください。モバイルデバイスでこれらのポップアップを閉じるのは非常に不器用になるため、モバイルページでポップアップを使用することは避けてください。
モバイルページを作成するときは、ユーザーが作業するスペースが限られていることを常に念頭に置いてください。したがって、タイトル、URL、メタディスクリプションを作成するときは、情報の本質や品質を損なうことなく、できるだけ簡潔にする必要があります。
便利なツール
これはあなたのサイトがどれほどモバイルフレンドリーであるかを知るためにあなたが使うことができるいくつかの便利なツールのリストです-
Google Webmaster Tools −利用可能なGoogleのツールと手法を使用して、デスクトップおよびモバイルWebサイトを設計する際に何を使用し、何を避けるべきかを理解します。
Mobile Emulator −さまざまなモバイルデバイスでサイトがどのように表示されるかを確認できます。
Moz Local −このツールを使用して、ローカルSEOが正常であることを確認します。
Responsive Web Design Testing Tool −このツールを使用して、さまざまな標準画面サイズのさまざまなモバイルデバイスでレスポンシブサイトがどのように表示されるかを確認します。
Screaming Frog −これは、サイトを分析し、すべてのリダイレクトを再確認できる便利なツールです。
User Agent Switcher −これはFirefoxアドオンであり、別のユーザーエージェントからアクセスしたときにサイトがどのように表示されるかを確認するために使用できます。