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

コンテンツにスキップ
SEO Tools
ヘルプとドキュメント
速度 中程度の影響 簡単 5～15分

画像の寸法 (幅/高さ)

画像の寸法がないと、レイアウトがジャンプします (CLS)。

それは何ですか

<img> に幅と高さが指定されていない場合、ブラウザは画像が読み込まれるまで画像がどれだけのスペースを必要とするかを知りません。画像が到着すると、コンテンツは「ジャンプ」します。これは、CLS メトリック (累積レイアウト シフト) によって測定されます。

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

レイアウトのジャンプはイライラさせられます (ユーザーが意図したもの以外をクリックしてしまう) ため、Google は Core Web Vitals の CLS を通じてこれにペナルティを与えます。

やり方

  1. 1すべての <img> 要素で幅と高さを指定します (ブラウザはそれらの要素からアスペクト比を計算します)。
  2. 2あるいは、CSS のアスペクト比を使用してスペースを予約します。
  3. 3同じことが埋め​​込みと広告にも当てはまります。埋め込み用のスペースを確保してください。

例

Špatně
<img src="photo.webp" alt="...">
Správně
<img src="photo.webp" alt="..." width="800" height="600">

結論

画像の寸法を追加するのは 5 分間の作業で、Web の重要な要素の 1 つである CLS に直接影響します。遅延読み込みや最新のフォーマットと組み合わせてください。埋め込みや広告用のスペースも確保しておくと、何も飛び出すことがなくなります。

関連トピック