Alt text (alt etiketi) nedir? Görsel SEO için alt metin nasıl yazılır

Alt text (alternatif metin, alt etiketi), bir görselin HTML img etiketindeki alt özniteliğine yazılan ve görsel yüklenemediğinde ya da ekran okuyucu kullanıldığında görselin yerine geçen açıklamadır. Google görselin içeriğini anlamak için alt metni kullanır; görme engelli kullanıcılar sayfayı alt metinler üzerinden deneyimler. Doğru yazılmış alt metin hem erişilebilirlik yükümlülüğünü karşılar hem Google Görseller'den trafik getirir.

Alt text nedir?

Alt text, HTML'de görsel etiketinin alt özniteliğidir:

<img src="/assets/mustafa-gezer.png" alt="Mustafa Gezer, Kaynak Ol kurucusu" width="48" height="48">

Türkçede "alternatif metin", "alt etiketi" veya "alt metin" denir; teknik olarak etiket değil özniteliktir. Üç durumda devreye girer: görsel yüklenemediğinde tarayıcı alt metni gösterir, ekran okuyucu yazılımlar görsel yerine alt metni sesli okur, ve arama motorları görselin ne olduğunu anlamak için alt metni okur.

Alt metin neden önemli: erişilebilirlik ve SEO

Birinci sebep erişilebilirliktir. Görme engelli veya az gören kullanıcılar web'i ekran okuyucuyla kullanır; alt metni olmayan bir görsel onlar için "resim" diye okunan boş bir kutudur. Web İçeriği Erişilebilirlik Yönergeleri (WCAG) alt metni temel gereklilik sayar; kamu ve büyük kurumsal sitelerde yasal yükümlülüktür.

İkinci sebep görsel SEO'dur. Google görselin içeriğini kısmen tanıyabilir ama alt metin, dosya adı ve çevresindeki metin, görselin hangi aramalarda gösterileceğini belirler. Google Görseller, ürün, tarif, tasarım ve "nasıl yapılır" gibi kategorilerde ciddi trafik kaynağıdır. Ayrıca sayfanın genel konusunu anlamada alt metinler de sinyal taşır.

Üçüncü sebep, görsel bir linkin içindeyse alt metnin link metni yerine geçmesidir. Logo linkinde alt metin yoksa Google o linkin nereye gittiğini anlamaz.

İyi alt metin nasıl yazılır?

1. Görseli görmeyen birine telefonda anlatır gibi yazın. Görselde ne var, bağlam için ne önemli?
2. Kısa ve somut. 5-15 kelime çoğu görsel için yeterli. Ayrıntılı grafik ve tablolar için alt kısa tutulup ayrıntı sayfa metnine veya uzun açıklamaya taşınır.
3. "Resim", "görsel", "fotoğraf" ile başlamayın. Ekran okuyucu zaten görsel olduğunu söyler. "Görsel: İzmir Saat Kulesi" değil, "İzmir Saat Kulesi, Konak Meydanı".
4. Bağlamı yansıtın. Aynı fotoğraf bir ürün sayfasında "Siyah deri erkek cüzdanı, 8 kart bölmeli", bir blog yazısında "Masada açık duran cüzdan ve kredi kartları" olabilir.
5. Anahtar kelimeyi görsel gerçekten onu gösteriyorsa kullanın. Zorla eklemeyin.
6. Metin içeren görsellerde metni yazın. Bir banner'da "Kış indirimi %30" yazıyorsa alt metin de bunu içermeli.
7. Linkli görsellerde hedefi söyleyin. Logo için "Kaynak Ol ana sayfa", ürün kartı için ürün adı.

Alt metin örnekleri: iyi ve kötü

Dekoratif görseller ve boş alt

Her görsel bilgi taşımaz. Arka plan deseni, ayırıcı çizgi, süs ikonu, zaten metinde anlatılan şeyin tekrarı olan görsel: bunlar dekoratiftir. Dekoratif görsellerde alt özniteliği boş bırakılır: alt="". Bu, ekran okuyucuya "bunu atla" der.

