モバイルフレンドリーとは？対応とアルゴリズムアップデート影響・SEOについて

あなたのサイトはモバイルフレンドリーに対応していますか？

スマホなどのあらゆるデバイスでユーザーが快適に閲覧できるようにする“モバイルフレンドリー”に対応しておくことが今後のSEO対策に必要となります。

まずはこちらのモバイルフレンドリーテストでスマホ対応できているかどうかチェックしてみましょう。（チェックはサイト単位ではなくページ単位となっています。）
モバイルフレンドリー テスト：https://search.google.com/test/mobile-friendly?hl=ja

ということで今回は、モバイルフレンドリーの対応やテスト方法、モバイルフレンドリーアルゴリズムアップデートの履歴やSEOへの影響など、モバイルフレンドリーに関する情報を解説したいと思います。

モバイルフレンドリーとは？

モバイルフレンドリーとは、モバイル（スマホ）用に表示を最適化し、ユーザーが快適にモバイルWebサイトを閲覧できるようにすることです。

「モバイルフレンドリーにする」「モバイルフレンドリー化」とも言われ、スマホ対応することを意味します。

モバイルフレンドリーとモバイルファーストインデックスについて

2016年10月17日、Google公式にモバイルファーストインデックス移行計画が発表され、モバイルフレンドリーの重要性がより高まりました。

これは、PCから検索するユーザー数よりもスマホを利用した検索の割合が多くなったためであり、今後はスマホにも注力しなければユーザーはリピートすることなく直帰してしまいます。

今のところは、PC向けページの評価を基準にして検索結果が表示されていますが、このモバイルファーストインデックスが実行されると、モバイル向けページが評価の対象となるため、検索順位の下落を防ぐためにはモバイルフレンドリーの対応が必須となってくるでしょう。

モバイルフレンドリーアルゴリズムアップデート履歴と影響

モバイルフレンドリーアルゴリズムアップデートの履歴や影響は以下のようになります。

• 2015年4月21日：モバイルフレンドリーアップデート
• 2016年5月12日：モバイルフレンドリーアップデート

2015年4月21日：モバイルフレンドリーアップデート

2015年4月21日に初めてのモバイルフレンドリーアップデートが実施され、検索順位への影響は軽微でした。

実際にモバイルフレンドリーアップデートがあった2015年4月21日以降の2週間のPCとスマホの順位変動を比べてみたのでご覧ください。

PCとスマホの順位変動の違い

※2015年5月7日の11時現在の数値です。

上記を見てみると全体の順位変動で大きな数値は、スマホの2015年4月22日と23日だけで、2015年4月24日以降は、スマホの順位変動よりPCの順位変動のほうが若干大きく出ているくらいです。
ちなみに2015年5月4日は、PCで不安定にあたる6.7が記録され、スマホで6.2となってます。

この状況を見るとモバイルフレンドリーのアップデートは、最初の3日間でほぼ終わっており、弊社の管理サイトの順位を見ると上位サイトにあまり変化がありませんでした。

このことから、モバイルフレンドリー＝スマホ対応しているか、していないかという要素は、ほかの順位決定要因である被リンクや内部要素に比べるとあまり大きな割合を占めていないと思われます。

2016年5月12日：モバイルフレンドリーアップデート

2016年5月12日にモバイルフレンドリーアップデートの強化が完了し、日本を含む世界中で展開されました。
これは、2015年4月21日に実施された最初のモバイルフレンドリーアップデートに続く2回目の実施です。どのくらい検索結果に影響を与えたかは不明。

モバイルフレンドリーの対応方法

モバイルフレンドリーにするためには、Webサイトをレスポンシブデザインの導入によってスマホ対応することがGoogleで推奨されてます。

あらゆるデバイス（PC・スマホ・タブレット等）からのアクセスでも同じURLで表示できるように「viewportタグを設定」「CSSのメディアクエリでコンテンツの幅を調整」して、Webサイトをモバイルフレンドリーにしましょう。

