SEO için görsel optimizasyonu görsellerin sayfayı yavaşlatmadan yüklenmesini ve arama motorunun ne gösterdiklerini anlamasını sağlayan düzenlemelerdir. Doğru boyutlandırma, sıkıştırma, uygun format, açıklayıcı dosya adı ve alt metin bu işin temelidir. İyi hazırlanan görseller sayfa hızını korur ve Google Görseller üzerinden ek trafik getirebilir.
Görsel optimizasyonu için boyutlandırma nasıl yapılır?
Görsel optimizasyonunda boyutlandırma için görsel sayfada gösterileceği en büyük boyuta göre kaydedilmelidir. Daha büyük piksel boyutu yalnız dosyayı ağırlaştırır. Discover akışının istediği büyük görsel koşulunu Google Discover yazımızda açıkladık. Büyük görseller sayfanın yavaş yüklenmesine ve ziyaretçinin beklemeden çıkmasına neden olur. Sayfanın ana görseli ağırsa bu durum doğrudan Core Web Vitals içindeki Largest Contentful Paint (LCP) değerine yansır.
Örneğin sayfada 800 piksel genişlikte görünen bir fotoğrafı 4000 piksel olarak yüklemek gereksiz veri taşır. Görseli grafik düzenleme programı ya da çevrimiçi bir araçla doğru boyuta indirin. Farklı ekranlar için farklı boyutlar sunmak isterseniz srcset özniteliğini kullanabilirsiniz.
Görsel etiketine width ve height değerlerini yazmak sayfa yüklenirken içeriğin kaymasını önler. Sayfanın alt kısmında kalan görseller için loading="lazy" kullanmak ilk yüklemeyi hafifletir. Sayfanın en üstündeki ana görsele ise lazy loading uygulanmamalıdır, yoksa geç yüklenir.
Görsel dosya adı nasıl verilmeli?
Dosya adı görselin ne gösterdiğini kısa ve okunabilir biçimde anlatmalıdır. Google görseli anlamak için dosya adına da bakar. "IMG_12345.jpg" gibi bir ad hiçbir bilgi taşımaz.
Bir doğa manzarası fotoğrafı için "doga-manzarasi.jpg", bir mobilya ürünü için "modern-kadife-koltuk.jpg" gibi adlar kullanın. Kelimeleri tire ile ayırın. Türkçe karakterler yerine ASCII karşılıklarını tercih etmek adresin bozulmasını önler. Ürün adı ya da anahtar kelime görsele gerçekten uyuyorsa dosya adında yer alabilir.
Alt metin nasıl yazılır?
Alt metin görselin içeriğini kelimelerle anlatacak şekilde yazılır, çünkü bu HTML özniteliği görsel görünmediğinde onun yerini tutar. Arama motorları görselleri anlamak için metne ihtiyaç duyar. Alt metin bu bilginin en önemli kaynağıdır. Ekran okuyucu kullanan görme engelli ziyaretçiler de görseli bu metinden öğrenir.
Alt metin arama sonuçlarında görünen bir metin değildir. Görsel yüklenemediğinde tarayıcıda, ekran okuyucuda ve arama motorunun değerlendirmesinde kullanılır. Kısa, betimleyici ve görselin gerçek içeriğiyle sınırlı olmalıdır.
Alt metinde anahtar kelime nasıl kullanılır?
Anahtar kelime alt metne yalnız görseli doğru anlatıyorsa girmelidir. Bir ayakkabı satıcısıysanız ürün görseli için "siyah deri erkek ayakkabı" yazmak hem görseli anlatır hem de ilgili aramalarla eşleşir. Aynı alt metne "ayakkabı, ucuz ayakkabı, erkek ayakkabı modelleri" gibi kelime listesi doldurmak ise spam olarak görülür ve erişilebilirliği bozar.
İyi bir alt metin örneği nasıl olur?
İyi bir alt metin görseli görmeyen birine ne olduğunu tek cümlede anlatır. Bir e-ticaret sitesinde ürün görseli için "Mavi kadife üçlü koltuk" yeterlidir. Bir seyahat blogunda manzara fotoğrafı için "Beyaz kumlu plaj ve turkuaz deniz" gibi bir açıklama kullanılabilir.
Yalnız süs amaçlı görsellerde, yani ayırıcı çizgi ya da arka plan deseni gibi öğelerde alt metin boş bırakılabilir. Ekran okuyucu bu durumda görseli atlar.
Görseller kalite kaybı olmadan nasıl sıkıştırılır?
Görseller sıkıştırma araçlarıyla gözle fark edilmeyecek bir kalite düzeyinde kaydedilerek küçültülür. Fotoğraflarda yüzde 70-85 arası kalite ayarı çoğu zaman görünür fark yaratmadan dosya boyutunu belirgin biçimde düşürür.
Sıkıştırmanın iki yolu vardır. Birincisi görseldeki gereksiz verileri, örneğin kamera bilgilerini temizlemektir. İkincisi Squoosh ya da TinyPNG gibi araçlarla dosyayı yeniden sıkıştırmaktır. WordPress gibi altyapılarda bu işi yükleme sırasında otomatik yapan eklentiler de vardır. Sıkıştırdıktan sonra görseli bir kez büyük ekranda kontrol edin.
Hangi görsel formatı seçilmeli?
Görsel formatı olarak fotoğraflar için WebP ya da JPEG, saydam arka plan gereken grafikler için WebP ya da PNG, logo ve ikonlar için SVG en uygun seçimdir. Doğru format aynı görüntüyü daha küçük dosyayla sunar ve sayfa hızını korur.
JPEG, PNG ve GIF arasındaki farklar nelerdir?
Görsel formatlarından JPEG, PNG ve GIF arasındaki farklar sıkıştırma türü, saydamlık ile animasyon desteğinde ortaya çıkar. JPEG fotoğraflar için en yaygın formattır. Kayıplı sıkıştırma kullanır, yani bir miktar görüntü verisinden vazgeçerek dosyayı küçültür. Doğru kalite ayarında bu kayıp gözle fark edilmez. Saydamlık desteklemez.
PNG kayıpsız sıkıştırma kullanır ve saydamlık destekler. Keskin kenarlı grafikler, ekran görüntüleri ve logolar için uygundur. Fotoğraflarda ise JPEG'e göre çok daha büyük dosya üretir.
GIF sınırlı bir renk paleti kullanır ve animasyon destekler. Fotoğraf kalitesi düşüktür. Hareketli görseller için bugün kısa bir video ya da animasyonlu WebP daha hafif bir seçenektir.
Logo ve ikon gibi vektör çizimler için SVG kullanılır. SVG her boyutta net görünür ve dosyası çok küçüktür.
WebP ve AVIF ne avantaj sağlar?
WebP ve AVIF aynı görüntüyü daha küçük dosyayla sunma avantajı sağlar. WebP aynı görüntüyü JPEG ve PNG'ye göre genellikle daha küçük dosyayla sunar. Hem kayıplı hem kayıpsız sıkıştırmayı destekler. Saydam arka plan ve animasyon da kullanılabilir. Güncel tarayıcıların tamamı WebP'yi destekler.
AVIF daha yeni bir formattır. Aynı kalitede WebP'den de küçük dosya üretebilir. Güncel tarayıcılar destekler ama kodlaması daha yavaştır. Pratikte WebP güvenli varsayılan seçimdir.
WebP'nin SEO faydası doğrudan değildir. Google bir görseli formatı yüzünden daha iyi sıralamaz. Fayda daha hızlı yüklenen sayfa ve daha iyi kullanıcı deneyimi üzerinden gelir.
Görsel site haritası ve schema markup ne işe yarar?
Görsel site haritası Google'ın sayfadaki görselleri keşfetmesine yardım eder. Schema markup ise görselin hangi içeriğe ait olduğunu yapısal veriyle anlatır. İkisi de sıralamayı doğrudan artırmaz. Görsellerin bulunmasını ve doğru bağlamda gösterilmesini kolaylaştırır. Görsellerin hangi araçlarda arandığını görsel arama motorları karşılaştırmamızda bulabilirsiniz.
Görsel site haritası nasıl oluşturulur?
Görsel bilgisi ayrı bir dosyada olabileceği gibi mevcut XML site haritasına her sayfanın altına image etiketiyle de eklenebilir. Google bugün bu etiketlerden yalnız görselin adresini kullanır. Başlık ve açıklama gibi eski alanları 2022'de desteklemeyi bıraktı.
Yoast SEO ve Rank Math gibi WordPress eklentileri sayfalardaki görselleri site haritasına otomatik ekler. Site haritasını Google Search Console'daki Site Haritaları bölümünden gönderebilir, adresini robots.txt dosyasına da yazabilirsiniz. Görseller JavaScript ile sonradan yükleniyorsa site haritası Google'ın onları bulmasını kolaylaştırır.
Schema markup görsellerde nasıl kullanılır?
Görseller schema markup'ta ayrı bir şema yerine ait oldukları içeriğin şemasındaki image alanıyla işaretlenir. Bir ürün sayfasında Product şeması görseli fiyat ve stok bilgisiyle birlikte tanımlar. Bir blog yazısında Article şemasındaki image alanı yazının kapak görselini gösterir.
Görselin lisans bilgisini vermek isterseniz ImageObject şemasıyla lisans ve telif sahibini belirtebilirsiniz. Google bu bilgiyi Google Görseller'de "Lisanslanabilir" etiketiyle gösterebilir. Şema için Google'ın önerdiği biçim JSON-LD'dir. Uygulama adımlarını schema markup konusundaki rehberimizde anlattık.
Görsel optimizasyonu sayfa düzeyindeki SEO'nun parçalarından biridir. Title, başlık yapısı ve içerik gibi diğer parçaları on-page SEO konusundaki rehberimizde bir arada bulabilirsiniz. Görselin metinle nasıl birlikte çalıştığını SEO uyumlu makale yazımı yazısında ele aldık. Binlerce ürün görseli olan bir e-ticaret sitesinde bu işi toplu olarak planlamak gerekiyorsa rankZup SEO hizmeti kapsamında birlikte çalışabiliriz.