Görsel SEO: alt metin, WebP/AVIF ve lazy loading rehberi

Görsel SEO, sayfalarınızdaki resimlerin hem arama motorları tarafından doğru anlaşılması hem de hızlı yüklenmesi için yapılan optimizasyonların tümüdür. Dosya adından alt metne, WebP ve AVIF gibi modern formatlardan lazy loading'e kadar her ayrıntı, Google Görseller'den gelen trafiği ve sayfanın genel hızını etkiler. Bu rehberde görsel SEO'yu sırasıyla, her adımda ne yapmanız gerektiğini örnekle anlatıyoruz.

Görsel SEO neden önemli?

Görsellerin iki ayrı etkisi vardır. Birincisi görünürlük: Google Görseller ve normal aramalardaki görsel kutuları ziyaretçi getirebilen ayrı bir kanaldır; özellikle ürün, tarif, mekân ve dekorasyon gibi konularda kullanıcılar önce görsele bakar. İkincisi hız: çoğu sayfada toplam veri boyutunun en büyük kısmını görseller oluşturur ve sayfadaki en büyük öğe sıklıkla bir görseldir. Yani optimize edilmemiş tek bir kahraman görseli, Core Web Vitals'taki LCP değerini bozarak tüm sayfanın performansını düşürebilir.

Üçüncü bir etki de erişilebilirliktir: alt metin, ekran okuyucu kullanan ziyaretçilere görseli anlatır. İyi alt metin hem kullanıcıya hem arama motoruna hizmet eder.

Dosya adı

Google, görselin ne hakkında olduğunu anlamak için dosya adını da kullanır. Fotoğraf makinesinden gelen IMG_20260412_0043.jpg gibi adlar hiçbir bilgi taşımaz. Kurallar basit:

• Görseli tanımlayan, kısa ve anlamlı kelimeler kullanın: deri-kanepe-gri-uc-kisilik.webp.
• Kelimeleri tire (-) ile ayırın; alt çizgi (_) kelimeleri birleştirilmiş sayabilir.
• Küçük harf ve ASCII karakter tercih edin; Türkçe karakter ve boşluk kullanmayın.
• Anahtar kelime doldurmayın: kanepe-kanepe-ucuz-kanepe.webp yardımcı olmaz.

Alt metin nasıl yazılır?

Alt metin (alt özniteliği), görselin içeriğini kelimelerle anlatır. Görsel yüklenemezse yerine gösterilir, ekran okuyucular okur ve Google görselin bağlamını anlamak için kullanır.

1. Görseli olduğu gibi tarif edin. "Mutfak tezgâhında kahve yapan barista" iyi bir alt metindir; "görsel", "fotoğraf" gibi sözcüklerle başlamaya gerek yoktur.
2. Kısa tutun. Genelde 125 karakterin altı yeterlidir.
3. Anahtar kelimeyi doğal yerleştirin. Görsel gerçekten o konuyla ilgiliyse kelime kendiliğinden geçer; zorla eklenen listeler spam sayılabilir.
4. Süs görsellerinde alt metni boş bırakın (alt=""); böylece ekran okuyucular gereksiz yere okumaz. Alt özniteliğini tamamen silmeyin.
5. Metin içeren görselleri yazıya dökün. Görsel içinde bir slogan ya da fiyat varsa alt metne ya da sayfa metnine yazın.

Alt metnin yanı sıra görselin çevresindeki metin, başlık ve görsel altı yazısı (caption) de Google'ın bağlamı anlamasına yardım eder. Görseli ilgili paragrafın hemen yanına koymak, sayfanın en altındaki alakasız bir yere koymaktan çok daha iyidir.

Format seçimi: JPEG, PNG, WebP, AVIF

Birden çok format sunmak için <picture> öğesini kullanabilirsiniz: tarayıcı desteklediği ilk formatı seçer, hiçbirini desteklemiyorsa içindeki <img> etiketine düşer. Böylece AVIF destekleyene AVIF, desteklemeyene WebP ya da JPEG gider.

Boyut ve sıkıştırma

En sık yapılan hata, 4000 piksel genişliğindeki bir fotoğrafı 400 piksellik bir kutuda göstermektir. Tarayıcı yine de tüm dosyayı indirir. Şunları uygulayın:

• Gerçek gösterim boyutuna göre yeniden boyutlandırın. Blog içeriği için genelde 800–1200 piksel genişlik yeterlidir; yüksek yoğunluklu ekranlar için iki katı boyutu srcset ile ayrıca sunun.
• Sıkıştırın. Fotoğraflarda kalite 75–85 aralığı çoğu zaman gözle fark edilmeden dosya boyutunu ciddi biçimde küçültür.
• Metadata temizleyin. EXIF verileri (konum, cihaz) gereksiz yük ve gizlilik riskidir.
• Hedef belirleyin. Genel bir yaklaşım olarak içerik görsellerini birkaç yüz KB'ın altında tutmaya çalışın; büyük kahraman görselleri için bile bir sınır koyun.

width ve height değerlerini HTML'de mutlaka belirtin. Tarayıcı, görsel inmeden önce ona ne kadar yer ayıracağını bilir; sayfa yüklenirken içerik aşağı kaymaz.

Duyarlı görseller: srcset ve sizes

