Görsel Alt Metni (alt text) Nasıl Eklenir

Alt metni nedir?

Alt metni (alt attribute), bir <img> etiketine eklenen ve görselin içeriğini kelimelerle açıklayan öznitelliktir: <img src="..." alt="...">. Görsel yüklenemediğinde (yavaş bağlantı, bozuk dosya yolu) tarayıcıda onun yerine gösterilir, ekran okuyucular tarafından görme engelli kullanıcılara sesli olarak okunur ve arama motorlarının görselin ne olduğunu anlamasını sağlar çünkü Google görüntüyü piksel düzeyinde "görmez", çoğunlukla çevresindeki metne ve alt attribute'una güvenir.

Alt metni, görselin dosya adından (ör. IMG_2031.jpg) tamamen farklı bir amaca hizmet eder: dosya adı sunucu/dosya sistemi için, alt metni ise anlam aktarımı için vardır. İkisi karıştırılmamalıdır.

Alt metni ile görselin altında görünen bir başlık (caption) da farklı şeylerdir: caption sayfada herkese görünür bir metindir, alt metni ise normal koşullarda görünmez ve yalnızca görsel yüklenemediğinde veya ekran okuyucu tarafından erişildiğinde devreye girer. Bu ayrım genellikle karıştırılır.

Bazı geliştirme ortamlarında alt attribute'unu boş bırakmak HTML doğrulamasından (validation) geçse bile, bu teknik geçerlilik alt metninin gerçekte anlamlı olduğu anlamına gelmez; doğrulama aracı yalnızca özniteliğin var olup olmadığını kontrol eder, içeriğinin kalitesini değil.

Neden önemli?

Alt metni hem erişilebilirlik hem de görsel SEO açısından kritiktir. Görme engelli kullanıcılar ekran okuyucu yazılımlarıyla sayfayı gezerken görselin içeriğini alt metninden öğrenir; bu metin eksikse ekran okuyucu genellikle sadece "görsel" veya dosya adını okur, bu da bilgi kaybına yol açar. Bazı ülkelerde erişilebilirlik yasal bir zorunluluk da olabilir.

Arama motorları ise görsellerin içeriğini doğrudan "göremediği" için alt metnine dayanarak görsel arama sonuçlarında (Google Görseller) sayfayı sıralar. E-ticaret sitelerinde ürün görsellerine doğru alt metni eklemek, Google Görseller üzerinden gelen ek trafiği artırabilir. Eksik alt metni hem kullanıcı deneyimini hem de görsel arama trafiğini olumsuz etkiler.

Görsel yavaş bir bağlantıda geç yüklendiğinde veya hiç yüklenemediğinde, alt metni kullanıcının o alanda ne beklemesi gerektiğini anlamasını sağlayan tek bilgi kaynağıdır; bu da alt metnini yalnızca SEO değil, genel kullanılabilirlik açısından da önemli kılar.

Nasıl düzeltilir?

Her anlamlı görsele kısa, betimleyici bir alt metni yazın.
Sadece dekoratif amaçlı görsellerde (ör. arka plan süslemesi) alt="" kullanarak ekran okuyucunun görseli atlamasını sağlayın; bu, alt attribute'unu hiç eklememekten farklıdır.
Anahtar kelimeyi yalnızca görseli gerçekten tanımlıyorsa ve doğal biçimde kullanın.
Alt metnini kısa ve net tutun; gereksiz uzun cümlelerden kaçının, genellikle bir kaç kelime yeterlidir.
Ürün görsellerinde ürün adını ve önemli özelliği belirtin (renk, model, açı gibi).
İçerik yönetim sisteminizde toplu yükleme yapıyorsanız, alt metnini otomatik doldurmak yerine mümkün olduğunca elle veya en azından ürün adına dayalı anlamlı bir şablonla oluşturun.
Bilgi grafiği (infographic) veya tablo görselleri gibi karmaşık görsellerde, alt metnine sığmayan detayları görselin hemen altında düz metin olarak da sunmayı değerlendirin.

Örnek

<img src="kirmizi-spor-ayakkabi.jpg" alt="Kırmızı renkli erkek spor ayakkabısı, yan görünüm">

Kötü örnek: <img src="IMG_2031.jpg" alt="resim"> — hem dosya adı hem de alt metni görselin içeriği hakkında hiçbir bilgi vermiyor. Bir diğer kötü örnek: alt="ayakkabı ayakkabı spor ayakkabı ucuz ayakkabı indirimli ayakkabı satın al" — bu, tek bir görseli tanımlamak yerine anahtar kelime doldurma amacı taşıyor ve ekran okuyucu kullanıcısı için anlamsız, sıkıcı bir deneyim yaratıyor.

Sık yapılan hatalar

Alt attribute'unu tamamen boş bırakmak (dekoratif olmayan görsellerde).
"resim1.jpg", "IMG_2023" gibi anlamsız dosya adını alt metni olarak kullanmak.
Alt metnine art arda birçok anahtar kelime doldurmak (ör. "ayakkabı, spor ayakkabı, ucuz ayakkabı, indirimli ayakkabı").
Tüm görsellerde aynı genel alt metnini tekrarlamak.
Seoraporu.co raporu her eksik alt metnini tek tek listeler; büyük sitelerde bu genelde ürün/görsel yönetim şablonunda toplu düzeltilmesi gereken bir sorundur.