モバイルフレンドリーテストツールの使い方

“これまで、Google のクロール、インデックス、ランキング システムでは、主にデスクトップ版のコンテンツが使用されてきました。
そのため、その内容がモバイル版と大きく異なる場合、モバイル検索ユーザーに問題が発生する可能性がありました。

モバイル ファースト インデックスとは、モバイル版のページをインデックスやランキングに使用し、主にモバイル ユーザーが探しているものを見つけやすくすることを意味します。”

引用：Googleウェブマスター向け公式ブログ　モバイル ファースト インデックスを開始します

“Google は全世界でモバイル フレンドリー アップデートを開始します。

モバイル版の検索結果では、モバイル フレンドリーなページの掲載順位が引き上げられ、検索ユーザーは、小さなスクリーン上でも読みやすい、高品質で関連性の高い検索結果をより簡単に見つけることができるようになります。”

引用：Googleウェブマスター向け公式ブログ　モバイル フレンドリー アップデートを開始します

モバイルフレンドリーページの特徴

• タップやズームなどをしなくてもテキストが読みやすい
• タップターゲットの間隔が適切
• 再生できないコンテンツが含まれていない
• 横方向へのスクロールが発生しない

引用：Googleウェブマスター向け公式ブログ　モバイル フレンドリー アップデートを開始します

1. レスポンシブウェブデザイン
2. 動的な配信（ダイナミックサービング）
3. 別々のURL（セパレートタイプ）

参考：レスポンシブウェブデザイン(Google Developers)

モバイルフレンドリーテストツールとは、
モバイル端末でのページの使いやすさをテストし、使いやすさをスコア化するGoogleの無料ツールです。

① モバイルフレンドリーテストツールにアクセス

② 調べたいページのURL入力、「テストを実行」をクリック

③ 読み込み完了後、テスト結果が表示されます。
「このページはモバイルフレンドリーです」と表示されていれば原則問題ありません。
エラーの対処方法について、詳しくはこちら。

１．ページにアクセスできない
　なんらかの理由によりツールがページにアクセスできない

例）ネットワーク接続に問題がありサイトがダウンしている　等

２．ページに読み込めないリソースがある
ページで使用されているリソースの一部をテストツールが読み込めない

例）入力したURLが404エラーになっている
　　robots.txtでGooglebotをブロックしている
　　ログインユーザー限定の内容が含まれている　等

詳細：ページに読み込めないリソースがある場合(Search Console ヘルプ)

① 互換性のないプラグインを使用しています
・ほとんどのモバイル ブラウザでサポートされていないプラグイン（Flash など）がページに含まれている
→HTML5 など、広くサポートされている最新のウェブ テクノロジーを使用してページを再設計

② ビューポートが設定されていません
・ページに viewport プロパティ（画面サイズに合わせてページのサイズ・スケーリングを調整する指示）が定義されていない
→meta viewport タグを設定

③ ビューポートが「端末の幅」に収まるよう設定されていません
・ページに固定幅の viewport プロパティが定義されているため、異なる画面サイズに合わせて調整することができない
→デバイスの幅とスケーリングに合わせてビューポートを設定

④ コンテンツの幅が画面の幅を超えています
・ページ上の語句や画像を表示するために横にスクロールをしなくてはいけない状態になっている
→画面幅に合わせて調整がされるようにCSS要素は相対的な幅と位置の値を使用

⑤ テキストが小さすぎて読めません
・フォントサイズが小さすぎて文字が読めず、モバイル ユーザーがピンチ操作をして拡大しなければならない
→viewport設定をし、画面サイズに合わせてフォントサイズを適切に調整する

・1 行あたりの文字数を 70～80 文字（英単語で約 8～10 語）にするのが理想
・テキスト ブロックの幅は約 10 語分に達するたびにブレークポイントを設定するとよい

⑥ クリックできる要素同士が近すぎます
・ボタンやナビゲーション リンクなどのタップ要素同士が近すぎるために、モバイル ユーザーが隣接する要素をタップせずに指を使って目的の要素をタップすることが容易にできない
→ボタンやナビゲーション リンクのサイズやスペースをモバイル ユーザーに適するように正しく設定

参照：モバイル ユーザビリティに関するエラー(Search Console ヘルプ)