検索トラフィックでのモバイルユーザビリティーのエラーの対処法、ビューポートを設定する方法。
1.モバイルユーザビリティーの向上
グーグルは現在、世界中のウェブトラフィックが携帯端末(モバイル)での検索によって増加していることを受けて、モバイルユーザビリティー(使い勝手の良さ)を重要視しています。
その中で、サイトやブログがモバイル表示に最適化されている方が、ユーザーの立場からすると使い勝手が良く、グーグルも最適化されているサイトを評価しています。
1-1.ビューポートの設定方法
マスターツールサーチコンソールの「検索トラフィック」→「モバイルユーザビリティー」の項目では、モバイルユーザビリティーで問題のあるページを表示しています。
そこに表示されるエラーの中で、「ビューポートが設定されていません」と表示されるエラーがあります。
そのエラーに対処にするには、head内に以下のメタタグを追加します。このメタタグをサイトのheadに追加することで解決されます。
通常、モバイルで2カラム・3カラムで見えていたPC用のページが、このタグの追加によって1カラムになります。
その結果、サイトを見る祭には縦に画面をスクロールして見ることが出来るようになります。
私は「はてなブログ」を使用しているので、このブログで例を挙げるなら、
1の設定を選択し、2の詳細設定をクリック。
詳細設定を下にスクロールしていき
「headに要素を追加」のところに先程のHTMLタグを書き込み、最後に変更をクリックするだけです。
ユーザーの利便性がアップ
この設定でユーザーは、サイトやブログを見る時に画面を横方向にスクロールしたり、ピンチしたり、複雑な指の動きをしなくても楽に記事を読めるようになります。
また、先ほどのHTMLのwidthの後に「:90%」などのパーセンテージを付けてinitialから後を消し、画面サイズを合わせる方法がありますが、これはお勧めしません。
<meta name="viewport" content="width:90%"> ←NG
これにすると先程のHTMLでの対処法よりもユーザエクスペリエンスの評価が下がります。
試してみたところ、97から88に下がりました。
3/4日追記:
2/28日のマスターツールsearchconsoleのモバイルユーザビリティーのエラーが0になり、無くなりました。
ビューポート設定の効果です。
最大でエラーが2つあったのですが、徐々に減っていき現在0です。
この設定ですぐに効果が出る訳ではありません。やはり、クローラーがやってきてそのページを読み込んでもらう必要があります。ですので2~5日程かかると思います。
過去記事:
【初心者】グーグルウェブマスターツールの便利な使い方 - ネットビジネスとSEOを考えるブログ