Google Search Console'da CLS Hatası Kesin Çözümü (Görsel Optimizasyonu)

Google Search Console'da "Önemli Web Verileri" (Core Web Vitals) raporuna girdiğinizde, birçok sayfanızın "Daha fazla iyileştirme gerekiyor" veya "Kötü" olarak kırmızıyla işaretlendiğini mi gördünüz? Hataya tıkladığınızda muhtemelen şu terimle karşılaşacaksınız: CLS (Cumulative Layout Shift) 0.25 değerinden yüksek.

Peki nedir bu CLS ve Neden SEO'nuzu mahvediyor?

---

Kümülatif Düzen Kayması (CLS) Nedir?

Bir web sayfasına mobilden girdiniz. Sayfa yüklendi, tam bir makaleyi okumaya veya bir butona tıklamaya çalışıyordunuz ki; üst tarafta bir anda devasa bir görsel veya reklam yüklendi. Sayfanın geri kalan tüm içeriği bir anda aşağı doğru "kaydı". Siz de yanlışlıkla reklama veya bambaşka bir butona tıkladınız.

İşte Google, kullanıcıyı deli eden bu deneyime Cumulative Layout Shift (Düzen Kayması) adını verir. CLS puanınız yüksekse (0.1'den büyükse), Google organik arama sonuçlarında o sayfanızın sıralamasını bilinçli olarak düşürür.

CLS'nin Bir Numaralı Nedeni: Boyutsuz Görseller

Eski usül web geliştirmede, bir görsel eklendiğinde genişlik ve yükseklik şu şekilde verilirdi:

<img src="harika-urun.jpg" alt="Harika Ürün">

CSS'te ise bu görsel "Responsive" olsun (Mobilde ekrana sığsın) diye şu kod eklenirdi:

img {
  max-width: 100%;
  height: auto;
}

Sorun tam olarak burada başlar! Tarayıcı HTML'i okuduğunda bir <img> etiketi görür ancak yüksekliğinin ne kadar olduğunu bilemez çünkü değer auto'dur. Resmin tam dosyası sunucudan inene kadar ekranda bu resim için sadece 0 piksel yükseklik ayırır. Resim milisaniyeler sonra tamamen indiğinde, aniden örneğin 400px yer kaplar ve altındaki tüm metinleri 400px aşağı iter. İşte CLS hatası oluşturdunuz.

Çözüm: Width, Height Etiketleri ve Modern CSS

Eskiden HTML'e width ve height değeri yazmak, görselin mobil cihazlarda responsive (esnek) yapısını bozardı. Ancak modern tarayıcılarda durum böyle değildir.

Html etiketine görselin "gerçek fiziksel çözünürlüğünü" (Veya en azından en-boy oranını temsil eden sayılar) mutlaka yazmalısınız:

<img src="harika-urun.jpg" width="800" height="450" alt="Harika Ürün">

Tarayıcı bu kodu gördüğünde, CSS'teki width: 100%; height: auto; kodu yüzünden genişliği ekrana (örneğin telefon ekranı 400px ise) sığdırır. Ancak yükseklik için beklemez! HTML'de verdiğiniz 800 / 450 oranını (Yani 16:9 oranını) hesaplar. Eğer ekran 400px ise, resim inmemiş olsa bile ekranda anında 225px'lik boş bir kutu (Placeholder) ayırır.

Resim yüklendiğinde tam olarak o ayrılan boş kutunun içine oturur. Kayma sıfır. CLS hatası sıfır.

Mevcut görsellerinizi küçültürken veya CSS'e değer girerken en-boy oranlarını matematiksel olarak hatasız hesaplamak için Aspect Ratio Hesaplayıcımızı kullanabilirsiniz. Düzen kaymaları ve SEO'ya etkileri hakkında daha geniş bir perspektif için En-Boy Oranı ve Görsel Optimizasyon Rehberimizi incelemeyi unutmayın.

---

🕸️ Knowledge Graph & Semantik Bağlantılar

Bu içerik, Intent.com.tr'nin Teknik SEO topikal kümesinin (Topic Cluster) bir parçasıdır. Konuyu daha derinlemesine anlamak için aşağıdaki varlıkları (Entities) ve ilişkili içerikleri inceleyebilirsiniz:

📖 İlgili Rehberler ve İçerikler

• Twitter Card Validator Hataları ve Çözümleri: Görseller Neden Çıkmıyor?
• 301 vs 302 Yönlendirmeleri Arasındaki Fark Nedir? Hangisi Kullanılmalı?
• Programatik SEO (pSEO) ve Next.js: Spam Yapmadan Milyonlarca Sayfa Nasıl Yönetilir?

🧠 Semantic Entities (Terimler & Senaryolar)

• Kavram: UTM Parametreleri
• Kavram: Crawl Budget (Tarama Bütçesi)
• Uygulama: E-Ticaret Sitelerinde Altyapı Taşıma (Migration)

Semantic Yönerge: Bu sayfa Google Search Console'da CLS Hatası Kesin Çözümü konusundaki kullanıcı niyetini (Search Intent) karşılamak üzere yapılandırılmıştır.