HTML kodunda bir sayfa görüntüsünü betimlemek ve görüntünün işlevini tanımlamak için kullanılan alt textler, aynı zamanda alt öznitelikler ve alt açıklamalar olarak da adlandırılır.
Alt textlerin avantajları:
- Fotoğraflara alt text eklemek, her şeyden önce web ulaşılabilirliğinin bir ilkesidir. Örneğin; ekran okuyucu kullanan görme engelli kullanıcıları ele alalım. Sayfa içi bir görseli daha iyi anlayabilmek için sayfa içi bir alt text’i okumak isteyeceklerdir.
- Eğer bir görüntü dosyası yüklenirken bir sorun olursa, bu görüntü yerine alt text görünecektir.
- Alt textler, görüntülerin daha düzgün bir şekilde dizine eklenmelerinin sağlanması için arama motoru tarayıcılarının işini kolaylaştırır.
Vurgulanan metin soldaki hemen görüntünün alt textidir.
Kod örneği:
<img src=”kedicikdanspartisi.gif” alt=”Yavru kedi dans ediyor”>
Optimal format
Alt textler yeterince açıklayıcı olmalıdır ve anahtar kelimelerle doldurulmamalıdır. Gözlerinizi kapatın ve bir kişinin alt text’i size okumasını sağlayın. Eğer görüntünün hayali kafanızda canlanıyorsa iyi iş çıkarttığınızı söyleyebilirsiniz.
Lezzetli bir fıstıklı baklava için birkaç alt text örneği verelim:
Fena değil: <img src=”baklava.png” alt=”baklava”>
Bu alt text için en fazla “fena değil” diyebiliyoruz. Çünkü yeterince açıklayıcı değil. Evet bu sadece bir baklava, fakat üzerine söylenecek daha çok şey var.
Daha iyi: <img src=”baklava.png” alt=”Tereyagli ve bol fistikli baklava”>
Bu alt text daha iyi bir alternatiftir. Çünkü görüntüde ne olduğu açıkça belirtilmiş. İlk alt metinde gösterildiği gibi sadece bir “baklava” değil; “tereyağlı ve bol fıstıklı bir baklava!”
Tavsiye edilmez:
- <img src=”baklava.png” alt=” “>
- <img src=”baklava.png” alt=”baklava baklavalar bak lava kuru baklava ıslak baklava yemek en iyi kahvaltı tatlı tereyağı”>
Bu 2 örneği de tavsiye etmiyoruz. İlk kod satırında herhangi bir alt text yok, iki tırnak işaretinin içinin boş olduğunu görebiliyorsunuz. İkinci seçenek iste anahtar kelimelerle doldurulmuş bu yüzden pek cazip durmuyor.
Alt Textler Neden Önemlidir?
- Ulaşılabilirlik
Alt text, ulaşılabilirlik açısından web tasarım ilkelerinden bir tanesidir. Gerçek ve birincil amacı o an görüntülenemeyen resimleri ziyaretçilere tanımlamaktır. Bu görüntülenemeyen resimler, ekran koruyucu ve tarayıcıların engellemesiyle oluşabilir. Ya da görme engelli kullanıcılar tarafından görülemeyebilir. Resimlerinize alt text eklediğiniz zaman, görsel kaliteye bakılmaksızın tüm kullanıcıların içeriğinizi değerlendirebilmesini sağlarsınız.
- Görüntü SEO
Resimlerde alt text kullanmak daha iyi bir kullanıcı deneyimi sunabilir. Fakat sadece bununla yetinmez aynı zamanda SEO avantajları da elde edersiniz. Alt text’in yanı sıra resim başlığı ve dosya adlandırması ile birlikte görüntüleriniz SEO için uygun hale gelir.
Arama motorları yıllar boyunca resim tanıma konusunda büyük gelişmeler gösterdi ve artık bir arama motorunun bir görüntünüzü görmeme şansı yok. Bu yüzden bir görüntünün yorumunu arama motorlarının ellerine bırakmak doğru olmaz. Çünkü eğer bir görüntüyü yanlış yorumlarlarsa sıralamalarınız olumsuz etkilenebilir.
Örnek verecek olursak: Google, aşağıdaki görüntüyü görür ve “şapkalı ve gözlüklü adam” olarak değerlendirebilir.
“Robert Downey Jr’un Sherlock Holmes karakteri” için sıralamalarda yer almak istiyorsanız Google’a bir yardım eli uzatmalısınız.
Arama motorlarına yardım etmek dışında alt textler ayrıca anahtar kelimelerinizi eklemeniz için bir fırsattır. Sayfa içi anahtar kelimeler hala arama motoru sıralamalarını önemli ölçüde etkiliyor. Alt text oluştururken hem görüntünüzü tanımlamasını hem de anahtar kelimelerinizi içermesini sağlarsanız oldukça fayda görebilirsiniz.
İyi Bir Alt Text Nasıl Yazılır?
- Görüntüyü mümkün olduğunca tanımlayın. Alt textlerin temel amacı, görüntüleri göremeyen kullanıcılar için metinler sunmaktır. Eğer bir görüntü gerçekten de herhangi bir anlam ya da değer taşımıyorsa ve sadece tasarım amacıyla oluşturulmuş ise, CSS ile değil HTML ile var olmalıdır.
- Kısa tutun. En kaliteli alt textler genellikle 125 karakterden daha kısadır.
- Alt textler anahtar kelimelerinizi eklemek için kullanabileceğiniz başka bir fırsattır. Önceliğinizi görüntüleri tanımlamaya vermeniz daha mantıklı olacaktır fakat buna ek olarak anahtar kelimelerinizi de alt text’e dahil edebilirsiniz.
- Anahtar kelimelerle doldurmayın. Google, kalitesiz olan alt textleri puanlamaz. Bu yüzden, çok fazla anahtar kelime ekleyerek anlam bütünlüğü olmayan bir alt text sizin zararınıza olacaktır. Görüntünün tanımını içeren ve ana anahtar kelimenizi içeren bir cümle sizin için en uygunudur.
- Görüntüleri text olarak kullanmayın. Bu madde birçok SEO dostu ilkelerden daha önemlidir. Arama motorları her ne kadar görüntüleri görse de onları tamamıyla okuyamaz. Bu yüzden sözcükler yerine resimler kullanmamalısınız. Eğer bunu yapmanız gerekiyorsa da mutlaka alt text’te görüntüde ne yazdığını açıklamalısınız.
- Alt text’inizde “… resmi” ya da “… görüntüsü” gibi söylemlerde bulunmayın. Alt text’inizin zaten bir görüntü ile ilgili olduğu bilindiği için bunu vurgulamanız gerekmez.
- longdesc=”” aklınızdan çıkmasın. Daha uzun açıklamalar gerektiren daha karmaşık görüntüler için longdesc=”” etiketini kullanmalısınız.
İyi alt textler nasıl görünür?
Fena değil: <img src=”kus.png” alt=”Horoz”>
Daha iyisi: <img src=”kus.png” alt=”Horoz otuyor”>
En iyisi: <img src=”kırmızı-ibikli-horoz.png” alt=”Kırmızı ibikli horoz otuyor”>
Fena değil: <img src=”yuruyen-merdiven.jpg” alt=”Yuruyen merdivendeki kadin”>
Daha iyisi: <img src=”yuruyen-merdiven.jpg” alt=”Yuruyen merdivende duran kadin”>
En iyisi: <img src=”yuruyen-merdiven.jpg” alt=”Elinde alisveris cantalari olan kadin yuruyen merdivende duruyor”>