Görseller çoğu sitede en ağır yükü oluşturur ve en az ilgi gören alandır. Doğru işlendiğinde hem sayfa hızını hem görsel aramasından gelen trafiği doğrudan etkiler.
Alt metni ne işe yarar?
Üç işi birden yapar. Görsel yüklenemediğinde yerine metin gösterilir. Ekran okuyucular bu metni sesli okur. Arama motorları görselin ne olduğunu buradan anlar.
Yani alt metni yalnızca SEO değil erişilebilirlik meselesidir. Görme engelli bir kullanıcının sayfayı anlayabilmesi buna bağlıdır.
Nasıl yazılmalı?
Görselde ne olduğunu sade biçimde anlatmalıdır. "Kombi bakımı yapan teknisyen" gibi. Anahtar kelime doldurmak ters etki yapar.
Dekoratif görsellerde alt metni boş bırakmak doğrudur; ekran okuyucu onları atlar. Ancak bilgi taşıyan her görselde metin bulunmalıdır. Ürün görsellerinde ürün adı, referans işlerde işin ne olduğu yazılmalıdır.
Dosya adı önemli mi?
Evet, arama motoru dosya adını da okur. "IMG_20240815.jpg" hiçbir bilgi taşımaz.
Bunun yerine içeriği anlatan, küçük harfli, tireli bir ad kullanılmalıdır: "kadikoy-kombi-bakimi.jpg" gibi. Türkçe karakterlerden kaçınmak gerekir; adres satırında kodlanmış hâlde görünürler.
Hangi biçim kullanılmalı?
- WebP: Aynı kalitede belirgin biçimde daha küçük dosya. Varsayılan tercih.
- JPEG: Fotoğraflar için, WebP desteklenmeyen durumlarda
- PNG: Saydamlık gerektiğinde; fotoğraf için ağır kalır
- SVG: Logo ve simgeler için; ölçeklenir, boyutu küçüktür
Fotoğrafı PNG olarak kaydetmek, en yaygın ve en pahalı hatalardan biridir. Aynı görsel WebP olarak kat kat küçük olabilir.
Boyut ve çözünürlük
En sık görülen sorun, gösterilecek alandan kat kat büyük görsel yüklemektir. 3000 piksel genişliğindeki bir fotoğrafı 400 piksellik alanda göstermek, gereksiz veri indirtmek demektir.
Görselin gösterileceği en büyük boyutun iki katı yeterlidir; bu, yüksek yoğunluklu ekranlar için kafi gelir. Yükleme sırasında otomatik boyutlandırma yapan bir panel, bu sorunu kökten çözer.
Genişlik ve yükseklik neden yazılmalı?
Etikette boyut belirtilmediğinde tarayıcı görselin yerini bilemez ve sayfa yüklenirken içerik zıplar. Bu, Core Web Vitals ölçütlerinden düzen kaymasını doğrudan etkiler.
Her görsele genişlik ve yükseklik yazmak, tarayıcının yer ayırmasını sağlar. Sabit boyut vermek duyarlı tasarımı bozmaz; CSS ile oran korunarak esnetilebilir.
Gecikmeli yükleme
Ekranın altında kalan görsellerin hemen indirilmesine gerek yoktur. Gecikmeli yükleme özelliği tarayıcıya bunu söyler.
Ancak ilk ekranda görünen görselde bu özellik kullanılmamalıdır; en büyük içerik ögesinin gecikmesi hız ölçümünü olumsuz etkiler. Kural basittir: ilk ekran hariç her görsele uygulanır.
Görsel araması trafiği
Bazı sektörlerde görsel aramasından gelen trafik küçümsenemez. Mobilya, dekorasyon, yapı malzemeleri, giyim ve peyzaj bunların başında gelir.
Bu trafiği almak için görsellerin dosya adı, alt metni ve çevresindeki metnin tutarlı olması gerekir. Ayrıca görselin bulunduğu sayfanın konusuyla örtüşmesi önemlidir; alakasız bağlamdaki görsel sıralanmaz.
Site haritasına görsel eklemek
Görsel açısından zengin sitelerde ayrı bir görsel site haritası oluşturulabilir veya mevcut haritaya görsel etiketleri eklenebilir.
Bu, özellikle görselleri JavaScript ile yüklenen sitelerde keşfi kolaylaştırır. Standart bir kurumsal sitede genelde gerek yoktur; e-ticaret ve portföy sitelerinde değerlendirilebilir.
Duyarlı görsel sunumu
Aynı görseli her cihaza aynı boyutta göndermek gereksiz veri indirtir. Telefonda 400 piksellik alan için 1600 piksellik dosya indirmenin anlamı yoktur.
Modern HTML, farklı ekran genişlikleri için farklı dosya sunmayı destekler. Panel bu boyutları yükleme sırasında otomatik üretiyorsa, ek emek gerektirmeden ciddi hız kazancı sağlanır.
Görsellerin sayfadaki bağlamı
Arama motoru görselin ne olduğunu yalnızca alt metninden değil, çevresindeki metinden de anlar. Başlık, alt yazı ve yakın paragraflar bağlam oluşturur.
Bu yüzden görseli ilgili metnin yanına yerleştirmek, sayfa sonuna toplu galeri olarak koymaktan daha iyi sonuç verir. Alt yazı eklemek de hem kullanıcı hem arama motoru için değerlidir.
Görsel sıkıştırma nasıl yapılır?
Yükleme sırasında otomatik yapılması en pratik çözümdür. Panel görseli alır, boyutlandırır, biçim dönüşümü yapar ve sıkıştırır.
Elle yapılacaksa ücretsiz araçlar yeterlidir. Fotoğraflarda yüzde 80 civarı kalite oranı, dosya boyutu ile görünüm arasında iyi bir denge kurar. Fark gözle görülmez ama boyut belirgin düşer.
Logo ve simgeler
Logo, simge ve basit grafikler için vektör biçimi en uygunudur. Her boyutta net görünür ve dosya boyutu küçüktür.
Aynı logoyu farklı boyutlarda PNG olarak tutmak hem yönetim yükü hem gereksiz veri demektir. Tek bir vektör dosyası tüm kullanımları karşılar.
Özet
Alt metni hem erişilebilirlik hem SEO meselesidir; bilgi taşıyan her görselde bulunmalıdır. Dosya adları anlamlı ve tireli olmalı, Türkçe karakter içermemelidir. WebP varsayılan biçim olmalı, görseller gösterilecek alanın en fazla iki katı boyutta yüklenmelidir. Genişlik ve yükseklik yazmak düzen kaymasını önler; ilk ekran hariç her görsele gecikmeli yükleme uygulanır.
Sık sorulan sorular
Stok görseller sıralanır mı?
Aynı görsel yüzlerce sitede olduğu için görsel aramasında öne çıkması zordur. Kendi fotoğraflarınız hem sıralama hem güven açısından avantajlıdır.
Alt metni her görsele yazmalı mıyım?
Bilgi taşıyan her görsele evet. Dekoratif ögelerde boş bırakmak doğrudur; ekran okuyucu gereksiz metinle uğraşmaz.
Görselleri sıkıştırmak kaliteyi bozar mı?
Makul sıkıştırma oranlarında gözle görülür fark oluşmaz. Fotoğraflarda genelde yüzde 80 civarı kalite, boyut ve görünüm arasında iyi bir denge kurar.
Nereden başlamalı?
Sitenizin en çok ziyaret edilen sayfasını açın, sağ tıklayıp sayfa kaynağını görüntüleyin ve görsel etiketlerine bakın. Alt metni boş, dosya adları anlamsız veya boyut belirtilmemişse, orada hızlı kazanç var.
SEO sonuçları sektöre, rekabete ve sitenin mevcut durumuna göre değişir. Belirli bir sıraya çıkma veya trafik artışı taahhüt edilemez; sıralama garantisi veren hiçbir yöntem yoktur.
Bunu kendi hesabınızda uygulayalım mı?
Ücretsiz analizde hesabınıza bakıp yazıdaki adımların sizde nasıl karşılık bulduğunu gösteriyoruz.