Görsel SEO'su: Alt Metin, Dosya Boyutu, Formatlar ve Lazy Loading

Görseller sayfaları daha anlaşılır ve daha ilgi çekici kılar. Google Görseller'den ve görsel arama özelliklerinden ziyaretçi de getirebilirler. Ancak genellikle bir sayfanın en ağır kısmıdırlar ve optimize edilmemiş görseller sitelerin yavaş olmasının en yaygın nedenlerinden biridir.

Görsel SEO'su her iki tarafı da doğru yapmakla ilgilidir: görselleri arama motorları için anlaşılır ve herkes için erişilebilir kılarken hızlı tutmak.

Faydalı alt metin yazın

alt özniteliği bir görseli kelimelerle tanımlar:

<img src="latte-art.webp" alt="Barista pouring a heart-shaped latte art design into a white cup" width="1200" height="800">

Alt metnin üç görevi vardır:

1. Erişilebilirlik – ekran okuyucular onu görseli göremeyen kişilere okur
2. Yedek – görsel yüklenemezse tarayıcılar onu gösterir
3. Anlama – arama motorları, çevresindeki metinle birlikte görselin ne gösterdiğini anlamak için onu kullanır

İyi alt metin nasıl yazılır?

• Görselin ne gösterdiğini ve neden sayfada olduğunu anlatın
• Spesifik olun: “masanın yanında katlanmış kırmızı Brompton katlanır bisiklet”, “bisiklet”ten daha iyidir
• Kısa tutun – genellikle 125 karakterin altında
• “Görseli” veya “fotoğrafı” diye başlamayın; ekran okuyucular bunun bir görsel olduğunu zaten duyurur
• İlgili anahtar kelimeleri yalnızca görseli doğal biçimde tanımladıkları yerde kullanın

Dekoratif görseller

Ayırıcılar, arka plan süslemeleri gibi tamamen dekoratif görsellerin alt özniteliği boş olmalıdır: alt="". Bu, ekran okuyuculara onları atlamalarını söyler. Özniteliği tamamen kaldırmak bir hatadır; bazı ekran okuyucular bu durumda dosya adını okur.

Açıklayıcı dosya adları kullanın

IMG_4821.jpg kimseye bir şey söylemez. brompton-katlanir-bisiklet-katli.jpg arama motorlarına bir ipucu daha verir. Kısa çizgiyle ayrılmış küçük harfli kelimeler kullanın.

Doğru formatı seçin

Çoğu site için WebP veya AVIF'i <picture> öğesiyle (gerekirse yedek olarak JPEG ile) sunmak tek başına en büyük iyileştirmedir:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Mountain lake at sunrise" width="1600" height="900">
</picture>

Çoğu CMS, görsel eklentisi ve CDN görselleri otomatik olarak modern formatlara dönüştürebilir.

Yeniden boyutlandırın ve sıkıştırın

Yaygın bir hata, fotoğraf makinesinden doğrudan alınan 4.000 piksel genişliğindeki bir fotoğrafı yükleyip 800 piksel genişlikte göstermektir. Tarayıcı yine de dosyanın tamamını indirir.

• Görselleri gerçekte gösterildikleri en büyük boyuta yeniden boyutlandırın (gerekirse yüksek yoğunluklu ekranlar için iki katı)
• Sıkıştırın – %75–85 civarındaki kalite ayarları genellikle orijinalden ayırt edilemez
• İçerik görsellerinin çoğunu 150–200 KB'ın altında, hero görsellerini de ideal olarak 300 KB'ın altında tutmayı hedefleyin

Duyarlı görseller sunun

Telefonların masaüstü boyutunda görsellere ihtiyacı yoktur. srcset ve sizes öznitelikleri tarayıcının doğru dosyayı seçmesini sağlar:

<img src="product-800.webp"
     srcset="product-400.webp 400w, product-800.webp 800w, product-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Leather wallet in tan, open to show card slots" width="800" height="600">

WordPress ve çoğu modern çatı bunları otomatik olarak oluşturur.