Özniteliği tamamen kaldırmak (alt hiç yazmamak) farklıdır: ekran okuyucu dosya adını okur, erişilebilirlik denetimleri hata verir. Kural: her img'de alt olmalı; dolu veya boş. Arka plan görsellerini CSS background-image ile vermek, dekoratif görseller için en temiz çözümdür; HTML'de görsel olmaz, alt sorunu da olmaz.

Alt, title ve caption farkı

alt: Görselin yerine geçen metin; erişilebilirlik ve SEO için temel.

title: Fareyle üzerine gelince çıkan ipucu. Ekran okuyucular çoğunlukla okumaz, mobilde görünmez, Google için zayıf sinyal. Gerekmedikçe kullanmayın.

caption (figcaption): Görselin altında herkesin gördüğü açıklama. Kullanıcılar caption'ları gövde metninden daha çok okur; SEO için de görünür metin olduğu için değerlidir. Alt ile caption aynı metni tekrar etmemeli; alt görseli tanımlar, caption bağlam ekler.

Görsel SEO'nun diğer adımları

• Dosya adı: IMG_2041.jpg yerine gri-yun-kaban-kadin.jpg. Küçük harf, tire ile ayrılmış, Türkçe karaktersiz.
• Format ve boyut: WebP veya AVIF; görüntülendiği boyuttan büyük olmayan çözünürlük; 200 KB altı hedef. Büyük görseller LCP'yi doğrudan bozar.
• Boyut öznitelikleri: width ve height her görselde; CLS'yi önler.
• Lazy loading: Ekran dışındaki görsellere loading="lazy"; ekranın üstündeki ana görsele asla.
• Responsive: srcset ile cihaza göre farklı boyutlar.
• Çevre metni: Görselin yakınındaki başlık ve paragraf, Google için alt kadar önemli bağlam sağlar.
• Yapılandırılmış veri: Ürün, tarif ve makale şemalarında image alanı; görselin zengin sonuçlarda çıkmasını sağlar.
• Görsel site haritası: Çok görselli sitelerde Google'ın görselleri keşfetmesini hızlandırır.

Eksik alt metinleri bulma

Tek sayfa için Chrome DevTools'daki Lighthouse erişilebilirlik denetimi, alt'ı eksik görselleri listeler. WAVE tarayıcı eklentisi aynı işi sayfa üstünde işaretleyerek yapar. Tüm site için Screaming Frog "Images" sekmesinde alt metni eksik, boş veya 100 karakterden uzun görselleri filtreler.

WordPress'te Medya kütüphanesindeki "Alternatif metin" alanı, görsel eklendiğinde yazılmalı; sonradan toplu düzenleme için eklentiler var ama otomatik üretilen alt metinler (dosya adından türetilen) genellikle kötüdür. Elle yazın; her görsel için 10 saniye sürer.

Sık sorulan sorular

Alt metin kaç karakter olmalı?

Kesin sınır yok; 125 karakter pratik üst sınırdır. Çoğu görsel için 5-15 kelime yeterlidir.

Her görsele alt metin yazmak zorunlu mu?

Her img'de alt özniteliği bulunmalı: içerik görsellerinde dolu, dekoratiflerde boş. Özniteliğin hiç olmaması hatadır.

Alt metne anahtar kelime eklemeli miyim?

Görseli doğru tanımlıyorsa evet. Görselle ilgisiz kelimeler eklemek erişilebilirliği bozar ve spam sinyalidir.

Yapay zekâ ile otomatik alt metin üretmek doğru mu?

Taslak olarak işe yarar, özellikle yüzlerce ürün görseli olan sitelerde. Ama bağlamı bilmez: aynı görselin ürün sayfasındaki ve blog yazısındaki alt metni farklı olmalı. Üretilen metni kontrol edip bağlama göre düzenleyin.