Görsel SEO Rehberi: Alt Etiketi, Boyut ve Görsel Aramada Sıralama

Ortalama bir web sayfasında indirilen verinin en büyük kalemi görsellerdir. Aynı zamanda çoğu sitede en az optimize edilen kalem de odur.

Bunun iki ayrı bedeli var: sayfa yavaşlar (Core Web Vitals düşer, dönüşüm azalır) ve Google Görseller üzerinden gelebilecek trafik hiç gelmez. Bu rehber ikisini birden ele alıyor.

Görsel SEO Neyi Kapsar?

Üç ayrı alanın kesişimidir:

• Erişilebilirlik: ekran okuyucu kullanan biri görselin ne anlattığını anlayabiliyor mu?
• Performans: görsel ne kadar hızlı yükleniyor, sayfa düzenini kaydırıyor mu?
• Keşfedilebilirlik: Google Görseller ve görsel arama sonuçlarında çıkıyor mu?

Üçü de aynı teknik kararlardan etkilenir; bu yüzden birlikte ele almak gerekir.

Alt Metni (alt text) Doğru Yazmak

Alt metin, görselin metin karşılığıdır. Görsel yüklenemediğinde gösterilir, ekran okuyucu tarafından okunur ve Google'ın görseli anlamasında birincil sinyaldir.

Kurallar:

• Görseli görmeyen birine tarif eder gibi yazın. Doğru testi budur.
• 125 karakteri geçmeyin. Bazı ekran okuyucular sonrasını kesiyor.
• "Resim", "fotoğraf" diye başlamayın. Zaten bir görsel olduğu biliniyor.
• Dekoratif görsellerde alt="" bırakın. Silmeyin — boş alt, ekran okuyucuya "bunu atla" der; alt'ın hiç olmaması dosya adını okutur.
• Anahtar kelime doldurmayın. Bu, spam sinyali olarak değerlendirilebilir.

Dosya Adı ve URL

Görsel dosya adları hâlâ bir sinyal taşıyor ve maliyeti sıfır:

IMG_20260813_113244.jpg   →   mavi-deri-omuz-cantasi.jpg

Türkçe karakter kullanmayın (ç, ğ, ş bazı sunucularda sorun çıkarır), kelimeleri tire ile ayırın, alt çizgi kullanmayın.

Doğru Biçim: WebP mi, AVIF mi?

Pratik yaklaşım: WebP'yi varsayılan yapın, <picture> etiketiyle AVIF sunun ve JPEG'i yedek olarak bırakın.

<picture>
  <source srcset="urun.avif" type="image/avif">
  <source srcset="urun.webp" type="image/webp">
  <img src="urun.jpg" alt="Mavi deri kadın omuz çantası" width="800" height="1000">
</picture>

Boyut ve Çözünürlük

En sık görülen israf: 4000 piksel genişliğinde bir fotoğrafın, ekranda 600 piksel gösterilen bir alana konması. Tarayıcı dosyanın tamamını indirir, sonra küçültür.

Kurallar:

• Görseli gösterileceği en büyük boyutun iki katından büyük yüklemeyin (retina için 2x yeterli).
• srcset ile farklı ekranlara farklı boyut sunun.
• İçerik görsellerinde hedef dosya boyutu: 200 KB altı. Tam genişlik kapak görsellerinde 400 KB'ı aşmamaya çalışın.

<img src="urun-800.webp"
     srcset="urun-400.webp 400w, urun-800.webp 800w, urun-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     alt="Mavi deri kadın omuz çantası"
     width="800" height="1000">

width ve height Yazmak Neden Kritik?

width ve height özniteliklerini yazmazsanız tarayıcı görselin ne kadar yer kaplayacağını bilemez. Görsel yüklendiğinde altındaki içerik aşağı kayar — bu, Cumulative Layout Shift (CLS) metriğini bozar ve Core Web Vitals değerlendirmenizi düşürür.

Özellikle mobilde, kayan bir düzen kullanıcının yanlış yere tıklamasına da yol açar. Bu iki öznitelik en ucuz Core Web Vitals kazancıdır; ayrıntılar için Core Web Vitals rehberimize bakın.

