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タグに追加するのが決まりです。
| 属性 | 意味 |
|---|---|
| name | viewport ビューポートのメタを定義 |
| content | width: 表示幅 device-widthはデバイスに合わせる。 initial-scale: 拡大・縮小率 1は拡大・縮小しない。 |
"width=device-width,initial-scale=1" は、レスポンシブでは決め事だと思ってください。よく分からずにほかの指定をすると、予期しない拡大・縮小などが起きて面倒です。
（ボタンやテキストが小さくなる・大きくなるとか。）
