Bir ürün fotoğrafını yükledin, editöre sürükleyip bıraktın, dosya adı “IMG_4823.jpg” kaldı. Alt etiketi boş. Boyutu dört megabayt. Sayfa mobilde açılırken üç saniye bekletiyor ve Google Görseller’de hiç görünmüyorsun. Görseller çoğu sitede en çok ihmal edilen SEO alanı ve kazanımın en kolay olduğu yer. Şimdi sırasıyla ne yapılacağına bakalım.
Alt etiketi ne için var
Alt (alternatif metin) iki iş görür. Birincisi erişilebilirlik: görme engelli kullanıcıların ekran okuyucusu görselin ne olduğunu bu metinle söyler. İkincisi arama motoru: Google görselin içeriğini anlamada bu metinden ve çevresindeki içerikten yararlanır. Yani alt etiketi anahtar kelime yerleştirme alanı değil, görselin doğru tarifi.
İyi alt metin kısa, betimleyici ve doğaldır: “Kadıköy’de kahve dükkânının dış cephesi ve masaları”. Kötü örnek: “kafe kadıköy kafe tasarım kafe dekorasyon”. İkincisi hem okuyana zarar veriyor hem de spam sayılabilir. Sadece süs olan görsellerde (dekoratif çizgiler, arka plan desenleri) alt alanı boş bırakılabilir; bu doğru pratik.
Dosya adı
Yüklemeden önce dosyayı anlamlı biçimde yeniden adlandır: “kadikoy-kahve-dukkani-dis-cephe.jpg”. Küçük harf, tire ve ASCII karakter kuralı adreslerde olduğu gibi burada da geçerli. Bu, Google’a küçük ama ücretsiz bir ipucu verir ve dosyaları yönetirken de sana kolaylık sağlar.
Fotoğrafı bir ajanstan ya da fotoğrafçıdan alıyorsan dosya adları çoğunlukla anlamsız gelir. Toplu yeniden adlandırma yapmak, sonradan yüzlerce görseli tek tek düzeltmekten çok daha ucuz.
Format: JPEG, PNG, WebP, AVIF
- JPEG: Fotoğraflar için hâlâ yaygın; uyumluluğu yüksek.
- PNG: Şeffaflık gereken grafikler, logolar için uygun; fotoğrafta gereksiz büyük.
- WebP: Modern tarayıcıların tamamına yakınında çalışır ve aynı kalitede JPEG’den belirgin biçimde küçük dosya verir. Çoğu site için varsayılan seçim olabilir.
- AVIF: Daha da küçük dosya boyutu sunar ama üretim süresi ve destek durumu değişebilir; kullanacaksan yedek format bırak.
- SVG: Logo ve ikonlar için ideal; vektör olduğu için her boyutta keskin kalır.
Format seçerken hedef, görüntü kalitesini bozmadan dosyayı küçültmek. Sıkıştırma araçlarıyla (Squoosh gibi ücretsiz araçlar var) farkı gözünle karşılaştırabilirsin.
Boyut: piksel ve ağırlık iki ayrı şey
İki ayrı ölçü var: görselin piksel çözünürlüğü ve dosya ağırlığı. Sayfada 600 piksel genişliğinde görünecek bir görseli 4000 piksel olarak yüklemek hem gereksiz hem yavaşlatıcı. Kural: gösterildiği en büyük boyutun yaklaşık iki katı (yüksek çözünürlüklü ekranlar için) yeterli. Tam ekran arka plan görselleri için bile çoğunlukla 2000 piksel civarı yeter.
Dosya ağırlığı açısından blog görselleri için çoğunlukla birkaç yüz kilobayt hedeflenir; çok büyük hero görselleri bile bunun ötesine geçtiğinde sayfa hızı zarar görür. Sayfadaki toplam görsel yükü PageSpeed Insights’ta “görselleri uygun boyutlandırın” uyarısıyla görünür.
Yükleme davranışı: lazy load ve boyut nitelikleri
Sayfanın alt kısmındaki görseller kaydırılınca yüklensin (lazy loading). Ama ilk ekranda görünen ana görsele (LCP adayı) lazy load koyma; tam tersine öncelikli yükle. Bu yanlışı sık görüyoruz: tüm görsellere toptan lazy load uygulanınca ilk ekran görseli gecikiyor ve Largest Contentful Paint bozuluyor.
Ayrıca genişlik ve yükseklik niteliklerini (width, height) mutlaka tanımla. Bu, tarayıcının görsel yüklenmeden yer ayırmasını sağlar ve sayfa içeriğinin kaymasını (CLS) önler. Görsellerin yer ayırt etmeden yüklendiği sitelerde okuyucu satırı okurken metin aşağı kayar; sinir bozucu ve ölçülebilir bir hata.
Görsel sitemap ve yapılandırılmış veri
Görseller HTML içinde normal img etiketiyle veriliyorsa Google zaten bulur. JavaScript ile yüklenen ya da CSS arka planı olarak verilen görselleri bulamayabilir. Bu yüzden önemli görselleri (ürün fotoğrafları gibi) gerçek img etiketiyle ver. Çok görselli ürün sitelerinde görsel sitemap ya da ürün schema’sındaki image alanı ekstra yardım eder.
Görselin çevresi de bir sinyal
Google bir görselin ne olduğunu anlarken yalnızca alt metne bakmaz. Görselin hemen yanındaki paragraf, altındaki açıklama (figcaption), sayfanın başlığı ve görselin bulunduğu bölüm de bağlam verir. Bu yüzden bir ürün görselini ilgisiz bir bölüme gömmek yerine, ürünü anlatan metnin yanına koy. Uzun yazılarda ana görseli konunun başladığı yere yakın yerleştirmek hem okuyucuya hem de anlama katkı sağlar.
Açıklama satırı eklemek her görsel için gerekmez; ama tablo, şema ya da örnek ekran görüntüsü gibi görsellerde kısa bir açıklama, okunma oranını artırır. Alt metni figcaption ile kopyalama; ikisi farklı işler yapar, biri görmeyenler için tarif, diğeri herkes için ek bilgidir.
Ekran görüntüleri ve grafiklerde metin
Görselin içine yerleştirilmiş metin arama motoru için çoğunlukla görünmezdir. Önemli bilgiyi (fiyat, telefon, kampanya adı, başlık) yalnızca görselin içine yazma; sayfa metninde de bulunsun. Bu, hem erişilebilirlik hem arama görünürlüğü için gereklidir. Bilgi veren grafiklerde alt metne verilerin özetini yaz, örneğin “Aylık ziyaretçi sayısının yıl boyunca artışını gösteren çizgi grafik”.
Özgün görsel ve kalite
Stok fotoğraflar aynı sorguda yüzlerce sitede tekrarlanır; Google’ın bunları ayırt etmesi zor, kullanıcının da ilgisini çekmez. Özgün fotoğraf, hem güven hem ayırt edicilik sağlar. Küçük bir işletme için profesyonel bir çekim, sadece marka algısını değil görsel arama görünürlüğünü de destekler. Profesyonel çekim hizmetimizde çekimden sonra web için optimize edilmiş dosya setini de teslim ediyoruz.
Toplu düzeltme yaparken sıra
Yüzlerce görselin olduğu bir sitede hepsini birden düzeltmeye çalışma. Önce trafik alan ya da satış getiren sayfaların görsellerini ele al: ana sayfa, en çok ziyaret edilen hizmet ya da ürün sayfaları ve en çok okunan blog yazıları. Bu ilk on sayfanın düzelmesi, toplam yükleme süresine ve görünürlüğe hızlı yansır. Geri kalanları aylık bir düzenle ilerlet. Yeni yüklenen her görsel için kurallar baştan uygulansın; bu yeni borç oluşmasını önler.
Uygulama kontrol listesi
- Dosyayı anlamlı ada çevir, küçük harf ve tire kullan
- Gösterileceği boyuta göre yeniden boyutlandır
- WebP ya da uygun sıkıştırma ile küçült
- Betimleyici alt metni yaz, anahtar kelime doldurma
- Width ve height nitelikleri ekle
- İlk ekran görselini öncelikli, diğerlerini lazy yükle
- Yayından sonra PageSpeed ile test et
Mevcut sitendeki görsel sorunlarını toplu bulup düzeltmek istiyorsan sitenin adresini iletişim sayfasından ya da 0540 022 64 22 numarasından WhatsApp ile gönder; sayfa hızı ve görsel durumunu birlikte kontrol edelim.