接続に失敗しました。もう一度試してください。

コンテンツにスキップ
SEO Tools
ヘルプとドキュメント
UX / UI 重大な影響 簡単 2分

ビューポート/モバイルディスプレイ

メタ ビューポートにより、モバイルでの正しい表示が保証されます。

それは何ですか

ビューポート メタ タグは、デバイスの幅に合わせてページを拡大縮小する方法をブラウザーに指示します。これがないと、モバイルはデスクトップの幅でレンダリングし、すべてが「小さくてズームアウト」されます。

なぜそれに対処するのでしょうか？

Google はモバイルを優先してインデックスを作成します。主にモバイル バージョンを評価します。ほとんどの訪問はモバイルから行われるため、正しいビューポートがないと、サイトはモバイル ユーザビリティ テストに合格せず、ランキングが直接低下します。

やり方

  1. 1標準ビューポートメタタグを <head> に追加します。
  2. 2ズームを無効にしないでください (maximum-scale=1 / user-scalable=no)。アクセシビリティに悪影響を及ぼします。
  3. 3コンテンツが水平方向にオーバーフローしていないこと、およびボタンが十分な大きさであることを確認します (UX 監査を参照)。

例

Správně
<meta name="viewport" content="width=device-width, initial-scale=1">

結論

頭の中にある一行ですが、モバイルファーストの世界には不可欠です。これがなければ、サイトはモバイルでは事実上使用できず、Google はこれに重いペナルティを課します。導入後、実際の電話機とモバイル ユーザビリティ ツールでテストします。

関連トピック