viewportメタタグが設定されていない
viewportメタタグが無いと、スマートフォンでページがPC幅のまま縮小表示され、文字が極端に小さくなります。Googleはモバイル版を基準に評価するため、影響は限定的ではありません。修正コストが小さいわりに効果が大きい項目です。
公開日: 2026年8月16日 ／ 最終更新日: 2026年9月6日
カテゴリ: モバイル ／ 影響度: 高 ／ 想定工数: 30分 ／ ルールID: missing_viewport
この問題の意味
viewportは、ブラウザに対して「表示領域の幅をどう扱うか」を指示するメタタグです。
これが無いと、スマートフォンのブラウザは「このページはPC向けだろう」と判断し、980ピクセル程度の仮想的な幅でページを描画してから、画面に収まるよう全体を縮小します。結果として、文字は読めないほど小さくなり、リンクは指で押せない大きさになります。
なぜ影響が大きいのか
Googleは現在、モバイル版のページを基準にインデックスと評価を行っています（モバイルファーストインデックス）。つまりモバイルでの表示品質は、PCでの見え方とは無関係に評価へ直結します。
またレスポンシブデザインのCSSを書いていても、viewportが無ければメディアクエリが期待どおりに機能しません。CSS側を作り込んでいるのにモバイルで崩れる場合、まずここを疑ってください。
Smash SEOの検出条件
ページのhead内にviewportメタタグが存在しない場合に検出します。対象は応答が200番台〜300番台のページです。
正しい書き方
推奨される記述
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>width=device-width で端末の画面幅に合わせ、initial-scale=1.0 で初期倍率を等倍にします。これが標準的な指定です。
避けるべき指定
- user-scalable=no — 拡大を禁止する指定。視力に配慮が必要な利用者が拡大できなくなり、アクセシビリティ上の問題になります
- maximum-scale=1.0 — 同様に拡大を制限します。特別な理由がなければ指定しないでください
- width=1024 のような固定値 — 端末幅に追従せず、レスポンシブが機能しません
修正後の確認方法
- スマートフォンの実機、またはブラウザの開発者ツールのデバイスモードで表示を確認する
- 横スクロールが発生していないこと
- CSSのメディアクエリが効いていること
- 再診断して該当が0件になっていること
よくある質問
viewportを入れるだけでモバイル対応になりますか？
なりません。viewportは前提条件で、実際の見やすさはCSSのレスポンシブ対応次第です。ただしviewportが無いとCSS側の対応が機能しないため、最初に必要です。
PC専用サイトでも必要ですか？
スマートフォンからもアクセスされる以上、必要です。モバイルファーストインデックスではモバイル版が評価基準になります。
関連記事
- CLSが大きい（表示中に画面がずれる）
CLSは「表示中に画面のレイアウトがどれだけずれたか」の指標です。読んでいた文章が急に下がる、押そうとしたボタンがずれて別のものを押す、という体験の数値化です。原因はほぼ3つに絞られ、いずれも対処法が確立しています。 - LCPが遅い（表示に4秒以上かかる）
LCPは「ページの主要コンテンツが表示されるまでの時間」で、Core Web Vitalsの中核指標です。2.5秒以内が良好、4秒超は不良という基準をGoogleが公表しています。改善は闇雲にやらず、原因の系統を特定してから効く順に手を付けます。 - 表示速度改善の優先順位 — 全部やらないという判断
速度改善で最も多い失敗は、PageSpeed Insightsの指摘を上から全部潰そうとすることです。指摘には効果が10倍違うものが混在しています。この記事は「何をやるか」より「何をやらないか」を決めるための記事です。
この問題が自分のサイトで起きているかは、URLを入力するだけで確認できます。 無料で診断する ／ ルール一覧 ／ 料金プラン