Görsel SEO: Alt Text, Boyut ve Format Rehberi

Görsel SEO, sayfandaki resimleri hem arama motorlarının anlayabileceği hem de tarayıcının hızlıca yükleyebileceği hâle getirme işidir. İyi yapıldığında iki kazanç birden gelir: Google Görseller'den ekstra organik trafik ve daha hızlı yükleyen, Core Web Vitals'ı daha iyi olan bir sayfa. Çoğu sitede en ağır kaynak görsellerdir; bu yüzden görselleri optimize etmek genellikle performans için atılabilecek en yüksek getirili adımdır.

Görsel SEO neden önemli?

Arama motorları bir resmin içeriğini insan kadar net anlayamaz. Dosya adı, alt metni ve çevresindeki bağlamı kullanarak resmin neyle ilgili olduğunu tahmin eder. Aynı zamanda görseller sayfa ağırlığının büyük kısmını oluşturur. Optimize edilmemiş tek bir kapak görseli 2-3 MB olabilirken, doğru sıkıştırılmış hâli 150 KB'a inebilir. Bu fark hem mobil kullanıcının bekleme süresini hem de LCP (Largest Contentful Paint) skorunu doğrudan etkiler.

• Keşfedilebilirlik: İyi etiketlenmiş görseller Google Görseller'de çıkar ve ek ziyaretçi getirir.
• Hız: Küçük dosyalar daha hızlı yüklenir, sıralama sinyali olan Core Web Vitals'ı iyileştirir.
• Erişilebilirlik: alt metni ekran okuyucu kullanan ziyaretçiler için içeriği sese çevirir.

Alt text nasıl yazılır?

Alt metni, resmin yüklenememesi durumunda gösterilen ve ekran okuyucuların sesli okuduğu metindir. Amacı resmi betimlemektir, anahtar kelime doldurmak değil. İçeriği bağlamıyla birlikte, kısa ve doğal bir cümleyle anlat.

<!-- Kötü: boş ya da spam -->
<img src="urun.jpg" alt="">
<img src="urun.jpg" alt="ayakkabı ucuz ayakkabı spor ayakkabı satın al">

<!-- İyi: betimleyici ve doğal -->
<img src="kosu-ayakkabisi.jpg"
     alt="Mavi tabanlı gri koşu ayakkabısı, yandan görünüm">

Birkaç pratik kural: Süslemeye yarayan, anlam taşımayan görseller için alt="" bırak (ekran okuyucu bunları atlar). Metin içeren bir görselde o metni alt'a yaz. "resim", "görsel" gibi kelimelerle başlama; ekran okuyucu zaten "resim" der. Anahtar kelimeyi yalnızca gerçekten resmi tarif ediyorsa kullan.

Doğru formatı seçmek

Format seçimi dosya boyutunu doğrudan belirler. Modern formatlar, eski JPEG ve PNG'ye göre aynı kalitede çok daha küçük dosyalar üretir.

• WebP: Bugün varsayılan tercihin olmalı. Fotoğraf ve grafik için JPEG/PNG'ye göre genelde %25-35 daha küçük; tüm modern tarayıcılar destekler.
• AVIF: WebP'den de küçük dosyalar verir, fakat kodlaması daha yavaştır ve eski tarayıcı desteği biraz daha düşüktür. Kritik görsellerde değerlendir.
• SVG: Logo, ikon ve basit grafikler için ideal. Vektör olduğu için her çözünürlükte keskin kalır ve genelde çok küçüktür.
• JPEG/PNG: Geriye dönük uyumluluk için yedek (fallback) olarak işe yarar; PNG'yi yalnızca şeffaflık gerektiğinde kullan.

Tek bir görseli birden çok formatta sunup tarayıcının desteklediğini seçmesini sağlamak için <picture> kullan:

<picture>
  <source srcset="kapak.avif" type="image/avif">
  <source srcset="kapak.webp" type="image/webp">
  <img src="kapak.jpg" alt="Proje kapak görseli" width="1200" height="630">