Aynı görseli hem 360 piksel genişliğinde bir telefona hem 1920 piksellik bir monitöre göndermek israftır. srcset ile farklı genişlikte birkaç sürüm tanımlar, sizes ile görselin ekranın ne kadarını kaplayacağını söylersiniz; tarayıcı kendisine en uygun dosyayı seçer. Örneğin 480, 800 ve 1200 piksel genişliğinde üç sürüm üretmek çoğu blog ve ürün sayfası için yeterlidir. Mobil cihazlarda veri tasarrufu belirgindir ve bu doğrudan LCP süresine yansır.

Görsel nerede durmalı?

Google görselin konusunu çevresindeki metinden de çıkarır. Bu yüzden görseli, anlattığı konunun geçtiği paragrafın yanına koyun; altına konuyu özetleyen kısa bir görsel yazısı (caption) ekleyin. Görselin bulunduğu bölümün başlığı, görselin ne ile ilgili olduğunu güçlendirir. Telif haklı stok görselleri doğrudan kullanmak yerine mümkünse kendi çektiğiniz özgün fotoğrafları tercih edin; özgün görsel hem kullanıcıya güven verir hem de tekrar eden stok görsellerden sizi ayırır.

Lazy loading ve CLS

Lazy loading, ekranın altında kalan görsellerin kullanıcı oraya yaklaşana kadar yüklenmemesidir. Modern tarayıcılarda tek bir öznitelikle uygulanır:

<img src="kanepe.webp" alt="Gri kumaşlı üç kişilik kanepe" width="800" height="600" loading="lazy">

• İlk ekrandaki (above the fold) görsele lazy loading uygulamayın. Sayfanın en büyük görseli geç yüklenirse LCP kötüleşir. Bu görsel için fetchpriority="high" kullanabilirsiniz.
• Galeri, ürün listesi ve uzun yazıların alt bölümündeki görseller lazy loading için idealdir.
• Her zaman width/height ile birlikte kullanın; aksi halde yüklenen görsel düzeni kaydırır.
• Google'ın görseli bulabilmesi için gerçek bir <img src> kullanın; yalnızca CSS arka planı olan görseller görsel aramada indekslenmeyebilir.

Hız metrikleri hakkında daha fazlası için Core Web Vitals rehberimize bakın.

Görsel sitemap ve yapısal veri

Google çoğu görseli normal tarama sırasında bulur. Yine de JavaScript ile yüklenen galeriler ya da karmaşık yapılar için görselleri sitemap'inize eklemek yardımcı olabilir. Standart sitemap'te her <url> altında <image:image> ve <image:loc> öğeleri kullanılır:

1. Sitemap'in başına görsel ad alanını ekleyin.
2. Her sayfa için o sayfada geçen görsellerin adreslerini listeleyin.
3. Sitemap'i Search Console'dan gönderin ve hataları kontrol edin.
4. robots.txt dosyanızın görselleri engellemediğinden emin olun.

Ürün, tarif veya makale gibi içeriklerde yapısal veri (schema) içine görsel adresi eklemek, Google'ın görseli zengin sonuçlarda kullanabilmesini kolaylaştırır. Search Console kullanımı için başlangıç rehberimize bakabilirsiniz.

Sık yapılan görsel hataları

• Metni görsele gömmek: Önemli bilgiyi (fiyat, adres, kampanya) yalnızca görselin içine yazmak, arama motorunun ve ekran okuyucunun onu görememesine yol açar.
• Aynı alt metni her yere kopyalamak: Ürün galerisindeki beş görselin hepsine aynı alt metni yazmak yerine her birini (ön, yan, detay) ayrı tarif edin.
• Çok büyük "kahraman" görseller: Tam ekran bir slayt görseli bazen yüzlerce KB yerine birkaç MB tutar; önce boyutu küçültün, sonra tasarımı gözden geçirin.
• Görselleri robots.txt ile engellemek: Görsel klasörünü engelleyen bir kural, Google Görseller'de hiç görünmemenize neden olur.
• Kırık görsel bağlantıları: Taşınan veya silinen görseller 404 verir; düzenli tarama yaparak onarın.

Kontrol listesi ve ölçüm

1. Dosya adı anlamlı, ASCII ve tire ile ayrılmış mı?
2. Alt metin görseli kısaca ve doğal biçimde anlatıyor mu?
3. Görseller WebP/AVIF veya uygun formatta mı?
4. Gösterim boyutundan büyük dosya yüklenmiyor mu?
5. İlk ekran dışındaki görsellerde loading="lazy" var mı?
6. width ve height tanımlı mı?
7. Görsel sitemap ve robots.txt doğru mu?

Ölçüm için PageSpeed Insights "Görselleri verimli şekilde kodlayın" ve "Doğru boyutlu görseller" önerilerini doğrudan gösterir. Search Console'daki performans raporunda arama türünü "Görsel" olarak seçip görsel aramadan gelen gösterim ve tıklamaları ayrı izleyebilirsiniz. Görsel optimizasyonunun hızı iyileştirmesi de hemen çıkma oranını düşürmeye yardımcı olur.

Sonuç

Görsel SEO tek bir hamle değil, her görselde tekrarlanan küçük bir alışkanlıktır: anlamlı bir dosya adı, dürüst bir alt metin, doğru format ve boyut, ekran altı için lazy loading ve gerekirse görsel sitemap. En büyük kazanç genellikle en büyük görsellerden gelir; önce PageSpeed Insights'ta en ağır birkaç görseli bulup onlarla başlayın. Sonuç, Google Görseller'den gelen ek trafik ve daha hızlı bir site olacaktır. Sıralamayı yine Google'ın algoritmaları belirler; sizin işiniz, görsellerinizi anlaşılır ve hafif tutmaktır.