Lazy Loading Tuzağı

loading="lazy" görselleri ekrana girene kadar yüklemez; sayfa açılışını hızlandırır. Ama ekranın ilk görünen alanındaki görsele lazy vermeyin.

Sayfanın en üstündeki kapak görseli genellikle Largest Contentful Paint (LCP) öğesidir. Ona lazy loading uygulamak, ölçtüğünüz en önemli hız metriğini doğrudan kötüleştirir.

Kural: ilk ekranda görünenler loading="eager", altındakiler loading="lazy".

Google Görseller'den Trafik Almak

Görsel arama, birçok sektörde (moda, dekorasyon, yemek, mobilya, otomotiv yedek parça) hafife alınan bir trafik kaynağıdır. Sıralamayı etkileyen ana unsurlar:

1. Görselin çevresindeki metin. Google, görselin bağlamını en çok yakınındaki başlık ve paragraftan çıkarır.
2. Sayfanın kendi sıralaması. Sayfa konuda otoriteyse görselleri de daha üstte çıkar.
3. Özgünlük. Stok fotoğraflar binlerce sitede aynı; kendi görselinizin ayırt edilme şansı yüksektir.
4. Yapılandırılmış veri. Ürün, tarif ve video şemaları görsel sonuçlarında rozet kazandırır — schema markup rehberimizde anlattık.
5. Görsel site haritası. Özellikle görselleri JavaScript ile yüklenen sitelerde keşfi kolaylaştırır.

Görsel Site Haritası

Normal sitemap'inize görsel bilgisi ekleyebilirsiniz:

<url>
  <loc>https://siteniz.com/urun/canta</loc>
  <image:image>
    <image:loc>https://siteniz.com/img/canta.webp</image:loc>
  </image:image>
</url>

Bu, görselleri sayfa yüklendikten sonra JavaScript ile getiren sitelerde belirgin fark yaratıyor. Sitemap yapısının tamamı için robots.txt ve site haritası rehberimize bakabilirsiniz.

Kontrol Listesi

• [ ] Tüm içerik görsellerinde anlamlı alt var mı?
• [ ] Dekoratif görsellerde alt="" mı?
• [ ] Dosya adları açıklayıcı ve tiresiz Türkçe karaktersiz mi?
• [ ] Biçim WebP (ya da AVIF) mi?
• [ ] Dosya boyutları 200 KB altı mı?
• [ ] width ve height yazılı mı?
• [ ] İlk ekrandaki görsel lazy değil mi?
• [ ] srcset ile mobil için küçük sürüm sunuluyor mu?
• [ ] Görseller CDN üzerinden mi servis ediliyor?
• [ ] Sitemap'te görsel bilgisi var mı?

Sık Sorulan Sorular

Alt metne anahtar kelime koymalı mıyım?

Doğal olarak geçiyorsa evet, zorlayarak hayır. Alt metnin birincil işi görseli tarif etmektir; anahtar kelime bu tarifin içinde doğal duruyorsa sorun yok.

Stok fotoğraf kullanmak zararlı mı?

Sıralama cezası yok, ama görsel aramada ayırt edilme şansınız düşük çünkü aynı dosya yüzlerce sitede. Kendi fotoğrafınız her zaman daha iyi — düşük bütçeyle bile.

Görselleri CDN'e taşımak SEO'yu etkiler mi?

Olumlu etkiler; yükleme süresi düşer. Farklı alan adından servis ediyorsanız görsel site haritasında tam adresleri kullanın.

Kaç görsel çok fazla?

Sayının kendisi sorun değil, toplam ağırlık sorun. On görsellik bir sayfa 800 KB'da kalıyorsa sorun yoktur; üç görsellik bir sayfa 6 MB ise vardır.

İlgili Makaleler:

• Core Web Vitals ve Sayfa Hızı Optimizasyonu
• On-Page SEO Rehberi
• Teknik SEO Kontrol Listesi: 30 Madde
• Schema Markup ve Yapısal Veri Rehberi
• Mobil SEO Rehberi