Düzen kaymasını önlemek için genişlik ve yükseklik belirleyin

Bir görselin width ve height öznitelikleri yoksa tarayıcı ne kadar alan ayıracağını bilemez ve görsel yüklendiğinde içerik kayar. Bu, Core Web Vitals'tan biri olan Cumulative Layout Shift (CLS) değerini kötüleştirir. Görselin boyutlarını her zaman ekleyin (veya CSS aspect-ratio özelliğini kullanın); duyarlı CSS yine de onu ölçekleyebilir.

Ekranın altındaki görsellerde lazy loading kullanın

loading="lazy", tarayıcıya bir görseli yalnızca kaydırılarak görünüme girmek üzereyken yüklemesini söyler:

<img src="gallery-3.webp" alt="…" loading="lazy" width="600" height="400">

Bunu sayfanın aşağısındaki görseller için kullanın, ama ana hero görseli için kullanmayın. İlk ekrandaki en büyük görsele lazy loading uygulamak Largest Contentful Paint'i geciktirir. O görsel için bunun yerine fetchpriority="high" kullanmayı düşünün.

Görsellerin bulunmasına yardımcı olun

• Görselleri ilgili metnin yakınına yerleştirin ve faydalı olduğu yerlerde altyazı ekleyin – Google görselleri anlamak için çevredeki içeriği kullanır
• Anlamlı görseller için CSS arka planları yerine standart <img> öğeleri kullanın ki arama motorları onları bulabilsin
• Büyük görsel arşivleri için görselleri XML site haritanıza veya bir görsel site haritasına ekleyin
• Uygun olduğunda yapılandırılmış verilere bir görsel ekleyin (Product, Article, Recipe)
• Sosyal ağlardaki paylaşımların güçlü bir önizleme göstermesi için bir og:image belirleyin

Görsel SEO kontrol listesi

• Her anlamlı görselde açıklayıcı alt metin; dekoratif olanlarda boş alt
• Açıklayıcı, kısa çizgili dosya adları
• WebP veya AVIF formatı
• Gösterim boyutuna göre boyutlandırılmış ve sıkıştırılmış
• Duyarlı sunum için srcset
• Genişlik ve yükseklik öznitelikleri tanımlı
• Ekranın altındaki görsellerde lazy loading, hero'da değil
• Sunucuda veya CDN'de uzun önbellek süresi tanımlı

E-ticaret için görsel SEO'su

Ürün görselleri satışın büyük kısmını yapar. Mağazalar için:

• Birden fazla açı ve kullanımdaki ürünü gösterin. Google Görseller ve alışveriş sonuçları net, yüksek kaliteli ürün fotoğraflarını tercih eder.
• Her ürün için tutarlı ve temiz bir ana görsel kullanın – çoğu zaman alışveriş sonuçlarında kullanılır.
• Ürünü ve varyantı tanımlayan alt metin yazın: “Trail Runner X kadın koşu ayakkabısı, petrol yeşili, yandan görünüm.”
• Görselleri mutlak URL'lerle Product yapılandırılmış verilerine ekleyin.
• Yakınlaştırılabilir görseller, büyük sürümü sayfa yüklenirken değil, yalnızca gerektiğinde yüklemelidir.

Bloglar ve yayıncılar için görsel SEO'su

• Mümkün olduğunda özgün görseller kullanın. Özgün fotoğraflar, diyagramlar ve grafikler bağlantı kazanabilir ve görsel aramada öne çıkabilir; stok fotoğraflar binlerce sitede kullanılır.
• Görsel bilgi aktarıyorsa altyazı ekleyin. Altyazılar bir sayfadaki en çok okunan metinler arasındadır.
• Karmaşık konular için paylaşılabilir diyagramlar ve infografikler hazırlayın; temel bilgileri metin olarak da yazın.
• En az 1200 piksel genişliğinde güçlü bir öne çıkan görsel seçin. Google Discover büyük ve yüksek kaliteli görselleri tercih eder; büyük önizlemelere max-image-preview:large robots ayarıyla izin verebilirsiniz.