1. ユーザーエクスペリエンスを改善する
2. ページの速度を改善する

上位表示させるための基本的対策をご紹介しています。

①ユーザーエクスペリエンスを改善する

モバイルフレンドリーテストツールを活用し、「×不合格」項目中心にユーザーエクスペリエンスを改善しましょう。

• テキストサイズを調整する（判読可能なフォントサイズの使用）
• モバイル用viewportの設定
• リンク同士の距離を調整する（タップ ターゲットのサイズを適切に調整する）
• コンテンツの幅を調整する（コンテンツのサイズを表示域に合わせる）

テキストサイズを調整する（判読可能なフォントサイズの使用）

テキストサイズを調整し、スマホでも可読性の高い見やすい大きさにすることが大切です。

モバイル用viewportの設定

モバイルフレンドリーにするために、viewportタグを設定することがGoogleで推奨されてます。
htmlファイルのheadタグ内に「viewport」を設定し、アクセスしてくるデバイスのサイズを取得できるようにします。

また、モバイルフレンドリーテストツールで、viewportタグがしっかり設定されてるか、チェックすることが可能です。

リンク同士の距離を調整する（タップ ターゲットのサイズを適切に調整する）

リンク同士の距離を調整し、誤った操作を防ぐためにタップしやすい間隔を心がけましょう。

コンテンツの幅を調整する（コンテンツのサイズを表示域に合わせる）

画像やテキスト等のコンテンツを画面サイズに収めながら、コンテンツの幅を調整します。

②ページの速度を改善する

PageSpeed Insights（ページスピードインサイト）を活用し、「修正が必要」な項目中心にページ速度を改善しながら、モバイルフレンドリーに対応しましょう。

• ブラウザのキャッシュを活用する
• スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
• 圧縮を有効にする
• 画像を最適化する
• CSSを縮小する
• HTMLを縮小する

ブラウザのキャッシュを活用する

静的リソースのHTTPヘッダー内で、有効期日や最大経過時間を設定して読み込み速度の延滞を対策します。

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

レンダリングをブロックするリソースの読み込みを遅延させるか、非同期に読み込むか、これらのリソースの重要部分をHTML内に直接インライン化する。

圧縮を有効にする

リソースを圧縮し、ネットワークで送信されるバイト数を減らす。

画像を最適化する

画像に適切なフォーマットと圧縮を選び、データサイズを大きく削減する。

CSSを縮小する

CSSコードを縮小でデータサイズを大きく削減し、ダウンロードや解析の速度を向上させる。

HTMLを縮小する

HTMLコード（コード内のインライン JavaScriptとCSS含む）を縮小で、データサイズを大きく削減し、ダウンロードや解析の速度を向上させる。

モバイルフレンドリーテストについて

モバイルフレンドリーテストとは、Webサイトがモバイル用に最適化され、しっかり表示されてるかチェックできるGoogle推奨のツールです。

冒頭でもご紹介したモバイルフレンドリーテストツールを活用し、サイトがモバイル用に表示最適化されてるか必ずチェックしましょう。

また、このテストツールはページ単位でのチェックとなりますが、サーチコンソール内の「モバイル ユーザビリティ」を確認してみるとサイト内で対応できていないページをチェックすることができるので、重要なページが抜けていないか確認しておくと良いでしょう。

point!!まず「①ユーザーエクスペリエンスを改善する」の基本項目を中心に対応し、モバイルフレンドリーテストに合格（スマホ対応）することが重要です。
その後、「②ページの速度を改善する」を対応し、よりモバイルフレンドリーなサイトを目指しましょう。

まとめ

ということで今回はモバイルフレンドリーの内容や対応方法についてご説明しましたが、これからのSEO対策にはスマホやPC含むあらゆるデバイス向けにサイトを最適化することが大切となってきます。

今後、検索順位にも大きく影響することが予想されますので、ユーザーエクスペリエンスやページ速度を改善し、モバイルフレンドリーに対応しておきましょう。