Ürün Görselleri SEO İçin Nasıl Optimize Edilir?

Ürün görselinin SEO açısından yararlı olması için gerçek ürünü göstermesi, hızlı yüklenmesi ve taranabilir olması gerekir. Bu örnekte 1600×2000 oranındaki bir kaynak fotoğraftan 800 ve 1600 piksel genişlikte WebP üreteceğiz.

1. Orijinali koruyun

ImageMagick 7 kurulu bilgisayarda ayrı bir çalışma klasörüne geçin. Komutlar yeni dosya üretir; kaynak fotoğrafın üzerine yazmaz.

magick identify -format '%w x %h\n' urun-orijinal.jpg
magick urun-orijinal.jpg -auto-orient -resize '800x>' -quality 82 urun-800.webp
magick urun-orijinal.jpg -auto-orient -resize '1600x>' -quality 82 urun-1600.webp
magick identify -format '%f %w x %h %b\n' urun-800.webp urun-1600.webp

Kaynak genişlik 1600'den küçükse > büyütmeyi önler; bu durumda dosya adındaki sayı gerçek genişliği göstermeyebilir. HTML srcset değerlerini ölçtüğünüz gerçek genişlikle eşleştirin. Kalite 82 bir deneme değeridir; kumaş dokusu/yazıların bozulup bozulmadığını gözle karşılaştırın.

2. Ürün şablonuna responsive görsel ekleyin

Ölçümler gerçekten 800×1000 ve 1600×2000 çıktıysa:

<img src="/media/urun-800.webp"
     srcset="/media/urun-800.webp 800w, /media/urun-1600.webp 1600w"
     sizes="(max-width: 800px) 100vw, 800px"
     width="1600" height="2000"
     alt="Siyah keten gömleğin önden görünümü">

Width/height oranı yüklenmeden önce alan ayırır. Sayfanın ilk büyük ürün görseline otomatik lazy eklemeyin. Aşağıdaki galeri görsellerine loading="lazy" eklenebilir. Alt metin rengi, ürünü ve bakış açısını anlatmalı; marka/anahtar kelime yığını olmamalı.

3. Sunucudan doğru cevap geldiğini görün

curl -I https://magaza.example.com/media/urun-800.webp

200 ve image/webp Content-Type beklenir. 403 varsa hotlink koruması veya CDN kuralını inceleyin. Tarayıcı Network ekranında dar/geniş ekran için hangi dosyanın seçildiğini kontrol edin; DPR değeri de seçimi etkiler.

4. Arama ve erişilebilirlik testi

Görsel URL'si robots.txt ile yanlışlıkla engellenmemeli. Ürün feed'i ve Product schema aynı ürünü temsil eden erişilebilir görseli kullanmalı. Ekran okuyucu için alt metin anlamlı olsun. Görsel değişince CDN önbelleğini yenileyin veya yeni dosya adı kullanın; eski linkleri tüm sayfalardan kaldırmadan eski dosyayı silmeyin.