Arka plan görselleri ve CSS

CSS background-image ile tanımlanan görseller, içerik olarak arama motorları için görünmezdir ve alt metinleri yoktur. Onları yalnızca süsleme için kullanın. Bir görsel anlam taşıyorsa – bir ürün, bir grafik, bir ekip fotoğrafı – bir <img> öğesi kullanın.

Görsel CDN'leri ve otomatik optimizasyon

Birden çok boyutu ve formatı elle yönetmek kısa sürede pratik olmaktan çıkar. Görsel CDN'leri ve hizmetleri (Cloudflare Images, Cloudinary, imgix, Bunny Optimizer ve diğerleri) ile pek çok WordPress eklentisi şunları yapabilir:

• Görselleri otomatik olarak WebP veya AVIF'e dönüştürmek
• Her cihaz için anında yeniden boyutlandırmak
• Akıllıca sıkıştırmak
• Görselleri ziyaretçilere yakın önbelleğe almak

Bunlardan birini kullanıyorsanız görsel URL'lerinin sabit ve taranabilir kaldığını ve CDN'in Googlebot'u engellemediğini kontrol edin.

Etkiyi ölçmek

Görsellerinizin kaç tıklama ve gösterim aldığını ve hangi sorgularda aldığını görmek için Google Search Console'un Performans raporunu açın ve arama türünü Resim olarak değiştirin. Görsel optimizasyonunun Largest Contentful Paint ve Cumulative Layout Shift değerlerini iyileştirdiğini doğrulamak için aynı araçta Core Web Vitals'ı izleyin.

Yaygın hatalar

1. Fotoğraf makinesi boyutundaki fotoğrafları yükleyip tarayıcının küçültmesine bırakmak
2. Eksik alt öznitelikleri veya anahtar kelimeyle doldurulmuş alt metinler
3. Hero görseline lazy loading uygulamak
4. Genişlik ve yükseklik olmaması, düzen kaymasına yol açması
5. Metni HTML'de yazmak yerine görsellerin içine gömmek – arama motorları ve ekran okuyucular için görünmezdir ve çevrilemez
6. Görsel klasörlerini robots.txt'de engellemek

Önemli çıkarımlar

• Bir görselin ne gösterdiğini ve neden orada olduğunu anlatan alt metin yazın; dekoratif görsellerde boş alt kullanın.
• Gösterilen boyuta göre boyutlandırılmış ve sıkıştırılmış WebP veya AVIF sunun.
• Düzen kaymasını önlemek için her zaman genişlik ve yükseklik belirleyin.
• Ekranın altındaki görsellere lazy loading uygulayın, ama ana hero görseline asla uygulamayın.
• Anlamlı görseller için ilgili metnin yakınında, açıklayıcı dosya adlarıyla gerçek img öğeleri kullanın.
• Görsellerin getirdiği trafiği ölçmek için Search Console'daki görsel arama verilerine bakın.

Sık sorulan sorular

Alt metin sıralamalara yardımcı olur mu?

Görsellerin Google Görseller'de sıralanmasına yardımcı olur ve sayfaya bağlam katar. Asıl amacı erişilebilirliktir; onu insanlar için yazmak genellikle arama motorları için de en iyi sonucu verir.

WebP mi AVIF mi kullanmalıyım?

İkisi de iyi destekleniyor. AVIF çoğu zaman daha küçük dosyalar üretir; WebP daha hızlı kodlanır ve eski araçlar tarafından daha yaygın desteklenir. Pek çok site AVIF'i, yedek olarak WebP ile sunar.

Görsel dosya adları önemli mi?

Biraz. Açıklayıcı dosya adları küçük ek bir sinyaldir ve medya kitaplığınızı yönetmeyi kolaylaştırır.

Lazy loading SEO için iyi mi?

Evet, doğru kullanıldığında. Yerel loading="lazy" Google tarafından desteklenir. Yalnızca sayfa ilk yüklendiğinde görünen görsellere lazy loading uygulamayın.