ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

『ビューポートが設定されていません』を直す

Google Search Console image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

Google Search Consoleのモバイルユーザービリティのエラー『ビューポートが設定されていません』を直します。

かんたんです。HTMLにmetaタグを追加するだけです。

Google Search Consoleは、スマホやタブレットでのサイト表示の見やすさを検査してくれます。

その結果がモバイルユーザービリティに出ます。エラーが出ても慌てなくていいです。検索結果には表示されるので。

(インデックスには登録される。)

ただ、検索結果の順位には影響すると思います。Googleは細かいことは公表してませんが、ユーザー・ファーストのページを上位に表示します。

ユーザー・ファースト = ユーザーにとって良いことを一番に考えること

しかも、PC版の検索順位の決め方をモバイル版に合わせていくと公言しました。モバイルの検索結果順位が重要です。

そのGoogleが言ってるんだから影響ないわけ無いでしょう。(個人談)

ということで、絶対に、すぐに直さなきゃいけないことはないですが、放置もやめましょう。

どうしても検索結果が上がらないなど、結果が出ないときに試すのもあり。

また、検索順位が不安定、下がり続けるなどのときも試す価値あり。

(ボクは放置が気持ち悪いので、空いた時間にすぐに直します。)

まずはビューポートから治す

ビューポートはページをモバイルでどう見せるか? をHTMLで指定するものです。これが設定されていないと他のエラーもいっしょに出ます。

ほかのエラーが出ているとき、まずはビューポートから設定しましょう。

ほかのエラー

テキストが小さすぎて読めません

クリック可能な要素同士が近すぎます

コンテンツの幅が画面の幅を超えています

モバイルの見せ方を指定してないので、そりゃ、いろんなものが出ます。

ほかのエラーの直し方はかんたんです。CSSだけでできます。

テキストが小さいfont-sizeの変更。
要素同士が近いpadding, marginの変更。
コンテンツがはみ出る。width, heightの変更。

metaタグの追加

ビューポートの設定はHTMLのmetaタグで行います。

<html>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<html>

metaタグはHTMLのheadタグに追加するのが決まりです。

属性意味
nameviewport
ビューポートのメタを定義
contentwidth: 表示幅
device-widthはデバイスに合わせる。

initial-scale: 拡大・縮小率
1は拡大・縮小しない。

"width=device-width,initial-scale=1" は、レスポンシブでは決め事だと思ってください。よく分からずにほかの指定をすると、予期しない拡大・縮小などが起きて面倒です。

(ボタンやテキストが小さくなる・大きくなるとか。)

HTML&CSSの本

post-cta-image

どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。


HTML&CSSの本2選

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください