interest blog

サクッと読めるライトな記事に詰めた知識

【サーチコンソール】ビューポートの設定方法。

検索トラフィックでのモバイルユーザビリティーのエラーの対処法、ビューポートを設定する方法。

 

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を考えるブログ

 

 

so888.hatenablog.com