meta viewportタグについて
meta viewportタグとは?
meta viewportタグは、モバイルブラウザにページのサイズをどのように設定するかを伝えます。これがない場合、スマートフォンはページがデスクトップ向けに作られたものと判断し、幅約980ピクセルで描画してから画面に収まるよう縮小します。その結果、拡大しなければ誰も使えない、縮小されたようなページになります。
これはhead内に記述する1行であり、レスポンシブCSSを機能させるためのスイッチです。メディアクエリはビューポートを基準に測定するため、ビューポートが実際とは異なる状態なら、記述したすべてのブレークポイントが誤った対象を測定することになります。
メインテンプレート以外で作成されたページでは、メタビューポートタグチェッカーを実行する価値があります。メタビューポートタグの欠落は、ほとんどの場合そうしたページで見つかるためです。
2026年になった今でも、ビューポートタグは重要ですか?
もちろんです。ビューポートタグがなければ、その他のモバイル対応作業がすべて無駄になってしまうからです。完全に柔軟なスタイルシートを作成しても、2009年に構築されたかのように動作するページを公開することになりかねません。
最新のテーマには標準で含まれているため、ないことに気付きにくいのです。ビューポートタグが欠落している場合、その多くはカスタムテンプレート、キャンペーン用ランディングページ、または独自のを生成するツールで作成されたページにあります。
設定内容だけでなく、タグの存在も重要です。ズームを無効にするタグが存在しており、このテストでは正しい状態と判定されますが、アクセシビリティ上の問題となります。
ビューポートタグとAI検索の関係
このタグはモバイルでの表示に影響し、インデックス登録の対象となるのもモバイル表示です。スマートフォン上で適切にレイアウトできないページは、本来意図された状態ではなく、最も悪い状態で評価されることになります。
このタグ自体に、クローラーが読み取る固有の意味はありません。しかし、タグがないと、その後のあらゆる処理に悪影響が及びます。これには、レンダリングされた表示内でどれだけのコンテンツが見えるかも含まれます。
このリストの中でも特に低コストで修正できる項目の一つで、効果が完全に現れるかまったく現れないかのどちらかになる数少ない項目です。
ビューポートのベストプラクティス
- すべてのページの内に記述してください。
- 幅はデバイスの幅に設定し、初期倍率は1に設定してください。
- ズームを無効にしたり、最大倍率を制限したりしないでください。ズームを防ぐことはアクセシビリティ上の問題になります。
- カスタムページやキャンペーンページは、メインテンプレートとは別に確認してください。
- デスクトップエミュレーターだけでなく、実際のスマートフォンで確認してください。
このツールがチェックする項目
このツールはページのHTMLを読み取り、meta viewportタグが存在するかどうかを報告します。
存在するかどうかを確認するもので、設定内容は確認しないため、ズームを無効にするタグでも合格します。タグが存在していてもページがスマートフォンで正常に動作しない場合は、次に設定を確認してください。
次に行うこと
The viewport tag makes responsive layout possible; the rest is whether the layout is any good. See how the page actually renders on phone and tablet screens with the
モバイル対応 test.