Görsellerde width ve height eksikse: sayfa kayması (CLS) nasıl önlenir?

Bir makaleyi okumaya başlıyorsunuz, görsel yüklenince metin birden aşağı kayıyor ve okuduğunuz satırı kaybediyorsunuz. Ya da tam bir butona tıklarken içerik kayıyor ve başka bir yere tıklıyorsunuz.

KTYAPTECH SEO Analyzer bu sorunu IMG-MISSING-DIMENSIONS-001 koduyla, “Görselde width ve height yok” başlığı altında ve orta önem derecesiyle raporlar (Görseller). Bu rehber, bulgunun ne anlama geldiğini, neden önemli olduğunu ve adım adım nasıl düzeltileceğini anlatıyor.

Görselde width ve height eksikliği nedir?

Tarayıcı, bir görselin boyutunu bilmediğinde onun için önceden yer ayıramaz. Görsel yüklendiğinde alan açılır ve altındaki içerik kayar. Bu kaymalar Cumulative Layout Shift (CLS) metriğiyle ölçülür.

SEO Analyzer, width ve height nitelikleri olmayan görselleri bu bulguyla raporlar.

Neden önemli? SEO ve kullanıcı deneyimine etkisi

CLS, Core Web Vitals metriklerinden biridir; iyi değer 0,1'in altıdır. Görsel kaynaklı kaymalar, CLS'nin en yaygın nedenlerindendir.

Kullanıcı deneyimi açısından kayan içerik yanlış tıklamalara ve okuma zorluğuna yol açar.

Sorun nasıl tespit edilir?

• SEO Analyzer raporundaki “Görselde width ve height yok” bulgusunu inceleyin.
• PageSpeed Insights'ta “Görsel öğelerinin açık bir genişliği ve yüksekliği yok” uyarısına bakın.
• Chrome DevTools'un Performans panelinde Layout Shift kayıtlarını inceleyin.

Adım adım çözüm

1. Tüm <img> ve <video> öğelerine gerçek piksel boyutlarını width ve height nitelikleri olarak ekleyin.
2. Duyarlı tasarım için CSS'te width: 100%; height: auto; kullanın; tarayıcı nitelikleri oranı hesaplamak için kullanır.
3. Boyutu bilinmeyen gömülü içerikler (iframe, reklam alanları) için CSS aspect-ratio veya sabit yükseklikli bir kapsayıcı kullanın.
4. CMS ve framework'ün görsel bileşenlerinin boyutları otomatik eklediğinden emin olun.

Duyarlı tasarımda sabit boyut sorun olmaz mı?

Hayır. width ve height nitelikleri görselin sabit boyutunu değil, en-boy oranını tarayıcıya bildirir. CSS'te height: auto kullanıldığında görsel ekrana göre ölçeklenir ve oran korunur.

Sık yapılan hatalar

• Nitelikleri CSS'te height ile geçersiz kılıp oranı bozmak.
• Reklam ve gömülü içerikler için yer ayırmamak.

Düzeltmeyi nasıl doğrularsınız?

• PageSpeed Insights'ta CLS değerini karşılaştırın.
• SEO Analyzer'ı yeniden çalıştırın.

Sık sorulan sorular

width ve height gerçek piksel boyutu mu olmalı?

Görselin doğal oranını yansıtan değerler olmalı; genellikle dosyanın gerçek piksel boyutları kullanılır.

SVG ikonlar için de gerekli mi?

Evet, özellikle düzen içinde yer kaplayan ikonlar için boyut vermek kaymayı önler.

Özet

Görsellere width ve height nitelikleri verin, CSS'te height: auto kullanın ve gömülü içerikler için aspect-ratio ile yer ayırın; böylece düzen kaymalarını önlersiniz.

Sitenizde bu ve benzeri sorunların olup olmadığını görmek için KTYAPTECH Ücretsiz SEO Analizi aracını kullanabilirsiniz: rapordaki her bulgunun yanında, sorunu anlatan çözüm rehberine giden bir bağlantı bulunur.