Ana sayfadaki slider (kayan görsel alanı) çoğu sitede ilk ekranın tamamını kaplar. Bu yüzden sayfanın ne kadar hızlı açıldığını, Google'ın sayfayı nasıl anladığını ve ziyaretçinin kampanyayı görüp görmediğini doğrudan etkiler. İyi haber şu: slider'ı SEO dostu yapmak için özel bir eklentiye değil, birkaç doğru teknik karara ihtiyacınız var.
SEO uyumlu slider nedir?
SEO uyumlu slider; görselleri arama motorlarının bulabileceği şekilde ekleyen, ilk ekranı yavaşlatmayan, yüklenirken sayfayı kaydırmayan, metni HTML olarak sunan ve herkesin kullanabileceği biçimde kontrol edilebilen bir kayan görsel alanıdır. Amaç sıralama kazanmaktan çok, slider yüzünden sıralama ve kullanıcı kaybetmemektir.
1. Görselleri Google'ın bulabileceği biçimde ekleyin
Google, görselleri img öğesinin src özniteliğinden bulur ve CSS ile arka plan olarak verilen görselleri dizine eklemez. Birçok hazır slider eklentisi görseli arka plan olarak yerleştirir; bu durumda görsel Google Görseller'de hiç yer almaz. Dosya adının kısa ve açıklayıcı olmasını, alt metnin görseli anlatmasını ve anahtar kelime doldurmaktan kaçınılmasını öneren de Google'dır. Google; JPEG, PNG, WebP, AVIF, GIF, BMP ve SVG biçimlerini destekler.
Farklı ekranlar için farklı boyutta görsel sunmak isterseniz srcset özniteliğini ya da picture öğesini kullanın, ancak her zaman src ile bir yedek adres bırakın; Google bazı tarayıcıların ve tarayıcı botlarının bu öznitelikleri anlamayabileceğini belirtir.
| Konu | Yanlış uygulama | Doğru uygulama |
|---|---|---|
| Görsel ekleme | CSS arka plan görseli | img etiketi, src ile |
| Dosya adı | slider1-final.jpg | kis-indirimi-kadin-mont.webp |
| Metin | Başlık ve düğme görselin içinde | HTML başlık ve bağlantı |
| İlk slayt | Geç yükleme (lazy load) | Hemen yükleme, fetchpriority="high" |
| Ölçü | Genişlik ve yükseklik yok | width ve height ya da aspect-ratio |
| Otomatik geçiş | Durdurulamayan döngü | Durdur düğmesi, üzerine gelince duraklama |
2. İlk slaytı hız için ayrı düşünün
Ana sayfada en büyük görsel genellikle slider'ın ilk slaytıdır ve Core Web Vitals'taki LCP ölçüsünü belirler; iyi eşik 2,5 saniyedir. web.dev bu görsel için net kurallar koyar: LCP görselini asla geç yüklemeyin, fetchpriority="high" ile önceliklendirin ve JavaScript ile sonradan eklemeyin, çünkü tarayıcı görseli geç fark eder. İkinci ve sonraki slaytlar ise geç yüklenebilir.
İpucu: Görsellere width ve height değerlerini yazın ya da CSS aspect-ratio ile alan ayırın. Ölçüsü bilinmeyen slider yüklendiğinde altındaki içeriği aşağı iter ve CLS puanını bozar.
3. Metni görselin içine gömmeyin
Kampanya başlığını ve "İncele" düğmesini görselin içine yazmak kolaydır, ama telefonda küçülür, çeviri ve güncelleme için her seferinde görseli yeniden hazırlamak gerekir. Başlığı ve düğmeyi HTML olarak yazdığınızda metin her ekranda okunur ve bağlantı gerçek bir bağlantı olur. Google da görselin konusunu anlarken sayfadaki metinden, alt yazılardan ve görselin yakınındaki içerikten yararlandığını belirtir. Slayt başlıklarının her birini H1 yapmayın; sayfada tek bir ana başlık olmalı. Bu konuyu H1 etiketi yazımızda anlattık.
4. Otomatik geçişi kontrol edilebilir yapın
WCAG 2.2'nin "Duraklat, Durdur, Gizle" ölçütüne göre kendiliğinden başlayan, 5 saniyeden uzun süren ve başka içerikle birlikte gösterilen hareketli içerik için kullanıcıya duraklatma, durdurma ya da gizleme imkânı verilmelidir. W3C'nin slider kılavuzu da animasyonu durdurup başlatan bir düğme eklenmesini ve fare üzerine geldiğinde ya da klavye odağı slider'a geçtiğinde geçişin durmasını önerir.
Sık hata: Her kategoriye bir slayt açmak. Beş altı slayt, beş altı ağır görsel ve kimsenin sonuna kadar izlemediği bir döngü demektir. Çoğu mağaza için tek, güçlü bir kampanya görseli ve altında kategori kartları daha iyi çalışır.
SEO uyumlu slider için kontrol listesi
- Görseller img etiketiyle ekli, CSS arka planı değil
- Her görselde açıklayıcı alt metin ve anlamlı dosya adı
- WebP ya da AVIF biçiminde, ekran boyutuna uygun görsel
- İlk slayt geç yüklenmiyor, fetchpriority="high" tanımlı
- Tüm görsellerde width ve height değeri
- Başlık ve düğme HTML metin, sayfada tek H1
- Otomatik geçişte durdurma düğmesi ve üzerine gelince duraklama
- Mobilde dikey oranlı ayrı görsel ve rahat dokunulan oklar
Slider görsellerini hazırlarken ölçü ve araç seçimi için banner tasarımı araçları yazımıza, görsellerin aramadaki etkisini genel olarak ele aldığımız görsel SEO rehberimize bakabilirsiniz. Ana sayfanızın hız ve SEO denetimini birlikte yapmak isterseniz SEO hizmetimizi inceleyin.
Sık sorulan sorular
Slider SEO'ya zarar verir mi?
Doğru kurulmazsa verir: ağır ilk görsel LCP'yi, ölçüsüz görseller CLS'yi bozar; CSS arka planı olarak eklenen görseller dizine girmez. Doğru kurulan bir slider sorun yaratmaz.
Slider görselleri lazy load olmalı mı?
İlk slayt olmamalı; web.dev LCP görselinin asla geç yüklenmemesini önerir. İkinci ve sonraki slaytlar geç yüklenebilir.
Slider'da hangi görsel biçimi kullanılmalı?
WebP ya da AVIF dosya boyutunu küçük tutar ve Google tarafından desteklenir. Farklı ekranlar için srcset ile birden çok boyut sunun, src ile yedek adres bırakın.
Otomatik dönen slider erişilebilir mi?
Durdurma imkânı varsa olabilir. WCAG'e göre 5 saniyeden uzun süren otomatik hareket için duraklatma ya da durdurma düğmesi sunulmalıdır.
Kaynaklar
- Google Search Central, Görsel SEO en iyi uygulamaları (28.09.2026)
- web.dev, Optimize Largest Contentful Paint (28.09.2026)
- web.dev, Web Vitals (28.09.2026)
- W3C, WCAG 2.2 Pause, Stop, Hide (28.09.2026)
