Kategoriler
Kodlama

JS ile görsellere alt etiketi eklemek

ALT etiketi boş veya hiç olmayan görsellere JS ile otomatik olarak alt etiketi eklemek.

SEO için sitedeki görsellerin ALT etiketlerinin olması önemli, aslında bu ALT etiketleri engelli insanlar için oluşturulmuş bir standart ve mesela görme engelliler için sayfadaki görsel ekran okuyucu ile sesli olarak ona okunur. Tabii bunun olması Google için + değer olduğu için ve alt etiketlerine anlamlı keywordler de eklenebildiği için bu SEO’da performansa katkı sağlar.

Çoğu web sitesinde alt etiketleri yazılmayabiliyor, genellikle üşengeçlik veya kodlama eksikliği. Javascript tarayıcı tabanlı yani sayfayı açan kullanıcının makinesinde çalışan bir kod olduğu için her ne eksik olursa olsun sayfa açıldığında olması istenenler eklenebilir burada da bu şekilde bir yöntemle boş veya hiç olmayan alt etiketlerini dolduracağız, alt etiketinde resmin dosya adının olması hiç olmamasından veya boş olmasından iyidir. let src = this.src.split('/').pop().split('.')[0] kısmına ek olarak başka keywordler de eklenebilir ve Googlebot elbette bunları okuyabilir.

WordPress kullanıyorsanız bu içeriğe de göz atabilirsiniz: https://wolkanca.com/wordpress-resimlere-otomatik-alt-etiketi-eklemek/ ayrıca bu da görseller için SEO performansı sağlayabilecek bir yöntem: https://wolkanca.com/resimlere-hover-ile-aciklayici-metin-eklemek/

Aşağıdaki JQuery kodu ile sayfadaki resimlere eğer alt etiketleri yoksa o resmin URL’indeki son dosya ismi otomatik olarak alt etiketi olarak eklenir.

$('img:not([alt])').attr('alt', function(){
	let src = this.src.split('/').pop().split('.')[0];
	return src
});

Eğer resimlerdeki alt etiketleri boş ise yani alt="" şeklinde ise aşağıdaki de ek olarak kullanılabilir.

Kaynak: https://stackoverflow.com/questions/56303597/change-alt-attribute-of-images-with-empty-alt

$('img[alt=""]').attr('alt', function(){
	let src = this.src.split('/').pop().split('.')[0];
	return src
});

Aslında ihtiyaca göre ikisi de aynı anda kullanılabilir.

Kolay gelsin.