Resim Başlığı Vs. Alt Metin: Hangisi Daha İyi?
Yayınlanan: 2020-12-09Yeni arama motoru optimizasyonu trendlerinde bile, bir resmin bir milyon kelimeye bedel olduğu ifadesi hala geçerli. Tek bir yüksek kaliteli görüntü, potansiyel olarak bir web sitesinin içeriğine hayat verebilir. Ayrıca, iyi yazılmış bir HTML img başlığı, kullanıcı deneyimini iyileştirmenin kesin bir yoludur.
Ancak resimlerin tamamen içerik ve resimleri eşleştirmekle ilgili olduğunu düşünüyorsanız, bir sürprizle karşı karşıyasınız. Görselleri yalnızca web ziyaretçilerine değil, aynı zamanda arama motorlarına da hitap etmek için kullanabilirsiniz. Ancak bir görüntünün sunduğu tüm gücü açığa çıkarmak için, başlığın altına biraz bakmalı ve web sitenizde görüntüleri görüntüleyen HTML kodunu anlamalısınız.
Bir resim etiketinin bileşenlerini inceledikten sonra, arama motoru sıralamalarınızı etkileyecek olanları optimize etmeye geçebilirsiniz. Genellikle, hedeflenecek öğeler img kaynağı başlığı ve HTML img alt başlığıdır. Bu ikisinin web sitenizde oynadığı rolü biliyor musunuz? Cevap bu yazının konusu olacak.
Görsel Başlığını ve Görsel Alternatif Metni Anlama
Bir başlık ile alternatif metin arasındaki farkı bilmenin en kolay yolu, bir HTML resim etiketine bakmaktır. Web sitenizin mobilya satan bir çevrimiçi mağaza olduğunu varsayalım, sallanan sandalye resmiyle ilgili örnek bir etiket şöyle görünebilir:
img src=”sallanan-koltuk.jpg” alt=”satılık kahverengi sallanan sandalye” title=”kahverengi sallanan sandalye”
Web tasarımında, eşittir işaretine sahip öğeler, ad niteliklerini alır. Yukarıdaki örneğin yalnızca bir örnek olduğunu unutmayın. Gerçek dünya uygulamalarında, nitelikler çok daha fazladır ve bir sınıf, bir kimlik, yükseklik, genişlik vb. içerebilir.
Etiketten, alternatif metni ve başlığı tanımlamak basittir. Alt özelliğinin, HTML başlık resim etiketine kıyasla daha bilgilendirici olduğunu not edebilirsiniz. Her iki özelliğin kullanımına bir bakış, bunun neden böyle olduğunu ortaya çıkarır.
Resim Başlığı Ne İçin Kullanılır?
Başlık, bir kullanıcı web sitenizdeki bir resmin üzerine geldiğinde görünür. Bu nedenle, yalnızca görüntüler yüklendikten sonra görünür. Bir kullanıcı başlığı gördüğünde, resmi zaten görmüş olur. Bu nedenle, çok açıklayıcı olmak zorunda değildir. Örneğin:
Ancak konu kullanıcı deneyimini geliştirmek olduğunda başlıklar oldukça önemlidir. İster inanın ister inanmayın, ziyaretçiler web sitenizdeki bazı resimlerin sitenizin belirli bölümlerinde neden göründüğünü anlamakta zorluk çekebilirler. Bir cevap sağlamak için bir başlık kullanışlıdır.
Bazı tarayıcılar, bir görüntünün üzerine geldikten sonra başlığı görüntülemez. Ancak ziyaretçilerinizin web sitenizde gezinmek için ne kullanacağını asla bilemeyeceğiniz için, resim etiketinize bir başlık özelliği eklemeniz daha iyi olur.
Alt Metin Ne İçin Kullanılır?
Alternatif metin birden fazla amaca hizmet eder. Aşağıdaki gibi parçalayabilirsiniz:
- Alternatif metin, bir resim her yüklenemediğinde görüntülenir. Hemen hemen tüm tarayıcılar, alternatif açıklamaların boş resimleri temsil etmesine izin verir. Yanlış bir resim dosyası adından veya bozuk bir URL'den kaynaklanıyor olabilir. Kötü internet bağlantıları da resimlerin düzgün yüklenmesini engelleyebilir. Böyle bir durumda, img alt başlığı ortaya çıkar ve ziyaretçiye görselle ilgili her şeyi açıklar.
- Alternatif metin, kullanıcılar görüntüleri kapattığında da görüntülenir. Resimler web sayfalarını güzelleştirdiği kadar, bazı kullanıcılar salt metin sürümlerini tercih eder. Böylece alt metni okuyarak resimler hakkında bilgi sahibi olabilirler.
- Görme engelli kullanıcılar da iyi yazılmış img alt başlıklarından yararlanır. Ekran okuyucular, bir resmi göremeyen ziyaretçilere açıklamak için bunları kullanır. Genel olarak, alternatif metinler sitenizin erişilebilirliğini artırmaya yardımcı olur. Maksimum erişilebilirliğin önemi o kadar büyüktür ki, W3C alternatif metinleri savunur. Yönergelerinden bir satırda şöyle yazıyor: "img öğesini kullanırken, alt özelliğiyle kısa bir metin alternatifi belirtin."
- Son olarak, arama motorları bir görselin ne hakkında olduğunu daha iyi anlamak için alternatif metinler kullanır. Bu nedenle, alternatif metinler, tıpkı web sitenizdeki diğer içerikler gibi taranabilir. Aşağıdaki resimde bir alternatif metin örneği gösterilmektedir:
(Resim Kredisi: MDN-Mozilla)
Hangisi Daha Önemli: Resim Başlığı mı Alternatif Metin mi?
Başlıkların ve alternatif metinlerin kullanım listelerine baktıktan sonra alt niteliğini daha önemli olarak etiketlemek güvenlidir. Ancak, başlıkların faydasız olduğunu düşünmek yanlış olur. Gerçekte, her iki öğe de hedeflerinize bağlı olarak önemli olabilir.
En büyük endişeniz kullanıcı deneyimini geliştirmekse, başlıklar ana odak alanınız olacaktır. Belirtildiği gibi, başlıkları kullanarak bir resim hakkında ek ayrıntılar verebilirsiniz. Bir kullanıcı üzerine geldiğinde, açıklama açılmalıdır.
ilgileneceksin
İşletmenizi Nasıl Başarılı Bir Şekilde Ölçeklendirirsiniz?
Web Sitesi Yükleme Hızı: Optimizasyon Araçları
Web Sitesi Sağlık Kontrolü: Araçlar ve İpuçları
UX Ne Demektir?
Ancak arama motorları neden resim başlıklarına fazla dikkat etmiyor?
Cevabın arama motorlarının gelişimi ile çok ilgisi var. Geliştiriciler, Google'ın kod tabanının çoğunu 1999'da yazdılar. Sonraki yıl da önemli eklemeler yapıldı. Ancak, popüler olmayan ve keşfedilmemiş HTML öğelerini asla düşünmediler. Web tasarımcıları sık sık başlık kullanmadıklarından, bunları sağlamak için hiçbir neden yoktu. Çekirdek koddaki güncellemeler, HTML başlık resim etiketini hiçbir zaman diğer nitelikler kadar önemli hale getirmedi.
SEO hakkında düşünüyorsanız, odak noktanız alternatif metin olmalıdır. Google'ın alt özelliğindeki bilgileri normal web sayfası içeriği olarak değerlendirdiğini unutmayın. Böylece indeksler. Ek olarak, arama motorları bir görseli tararken sorun yaşayabilir. Alternatif metinler, bir görüntünün ne hakkında olduğunu bilmeleri için mükemmel bir yol sunar.
Ayrıca, alternatif metinler web sitesi erişilebilirliğini tamamen yeni bir düzeye taşır. Tembel yükleme gibi tekniklere rağmen, sitenizdeki tüm görsellerin zamanın %100'ünde yüklenmesini sağlamak neredeyse imkansızdır. Bir ziyaretçi, resimleri kapatabilir veya bağlantı o kadar yavaş olabilir ki, resimler hiç yüklenmeyebilir. Bir alternatif metinle donanmış olarak, bir kullanıcının bir resmin yüklenip yüklenmediğini bileceğinden emin olabilirsiniz.
Sonuç olarak, alternatif metnin önemi, başlık niteliklerini açık ara geride bırakıyor. Kullanımları nispeten fazladır ve bir web sitesinin sıralaması üzerindeki etkileri dikkate değerdir. Hem başlığı hem de alt metni optimize etmek önemli olsa da, alt özelliğinin bilgilerine daha fazla ağırlık vermek iyidir.
SEO için Alternatif Metni Optimize Etme
SEO, yüksek kaliteli trafiği organik olarak yönlendirmenin en emin yollarından biri olmaya devam ediyor. Bir web sitesini optimize etmenin sayısız yolu olsa da, alternatif metni mükemmelleştirmek, site resimlerinizi daha fazla trafik için ayarlamak için idealdir. Neyse ki, süreç düz ileri. Dikkate alınması gereken uygulamalardan bazıları şunlardır:
60 saniyede sitenizin SEO'sunu ve performansını test edin!
İyi web sitesi tasarımı, ziyaretçi katılımı ve dönüşümleri için kritik öneme sahiptir, ancak yavaş bir web sitesi veya performans hataları, en iyi tasarlanmış web sitesinin bile düşük performans göstermesine neden olabilir. Diib, dünyadaki en iyi web sitesi performansı ve SEO izleme araçlarından biridir. Diib, trafiğinizi ve sıralamanızı hızlı ve kolay bir şekilde artırmanıza yardımcı olmak için büyük verilerin gücünü kullanır. Girişimcide görüldüğü gibi!
- Kullanımı kolay otomatik SEO aracı
- Anahtar kelime ve geri bağlantı izleme + fikirler
- Hız, güvenlik ve Temel Yaşamsal Değerlerin takibini sağlar
- SEO'yu geliştirmek için akıllıca fikirler önerir
- 250.000'den fazla küresel üye
- Yerleşik kıyaslama ve rakip analizi
250 binden fazla şirket ve kuruluş tarafından kullanılıyor:
Şununla senkronize edilir: 
İnsanlar için Yaz
Alternatif metinler yazmaya gelince, temel kural şudur: "kör biri için yazıyormuş gibi yaz." Alternatif metnin görüntülendiği durumlar göz önüne alındığında, kurala her zaman uymak zarar vermez. Belirtildiği gibi, img alt başlığında yer alan bilgiler, resimler görüntülenemediğinde ortaya çıkar. Böylece, gizli resim hakkında her şeyi anlatmasını istiyorsunuz.
Bu nedenle, bir insanın okuyup anlayabileceği bir ifade yazın. Daha da önemlisi, açıklayıcı bir cümle oluşturun. Kör bir kişi sitenizde geziniyor olabilir ve sizin yazdığınız tek şey bu olabilir. Aşağıdaki resim, aynı resim için iyi ve kötü bir alternatif metin örneğini göstermektedir:
(Resim Kredisi: Web Barındırma Merkezi)
Arama Motorları İçin Yazın
Bir alternatif metin, yalnızca kullanıcılara değil, aynı zamanda arama motorlarına da bir resim açıklaması sağlar. Bu nedenle, içine bir anahtar kelime ekleyin. Diğer içerikler gibi, görselin bulunduğu web sayfasının genel akışıyla kafiyeli bir anahtar kelime içerdiğinden emin olun.
Aynı notta, anahtar kelime doldurma gibi zayıf SEO uygulamalarından uzak durun. Arama motorları, içeriğinizi spam olarak işaretler ve bu da sıralamanızı düşürür. Alternatif bir metin yazmak, onu anahtar kelimeyle doldurmaktan daha iyidir. Kontrol olarak, anahtar kelimeyi resimlerinizin %70'inden fazlasında kullanmadığınızdan emin olun.
Kısa tut
Alternatif metin bir resmi tanımlar ve alt nitelik tırnaklarına çok fazla kelime koymak cazip gelebilir. Ama bunu yapmaktan kaçının. Arama motorları bunun için sizi cezalandırmayacak, ancak ilgileri alternatif açıklamanın ilk on altı kelimesinde. 125 karakterlik bir alternatif metin, kullanıcı deneyiminden ödün vermeden bir görseli yeterince tanımlamalıdır.
Bununla birlikte, bir görüntünün uzun bir açıklama gerektirdiğini düşünüyorsanız, “longdesc” özniteliğini kullanmak akıllıca olacaktır. HTML4 ve ardılları, resim etiketinde bu özelliğe izin verir.
Alternatif Metin Örnekleri
SEO'ya yeni başladığınızda, iyi ve kötü yazılmış bir alternatif metin arasındaki farkı anlamak biraz zor olabilir. Bu nedenle, örneklere bakmak işe yarar. Örnekleme amacıyla, web sitenizde kırmızı hızla giden bir arabanın görüntüsünü hayal edin.
Resim etiketiniz şöyle görünebilir:
img src=”speeding-car.jpg” alt=”kırmızı araba” başlık=”araba”
Böyle bir durumda, alternatif metin ideal değildir. Görüntüyle ilgili çok az bilgi sağlar. Daha iyi bir sürüm şu şekilde görünebilir:
img src=”speeding-car.jpg” alt=”otoyolda hızla giden kırmızı araba” title=”araba”
Otoyolun adını biliyorsanız, alt metinde belirtmenizde bir sakınca yoktur. Ne pahasına olursa olsun, anahtar kelimelerinizden veya anahtar kelime doldurmanızdan ödün vermekten kaçının. Örneğin, web sayfanızın anahtar ifadesi "kırmızı araba" ise, aşağıdaki gibi bir açıklama yapmayın:
img src=”speeding-car.jpg” alt=”Bu kırmızı bir araba. Kırmızı araba çok hızlı hareket ediyor ve çok güzel bir kırmızı araba” title=”car”
Yukarıdaki açıklama yalnızca resme odaklanırken, anahtar kelime doldurma onu bozar. Arama motorları, bu tür spam içerikli ifadelere kaşlarını çatacaktır. İkinci cümle, kullanıcıya görüntü hakkında yararlı bilgiler sağlamaz. Buna göre yapılacak akıllıca şey, onu dışlamaktır.
Alternatif Metin Nasıl Eklenir
Resim etiketine alternatif metin ekleme prosedürü, bir web sitesi oluşturmak için ne kullandığınıza bağlıdır. Web sitesinin sabit kodunu yazdıysanız, alternatif özelliği manuel olarak eklemek daha iyidir. Örneğin:
Bununla birlikte, günümüzün web geliştirmesi, herhangi bir sabit kodlamayı neredeyse hiç içermez. Muhtemelen bir içerik yönetim sistemi (CMS) veya bir web sitesi oluşturucu kullanmışsınızdır. Tüm metinleri eklerken web tasarım aracınızın hangi işlemi kullandığını öğrendiğinizden emin olun. Genellikle, metodoloji iki veya üç adımdan oluşur.
Dünyanın en popüler CMS'si olan WordPress'te, bir HTML img alt başlığı eklemek parkta yürüyüş yapmaktır. Hesabınıza giriş yaptıktan sonra, söz konusu resmi bulun ve “Düzenle” düğmesini tıklayın. Alternatif özniteliğin verilerini almaya hazır bir giriş alanı görünür.
Alternatif metinleri WordPress'in medya kitaplığına dahil edebilirsiniz. Bir resim seçtikten sonra, resim eki ayrıntılarının altında görüntülenen alternatif açıklama giriş alanını bulun. Örneğin:
(Resim Kredisi: WPBeginner)
Alt Özelliği Ne Zaman Boş Bırakmalı
Alt özelliklerin SEO'da oynadığı önemli kısım göz önüne alındığında, bazen bunları boş bırakmanın iyi bir fikir olduğuna inanmakta zorlanabilirsiniz. Yalnızca konumsal amaçlar için bir web sitesine yerleştirilmiş bir resim hayal edin. Görüntü ne içerikle kafiyeli ne de ona değer katıyor. Bir web tasarımcısı, bu tür görüntüleri yalnızca bir sayfayı süslemek amacıyla kullanabilir.
Bu tür salt tasarım görüntüleri boş bir alternatif özniteliğe sahip olabilir. Mevcut içeriğe değer katmadıkları için bunları açıklamak ihtiyatsız olacaktır. Ekran okuyucular, kullanıcının sayfayı daha iyi anlamasına yardımcı olmadığı için sırayla resimleri atlayacaktır.
Sözcük içeren resimler için alternatif metni hariç tutmak da iyi bir uygulamadır. Tüm bilgiler görseldedir. Bu nedenle, kelimelerin bir açıklaması alakasız olacaktır.
Başlığı Optimize Etme
Başlık arama sıralamasını etkilemediği için bu konuda yapacak pek bir şey yok. Çoğu durumda, alternatif metinden daha kısa ve daha az açıklayıcıdır. Bir resim hakkında daha fazla bilgi vermek yerine, bir başlık ona bir isim verir.
Bununla birlikte, W3C, bir başlığın bir resim etiketine dahil edilmesini açıkça savunmaktadır. Resimlerinizi başlıklandırmazsanız, HTML kodunuz W3C-geçersiz olabilir.
Başlık yazarken sadece kısa değil aynı zamanda akılda kalıcı bir metin oluşturun. Bununla birlikte, tek kelimelik başlıklar hayır-hayırdır. Bir görüntüyü tanımlayan ve on kelimeden fazla olmayan bir ifade yeterli olmalıdır. Örneğin:
Bazen dışarıda bırakabileceğiniz alt etiketinin aksine, resim başlıklarının hariç tutulmasını garanti eden özel durumlar yoktur. Adsız resimler yalnızca kullanıcı deneyiminden ödün vermeye yarar. Sonuç olarak, boş bir HTML başlık resim etiketi oluşturmamak herhangi bir SEO uzmanının yararınadır.
Bu makaleyi faydalı bulduğunuzu umuyoruz.
Sitenizin sağlığı hakkında daha fazla bilgi edinmek, kişisel öneriler ve uyarılar almak istiyorsanız, web sitenizi Diib ile tarayın. Sadece 60 saniye sürer.
Diğer Görsel Hususlar
Şüphesiz, resimlerde alternatif metinlerden ve başlıklardan daha fazlası vardır. İlkini optimize etmek ve ikincisini mükemmelleştirmek denklemin yalnızca bir parçasıdır. Görsellerin SEO üzerindeki etkisinden tam olarak yararlanmak için aşağıdaki web görselleri en iyi uygulamalarını göz önünde bulundurun:
Önemli Metin Verilerini Görüntülerden Uzak Tutun
Kelimeleri bir resim üzerine boyamaktansa yazmak daha iyidir. Arama motorlarının bir görseli derinlemesine taramadığını ve görseldeki kelimelere erişemediğini unutmayın. Örneğin, karmaşık kimyasal denklemler yazarken, HTML metin verilerini istediğiniz şekilde çıkaramıyorsa, kelime dolu görüntülerden kaçının.
Ancak, grafikleri görüntülemek için resimleri kullanmanın bir zararı yoktur. HTML işlevselliği sağlayabilir, ancak resimler üstün bir çözümdür.
İçeriğe Dikkat Edin
Gösterdiğiniz resim, bir bölümün sağladığı bilgilerle uyumlu olmalıdır. Dış giyimden bahseden bir sayfaya bir araba resmi eklemek kötü bir fikir olur. Aynı zamanda, resimlerinizin mümkün olduğunca orijinal olmasına izin verin. Arama motorları, orijinal içeriğe değer verdikleri kadar orijinal resimlere de değer verir.
İyi Bir Görüntü Dosya Adı Yazın
Dosya adları, resim etiketinin img src başlık özelliğinde görünür. Arama motorları, sitenizdeki resimler hakkında daha fazla bilgi edinmek için bunu kullanır.
Varsayılan olarak, görüntülerin alfasayısal dosya adları vardır, örneğin:
A00002.jpg
Adları resmin içeriğini yansıtacak şekilde değiştirdiğinizden emin olun. Bu sırada, bir kelimeyi aşan dosya adlarını tirelemeyi unutmayın. Kırmızı-araba-on-highyway.jpg gibi bir isim, tireler eksikse arama motorlarının okuması zor olacaktır. Ancak görüntü formatını yani noktadan sonraki harfleri değiştirmeyin. Bir biçim dosya adından farklıysa tarayıcıların kafası karışabilir.
Görsellerinizin SEO Farkını Yaratmasına İzin Verin
SEO söz konusu olduğunda, içeriğin kral olduğuna dair bir tartışma yoktur. Ancak resimler, kelimeler kadar web sitenizin içeriğinin bir parçasıdır. HTML img başlığını mükemmelleştirme ve HTML img alt başlığını optimize etme sanatını öğrenerek, sitenizin sıralamasını yükseltmek için görüntüleri kullanmaya başlayabilirsiniz.
Diib: Resim Başlıklarınızı Bugün Optimize Edin!
SEO için görsel kullanmaya takılırsanız, resimleri optimize etmeye adanmış yüzlerce araca göz atmayı unutmayın. Ayrıca, işinize odaklanırken web sitenize yardımcı olması için bir SEO uzmanıyla da görüşebilirsiniz. Ancak bu kadar ileri gitmeden önce, ilk adımı atın ve trafiği artırmak için kendi başınıza görselleri kullanmaya başlayın. Ardından, görsel başlıklarınızdan en iyi şekilde yararlanmak için Diib Digital ile ortak olun. Kullanıcı Kontrol Panelimiz, diğer şeylerin yanı sıra resim başlıklarınızı optimize etmek için tasarlanmış uyarılar ve hedefler verecektir.
Bizi kalabalıktan ayıran özelliklerden bazıları şunlardır:
- Web sitesi performansını artırmak için tasarlanmış Özel Hedefler
- Etki Alanı Yetkilisi diğer teknik SEO sorunları hakkında size bilgi veren uyarılar
- Geri bağlantılarınızın olduğu bozuk sayfalar (404 denetleyicisi)
- Anahtar kelime, geri bağlantı ve indeksleme izleme ve izleme araçları
- Kullanıcı deneyimi ve mobil hız optimizasyonu
- Resim başlığı optimizasyonu
- Platforma özel gönderi performansı
Ücretsiz taramanız için burayı tıklayın veya büyüme uzmanlarımızdan biriyle konuşmak için 800-303-3510 numaralı telefonu arayın.