Ürün görselleri için SEO: görsel optimizasyonu rehberi

Ürün görselleri SEO için nasıl optimize edilir?

Ürün görsellerini optimize etmek üç işten oluşur: Google'ın görseli bulabilmesi (img etiketi, site haritası), anlayabilmesi (dosya adı, alt metin, çevresindeki metin) ve sayfanın hızlı yüklenmesi (doğru format, boyut ve yükleme önceliği). Bu üçü birlikte hem Google Görseller trafiğini hem de ürün sayfalarının genel performansını iyileştirir.

E-ticarette görsel, ürünün kendisidir. Kullanıcı kumaşın dokusunu, ayakkabının tabanını veya çantanın içini fotoğraftan anlar. Bu yüzden görsel optimizasyonu yalnızca teknik bir SEO maddesi değil, aynı zamanda dönüşüm meselesidir. Bu yazıda fotoğraf çekimine değil, çekilmiş görsellerin web'de nasıl sunulacağına odaklanıyoruz.

Google ürün görsellerini nasıl bulur?

Google'ın görsel SEO belgesi açıktır: Google, CSS ile eklenen arka plan görsellerini indekslemez. Bir görselin aramada görünmesini istiyorsanız standart HTML img öğesiyle ekleyin. Google, img öğesinin src özelliğinde kullanılan BMP, GIF, JPEG, PNG, WebP, SVG ve AVIF formatlarını destekler.

E-ticaret temalarında sık görülen sorunlar şunlardır:

• Galeri görsellerinin yalnızca JavaScript ile yüklenmesi: İlk görsel HTML'de, diğerleri tıklayınca geliyorsa, ek görseller keşfedilmeyebilir.
• Kategori banner'larının CSS arka planı olması: Bu görseller aramada görünmez.
• Görsellerin farklı bir alan adındaki CDN'den sunulması: Bu kendi başına sorun değildir, ancak robots.txt ile o alan adının taranmasının engellenmediğinden emin olun.

Google, normal tarama sırasında bulamayacağı görselleri bildirmek için görsel site haritası göndermenize de izin verir. Çok sayıda ürün görseli olan sitelerde bu, keşfi destekleyen pratik bir yöntemdir.

Dosya adı ve alt metin nasıl yazılır?

Google, kısa ve açıklayıcı dosya adlarını önerir; belgedeki örneğe göre anlamlı bir ad, IMG00023.JPG gibi bir addan daha iyidir. Alt metinde ise anahtar kelimeleri bağlam içinde ve uygun şekilde kullanan, bilgi açısından zengin bir açıklama ister. Alt metni anahtar kelime listesine çevirmek, Google'ın açıkça kötü örnek olarak gösterdiği bir uygulamadır.

Öğe	Zayıf örnek	Güçlü örnek
Dosya adı	DSC_4481.jpg	erkek-kahverengi-deri-bot-yandan.jpg
Alt metin	"bot"	"Kahverengi deri erkek bot, yandan görünüm"
Alt metin (aşırı)	"bot erkek bot deri bot ucuz bot bot fiyatları"	"Kauçuk tabanlı kahverengi deri bot, taban detayı"
Galeri görseli	Tüm görsellerde aynı alt metin	Her açıyı ayrı tarif eden alt metin

Alt metin aynı zamanda erişilebilirlik içindir: ekran okuyucu kullanan bir ziyaretçi ürünü bu metinden anlar. Varyantlı ürünlerde renk ve açı bilgisini alt metne eklemek hem kullanıcıya hem Google'a gerçek bilgi verir. Dekoratif görsellerde (ayraç, arka plan süsü) alt metni boş bırakmak doğrudur.

Google ayrıca görsellerin ilgili metnin yakınında ve görsel konusuyla ilgili sayfalarda yer almasını önerir. Ürün görseli, ürün adı, açıklaması ve fiyatıyla aynı bağlamda durduğunda Google görselin neyi gösterdiğini daha kolay anlar.

Hangi görsel formatı ve boyutu kullanılmalı?

Ürün fotoğrafları için modern formatlar (WebP, AVIF) genellikle aynı görsel kaliteyi JPEG'den daha küçük dosya boyutuyla sunar. Hangi formatın sizin görsellerinizde ne kadar kazanç sağladığını kendi görsellerinizle test edin. Şeffaf arka planlı ikonlar ve logolar için SVG uygundur.

Boyut tarafında temel kural, ekranda gösterilecek boyuttan çok daha büyük görsel indirmemektir. Masaüstü için hazırlanmış büyük bir ürün fotoğrafının mobilde de aynen indirilmesi, en yaygın hız sorunlarından biridir. Çözüm duyarlı görsellerdir: Google, srcset özelliğini veya picture öğesini kullanmayı ve her zaman bir yedek src belirtmeyi önerir.

Kontrol listesi:

1. Ürün görsellerini ihtiyaç duyulan en büyük görüntüleme boyutuna göre dışa aktarın.
2. srcset ile birkaç genişlik sunun, tarayıcı cihaza uygun olanı seçsin.
3. WebP veya AVIF kullanın, eski tarayıcılar için yedek format tanımlayın.
4. Her img öğesine width ve height özelliklerini ekleyin; bu, görsel yüklenirken sayfanın kaymasını önlemeye yardımcı olur.
5. Zoom için kullanılan yüksek çözünürlüklü görseli yalnızca kullanıcı zoom yaptığında yükleyin.

Kategori sayfalarındaki görseller nasıl ele alınmalı?

Kategori sayfaları onlarca küçük ürün görseli gösterir ve çoğu zaman sayfanın en ağır kısmı bu ızgaradır. Burada ürün sayfasındaki büyük görseli küçültüp tekrar kullanmak yerine, ızgaradaki kart boyutuna uygun ayrı bir küçük sürüm sunun. İlk satırdaki birkaç ürün görseli ekran açıldığında görüneceği için normal yüklenmeli, aşağıdaki satırlar ise lazy load edilmelidir. Kart görsellerinde de alt metin olarak ürün adını kullanmak, hem erişilebilirliği hem de görsel aramada bağlamı güçlendirir.

Lazy loading ürün sayfasında nasıl kullanılmalı?

web.dev'in tarayıcı tabanlı lazy loading rehberi önemli bir uyarı yapar: sayfa açıldığında büyük olasılıkla görünür alanda olacak görselleri, özellikle LCP görselini lazy load etmeyin. Ürün sayfasındaki ana ürün görseli çoğu zaman sayfanın en büyük öğesidir, yani LCP görselidir. Bu görsele loading="lazy" vermek ana içeriğin geç görünmesine yol açar.

Doğru kurgu şöyledir:

Görsel	Önerilen yükleme
Ana ürün görseli (ilk açılışta görünen)	Normal yükleme, gerekirse fetchpriority="high"
Galerideki diğer görseller	loading="lazy"
İlgili ürünler, yorum fotoğrafları	loading="lazy"
Zoom görseli	Kullanıcı etkileşimiyle yükleme

web.dev, önemli bir görselin yükleme önceliğini artırmak için fetchpriority="high" kullanılabileceğini belirtir. Sayfa hızının dönüşüme etkisini Core Web Vitals ve dönüşüm oranı yazımızda ayrıca ele aldık.

Google hangi görseli öne çıkarır?

Arama sonuçlarında sayfanızı temsil edecek görseli yönlendirmek için Google, schema.org primaryImageOfPage özelliğini veya og:image meta etiketini kullanabileceğinizi belirtir. Seçtiğiniz görsel sayfayla ilgili ve sayfayı temsil eden bir görsel olmalı; site logosu gibi genel görsellerden kaçınılmalıdır.

Ürün sayfalarında ayrıca Product yapısal verisindeki image özelliğiyle ana ürün görsellerini belirtmek, Google'ın ürün bilgisini doğru eşleştirmesine yardım eder. Bu işaretlemenin ayrıntılarını Product schema rehberimizde anlattık. Google Alışveriş'te ürün listeliyorsanız, Merchant Center'ın görsel bağlantısı için kendi gereksinimleri olduğunu da unutmayın; feed'deki görselle sayfadaki görselin aynı ürünü göstermesi gerekir.

Örnek: bir ürün sayfasının görsel denetimi

Örnek: Bir ayakkabı markası ürün sayfasını incelediğinde şu tabloyu buluyor: ana görsel 3.000 piksel genişliğinde JPEG ve lazy load ediliyor, galeri görsellerinin alt metni boş, dosya adları kameradan gelen numaralar. Düzeltme sırası şöyle olur: önce ana görselin lazy load'u kaldırılır ve srcset ile mobil boyut sunulur, sonra galeri için açıyı tarif eden alt metinler yazılır, son olarak yeni yüklenen görsellerde açıklayıcı dosya adı standardı uygulanır. Mevcut görsellerin dosya adını toplu değiştirmek URL'leri değiştireceği için önceliği düşüktür.

Özet

• Görselleri CSS arka planı yerine img öğesiyle ekleyin; Google CSS görsellerini indekslemez.
• Kısa ve açıklayıcı dosya adları ile bağlama uygun alt metinler kullanın, anahtar kelime doldurmayın.
• WebP veya AVIF ve srcset ile cihaza uygun boyutu sunun, width ve height belirtin.
• Ana ürün görselini lazy load etmeyin; galerinin geri kalanını lazy load edin.
• Çok sayıda görsel için görsel site haritası kullanın ve og:image ile temsil görselini belirtin.

Ürün sayfalarınızın görsel ve hız performansını birlikte incelemek isterseniz Performetic olarak ücretsiz bir büyüme analizi hazırlayabiliriz.