Bir otel sitesinin oda fotoğrafları, bir restoranın yemek görselleri veya bir e-ticaret sitesinin ürün fotoğrafları, sayfanın en çok dikkat çeken parçalarıdır. Aynı zamanda çoğu zaman sayfanın en ağır parçalarıdır. Telefondan çekilmiş birkaç megabaytlık bir fotoğrafın doğrudan siteye yüklenmesi, özellikle mobil bağlantıda sayfanın açılmasını saniyelerce geciktirebilir. Görsel SEO, görsellerin hem hızlı yüklenmesini hem de içeriklerinin arama motorları ve ekran okuyucular tarafından anlaşılmasını sağlayan uygulamaların bütünüdür.
Kısa cevap: Görseller WebP veya AVIF gibi modern formatlarda, gösterileceği boyuta uygun ölçülerde ve sıkıştırılmış olarak sunulmalı; farklı ekranlar için srcset ile birden fazla boyut verilmeli; width ve height özellikleriyle yer ayrılmalı; ekranın altında kalan görseller lazy loading ile geciktirilmeli, ancak sayfanın ana görseli (LCP) geciktirilmemeli; her anlamlı görsel için içeriği anlatan bir alt metin yazılmalıdır.
Format: WebP ve AVIF
WebP ve AVIF, JPEG ve PNG’ye göre benzer görsel kalitede genellikle daha küçük dosya boyutu sağlar. Güncel tarayıcıların büyük çoğunluğu WebP’yi destekler. Eski tarayıcılar için JPEG yedeği <picture> öğesiyle sunulabilir. Logolar ve basit grafikler için ise SVG çoğu zaman en iyi seçenektir.
Boyut ve srcset
Mobilde 400 piksel genişlikte gösterilecek bir görselin 4000 piksel genişlikte yüklenmesi, gereksiz veri tüketimi demektir. srcset ve sizes özellikleri, tarayıcının ekran boyutuna uygun görseli seçmesini sağlar.
<img src="oda-800.webp"
srcset="oda-480.webp 480w, oda-800.webp 800w, oda-1600.webp 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
width="800" height="500"
alt="Deniz manzaralı balkonu olan çift kişilik oda">width, height ve kayma
Görsellerin genişlik ve yükseklik özellikleri belirtilmediğinde, tarayıcı görselin ne kadar yer kaplayacağını önceden bilemez; görsel yüklendiğinde içerik aşağı kayar. Bu kayma, Core Web Vitals’taki CLS metriğini olumsuz etkiler. Core Web Vitals ile ilgili diğer nedenleri INP ve Core Web Vitals yazımızda ele aldık.
Lazy loading ve LCP görseli
| Görsel konumu | Önerilen yükleme |
|---|---|
| Sayfanın ilk ekranındaki ana görsel | loading="eager" veya varsayılan; gerekirse fetchpriority="high" |
| Ekranın altındaki galeri ve kartlar | loading="lazy" |
| Arka plan dekoratif görselleri | CSS ile; gerekirse geciktirilerek |
Sık yapılan bir hata, sayfadaki tüm görsellere lazy loading uygulamaktır. Bu durumda sayfanın ana görseli de geciktirilir ve LCP süresi uzar.
Alt metin: ne yazılmalı?
Alt metin, görseli göremeyen kullanıcılar için görselin içeriğini anlatır ve arama motorlarının görseli anlamasına yardımcı olur. İyi bir alt metin, görselde ne olduğunu kısa ve doğru biçimde tarif eder. Anahtar kelime doldurulmuş alt metinler (“web tasarım Antalya web tasarım ajansı”) hem erişilebilirliğe zarar verir hem de fayda sağlamaz. Yalnızca dekoratif olan görseller için boş alt metin (alt="") kullanılmalıdır.
- Zayıf: “resim1”, “otel”
- Doldurulmuş: “otel antalya otel en iyi otel”
- İyi: “Havuz kenarında şezlonglar ve arka planda deniz manzarası”
Dosya adı ve bağlam
Görselin dosya adı (“havuz-deniz-manzarasi.webp”) ve çevresindeki metin, görselin konusunu anlamaya yardımcı olan ek sinyallerdir. Ürün görsellerinde bu bağlam, ürün sayfasının dönüşüm performansını da etkiler; bunu ürün sayfası optimizasyonu yazımızda ele aldık.
Sık sorulan sorular
Görselleri siteye yüklemeden önce mi optimize etmeliyim?
Mümkünse evet; ancak birçok içerik yönetim sistemi yüklemede otomatik dönüştürme ve boyutlandırma yapabilir. Bu sitenin yönetim panelinde yüklenen görseller otomatik olarak WebP’ye dönüştürülür.
Stok görsel kullanmak SEO’ya zarar verir mi?
Doğrudan bir ceza yoktur; ancak gerçek işletme görselleri güven ve dönüşüm açısından çok daha değerlidir.
Sonuç
Görsel SEO, sayfa hızını ve içeriğin anlaşılırlığını birlikte iyileştiren basit ama etkili bir alandır. Açılış sayfaları için hız kontrol listesini ayrı bir rehberde topladık. Teknik SEO desteği için teklif isteyebilirsiniz.