SEO'ya zarar vermeden resimler ve iframe'ler için lazy loading nasıl uygulanır?
Lazy loading uygulamanın en güvenli yolu, yerel HTML niteliği olan `loading="lazy"` kullanmaktır. Bu, tarayıcının gecikmeyi yönetmesini sağlarken Googlebot gibi arama motorlarının görsel kaynak URL'lerini görmesine ve dizine eklemesine olanak tanır.
Lazy loading (tembel yükleme), kritik olmayan kaynakların (resimler ve iframe'ler gibi) yalnızca ihtiyaç duyulduğunda, genellikle kullanıcı ekranı oraya kaydırdığında yüklenmesini sağlayan bir performans tekniğidir. Bu, ilk sayfa yükleme hızını önemli ölçüde artırır. SEO açısından temel endişe, arama motorlarının 'tembel' yüklenen içeriği bulup bulamayacağıdır. Eskiden JavaScript tabanlı çözümler URL'leri botlardan gizleyebiliyordu. Günümüzde en iyi uygulama, `<img>` ve `<iframe>` etiketlerine `loading="lazy"` niteliğini ekleyerek 'native lazy loading' kullanmaktır. Bu yöntem tüm modern tarayıcılar tarafından desteklenir ve Googlebot `src` niteliğini hala görebildiği için tamamen SEO dostudur. Eğer eski tarayıcılar için JS kütüphanesi kullanacaksanız, Intersection Observer API kullandığından ve `<noscript>` yedeği sunduğundan emin olun. Önemli bir not: Logonuz veya ana görseliniz (hero image) gibi 'ekranın üst kısmında' (above the fold) kalan içeriklere asla lazy loading uygulamayın; bu durum LCP skorunuzu olumsuz etkiler.
Adım Adım Rehber
Ekran Altı İçerikleri Belirleyin
Sayfa ilk yüklendiğinde görünmeyen resim ve iframe'leri tespit edin.
Loading Niteliğini Ekleyin
Belirlenen tüm ekran altı öğelerin HTML etiketlerine `loading="lazy"` ekleyin.
Ana Görselleri Hariç Tutun
Hero image ve sayfanın en üstündeki içeriklerin lazy load ile yüklenmediğinden emin olun.
Boyut Bilgilerini Ekleyin
Resimler yüklenirken sayfa düzeninin kaymasını (layout shift) önlemek için her zaman genişlik (width) ve yükseklik (height) değerlerini belirtin.
İndekslenmeyi Test Edin
Google'ın resimlerinizi hala görebildiğini doğrulamak için GSC URL Denetimi aracını kullanın.
Profesyonel İpuçları
- Daha iyi performans için lazy loading'i 'decoding="async"' niteliği ile birleştirin.
- Yükleme sırasında kullanıcı deneyimini iyileştirmek için düşük kaliteli resim yer tutucuları (LQIP) kullanın.
- Mobil cihazlarda 'ekran katlaması' (fold) daha yukarıda olduğu için lazy loading'i mobil öncelikli test edin.
- Lazy loading uygulamanızın 'Yazdır' (Print) CSS dosyalarınızla çakışmadığından emin olun.
pSeoMatic Nasıl Yardımcı Olur?
pSeoMatic denetim motoru, sitenizdeki lazy loading uygulamasının doğruluğunu kontrol eder. Yanlışlıkla lazy load uygulanan 'LCP görsellerini' (boyama metriklerini yavaşlatan hatalar) ve ekran altında olup lazy load niteliği eksik olan ağır medyaları tespit ederek sitenizin hem hızlı hem de tam taranabilir kalmasını sağlar.
pSeoMatic'i ücretsiz deneyinİlgili Sorular
Google, lazy load uygulanan resimleri dizine ekleyebilir mi?
Evet, yerel `loading="lazy"` niteliği veya SEO dostu JS yöntemleri kullanıldığında Googlebot resimleri indeksleyebilir.
Lazy loading PageSpeed skoruna yardımcı olur mu?
Kesinlikle. İlk sayfa ağırlığını azaltır ve Time to Interactive (TTI) süresini iyileştirir.
Logoma lazy loading uygulamalı mıyım?
Hayır, logo genellikle ekranın üst kısmındadır ve hemen yüklenmelidir.
İlgili Rehberler
Bunu hayata geçirmeye hazır mısınız?
pSeoMatic, verilerinizden binlerce SEO uyumlu sayfa oluşturur.