</picture>

Dosya boyutunu küçültmek

En büyük kazanç, görseli ihtiyacından büyük sunmamaktan gelir. 400 piksel genişlikte gösterilen bir alana 4000 piksellik dosya koymanın anlamı yok. Görseli kullanılacağı boyuta yeniden boyutlandır, sonra sıkıştır.

Komut satırında cwebp ile hızlıca WebP üretebilirsin:

# JPEG'i kalite 80 ile WebP'ye çevir
cwebp -q 80 kapak.jpg -o kapak.webp

# AVIF için (libavif araçları)
avifenc --min 20 --max 30 kapak.jpg kapak.avif

Tek tek dosya yerine bir araç tercih ediyorsan Squoosh (tarayıcıda çalışır), ImageOptim veya sharp (Node.js) iyi seçeneklerdir. Kaliteyi genelde 75-85 aralığında tut; çoğu fotoğrafta gözle fark edilmeyen ama boyutu yarıya indiren tatlı nokta buradadır.

Responsive görseller ve lazy loading

Farklı ekranlara farklı boyutlar sunmak için srcset ve sizes kullan; tarayıcı ekrana en uygun dosyayı indirir. Ekranın dışındaki görselleri ise loading="lazy" ile geciktir, böylece ilk yükleme hızlanır.

<img
  src="foto-800.jpg"
  srcset="foto-400.jpg 400w, foto-800.jpg 800w, foto-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="500"
  loading="lazy"
  alt="Atölyede çalışan tasarımcı">

Önemli bir ayrıntı: ekranın hemen üstündeki (above the fold) ve özellikle LCP görseline loading="lazy" verme; bu, en önemli resmi geciktirip skorunu kötüleştirir. O görsele gerekirse fetchpriority="high" ekle.

Dosya adı, sitemap ve düzen yerleşimi

Dosya adı küçük bir sinyaldir ama bedava bir sinyaldir: DSC_0421.jpg yerine gri-kosu-ayakkabisi.jpg gibi tarif edici, kısa çizgiyle ayrılmış adlar kullan. Boşluk ve Türkçe karakter yerine ASCII ve tire tercih et.

Her görsel için width ve height belirtmek, tarayıcının yer ayırmasını sağlar ve sayfa kayması olan CLS (Cumulative Layout Shift) sorununu önler. Son olarak çok sayıda önemli görselin varsa bir görsel sitemap'i ya da mevcut sitemap'ine görsel girişleri eklemek, Google'ın onları daha hızlı keşfetmesine yardımcı olur.

Sık Sorulan Sorular

Her görsele alt text şart mı?

İçerik taşıyan her görsele evet. Yalnızca dekoratif olan (arka plan deseni, ayraç çizgisi gibi) görsellerde ise bilinçli olarak alt="" bırakılır; böylece ekran okuyucular bunları atlar. Önemli olan boş bırakmak değil, anlamsız görseli bilerek işaretlemektir.

WebP mi AVIF mi kullanmalıyım?

Pratikte ikisini birlikte sunmak en iyisidir: <picture> içinde önce AVIF, sonra WebP, en sonda JPEG fallback. Tek format seçeceksen WebP en dengeli tercihtir; geniş destek ve iyi sıkıştırma sunar.

Görsel SEO sıralamayı gerçekten etkiler mi?

Dolaylı ama güçlü biçimde. Görseller doğrudan bir "sıralama faktörü" sayılmasa da, hızı (Core Web Vitals) ve Google Görseller'den gelen trafiği etkiler; ikisi de toplam görünürlüğünü artırır.

Görsellerin sayfanı yavaşlatıyor mu, yoksa Google Görseller'den hak ettiğin trafiği alamıyor musun? Sitenin tüm görsellerini optimize edip alt metin ve format düzenini birlikte kuralım. Benimle iletişime geç, sayfanı baştan sona hızlandıralım.