Alternatif metin ve dosya adları: görsel SEO için pratik rehber

Alternatif metin, dosya adı ve görselin altındaki açıklama farklı işler yapar

Görsel hazırlarken aynı bilgiyi istiyormuş gibi görünen alanlarla karşılaşabilirsiniz. Her birinin amacı farklıdır: dosya adı dosyayı tanımlar, alternatif metin görseli göremeyene açıklar, görselin altındaki açıklama ise herkesin okuyabileceği şekilde görünür.

Alternatif metin web sayfasında, genellikle alt özniteliğinde saklanır. JPG veya PNG dosyasının içinde değildir. Sayfayı sesli okuyan ya da Braille olarak sunan ekran okuyucu, bu açıklamayı kullanabilir. MDN'nin alt özniteliği açıklamasınabakın.

Aynı fotoğraf farklı yerlerde farklı alternatif metin gerektirebilir. Ürün sayfasında kulp ve yüzey önemli olabilir. Yansıtıcı yüzeyleri fotoğraflama yazısında sır üzerindeki ışık yansıması öne çıkabilir. O sayfanın okuyucusu için önemli olanı anlatın.

Okuyucunun görselden neye ihtiyaç duyduğunu belirleyin

Önce, görsel olmasa hangi bilginin eksileceğini düşünün. Bir ürün ayrıntısı, işlem adımı, önemli yazı veya bağlantının tek etiketi mi? Yoksa yalnızca sayfayı güzelleştiriyor mu? W3C'nin alternatif metin karar ağacı görselin rolüne göre seçim yapmanıza yardımcı olur.

• Bilgi ekleyen görsel: okuyucunun ihtiyaç duyduğu ayrıntıyı açıklayın.
• Başka etiketi olmayan bağlantı veya düğme: hedefi ya da işlemi anlatın.
• Dekorasyon: gerekli bilgi eklemiyorsa ve bağlantı veya kontrol değilse alternatif metni boş bırakın.
• Grafik veya ayrıntılı diyagram: ne gösterdiğini kısaca açıklayın; ayrıntıları yakınındaki metinde veya tabloda verin.

Masadaki bir kupanın fotoğrafını düşünün. Kupanın satış sayfasında şekli ve görünümü faydalıdır. Bülten kayıt formunun arkasında aynı fotoğraf dekoratif olabilir. Önemli olan onu oraya neden koyduğunuzdur.

Sade bir dille faydalı açıklama yazın

Önce konuyu, sonra gerekli ayrıntıyı anlatın. Bir sırt çantasının yan fotoğrafında file cepte şişe görünebilir. Ürün sayfasında bu bilgi, tüm renkleri saymaktan daha yararlıdır.

Asıl bilgiye odaklanın. Arka planı, çekim açısını ve ışığı yalnızca anlamaya yardımcıysa açıklayın. W3C'nin bilgi veren görseller kılavuzu her ayrıntıyı saymadan faydalı bilgiyi nasıl anlatacağınızı açıklar.

Bunlar örnek açıklamalardır; bu yazıdaki görselleri tarif etmezler. Kendi görselinizde her ayrıntının gerçekten göründüğünü kontrol edin. Açıklama daha eksiksiz olsun diye malzeme, model, yer veya özellik uydurmayın. Kahverengi bir sandalye fotoğrafı, sandalyenin deri olduğunu kanıtlamaz.

Açıklamayı görselden önceki ve sonraki cümlelerle okuyun. Faydalı bilgi ekliyor mu, yoksa aynı cümleyi gereksiz tekrarlıyor mu? Sayfanın bütününe uyarlayın. Görselin altındaki açıklama zaten tüm bilgiyi veriyorsa ayrı bir açıklamanın gerekliliğini değerlendirin. Orada bulunmayan yararlı ayrıntıları alternatif metinde koruyun.

Dekoratif görsellerde alternatif metni boş bırakın

Başlığın yanındaki süs veya arka plan çizimi yalnızca sayfayı güzelleştirebilir. Gerekli bilgi eklemiyorsa boş alt özniteliği kullanın: alt="". Ekran okuyucu görseli atlayabilir. Özniteliği tamamen kaldırmayın; bazı okuyucular bunun yerine dosya adını okuyabilir. W3C'nin dekoratif görseller kılavuzunabakın.

<img src="/images/sari-susleme.svg" alt="">

Açıklamaya “dekoratif görsel” yazmayın. Bu, faydalı bilgi vermeden fazladan duyuru oluşturur. Boş olması, okunacak bir açıklama olmadığı anlamına gelir.

Dekoratif görünen ama önemli bilgiyi yalnızca kendi içinde veren görsellere dikkat edin. İndirim ve bitiş tarihini gösteren banner, bu bilgiler sayfada yoksa sadece süs değildir. Teklifi normal metin olarak yazın veya mesajı alternatif metne ekleyin. Hata simgesi de sorunu bildiren tek unsur ise yazılı açıklama gerektirir.

Yalnızca görselden oluşan bağlantı ve düğmelerin amacını açıklayın

Görsel bağlantının tek içeriğiyse alternatif metin hedefi söylemelidir. Görsel düğmesinde işlemi anlatmalıdır. “Ara” işlevi belirtir; “Büyüteç” yalnızca şekli anlatır. W3C'nin işlevsel görseller kılavuzu bu durumları açıklar.

Mağaza logosunun ana sayfa bağlantısındaki tek içerik olduğunu düşünün. “North Shore mağazası ana sayfası” anlamlı bir etiket verir. Logonun dalga şeklini ayrıntılı anlatmak bağlantının hedefini açıklamaz.

Aynı bağlantıda zaten açık, görünür metin varsa tekrar etmemek için görselin alternatif metni çoğunlukla boş olabilir. Bu, görselin ek önemli bilgi verip vermediğine bağlıdır. Görseli ve bağlantı metnini birlikte değerlendirin.

<a href="/">
  <img src="/images/north-shore-logo.svg"
       alt="North Shore mağazası ana sayfası">
</a>

Ürün galerisinde küçük resmi seçmenin ne yaptığını düşünün. “Sırt çantasının yan cebini görüntüle” her yerde ürün adını tekrarlamaktan faydalı olabilir. Galeride düğme etiketleri ve görsel açıklamaları ayrı alanlarda bulunabilir. Yayımlanan galeride her kontrolün anlaşılır etiketi olduğundan emin olun.

Grafikleri, ekran görüntülerini ve görsel içindeki yazıları ele alın

Grafik, kısa açıklamaya sığmayacak kadar bilgi içerebilir. Konusunu özetleyin, temel sonuçları ve değerleri yakın metinde veya görsel olmadan okunabilen tabloda verin. W3C'nin karmaşık görseller kılavuzu bu yöntemleri anlatır.

Aynı fotoğrafın üç çıktısının boyutlarını karşılaştıran grafik düşünün. Alternatif metin karşılaştırmayı tanımlar; tablo her biçimi ve boyutu verir. Okuyucu sonucu çubuk yüksekliklerini yorumlamadan anlamalıdır. Gerçek ölçümleri kullanın ve sonuçların o fotoğrafa ait olduğunu belirtin.

Öğretici ekran görüntüsünde ilgili ayarı veya adımı anlatın. Kalite ayarının yerini söylemek yardımcı olabilir, ancak asıl talimatı sayfada normal metin olarak da verin. Birden fazla etiket gerekiyorsa uzun işlemi alternatif metne saklamak yerine talimatlara ekleyin.

Görselde başka yerde bulunmayan kısa ve önemli bir yazı varsa onu alternatif metne alın. Uzun yazıları doğrudan sayfaya koyun. Canva dışa aktarma kılavuzumuz önemli başlık ve düğmelerin neden genellikle sayfa içeriği olarak daha iyi çalıştığını açıklar.

Kısa ve açıklayıcı dosya adları seçin

Google kısa, açıklayıcı adları önerir ve görsel konusu hakkında küçük bir ipucu verdiklerini söyler. Görseli anlamak için alternatif metni ve çevredeki sayfayı da kullanır. Bu, adı arama ifadeleriyle doldurmak için gerekçe değildir. Google'ın görsel SEO yönergelerinebakın.

Önce konuyu, sonra yararlı ayrıntıyı veya açıyı yazın. Ürün galerisinde yesil-sirt-cantasi-yan-cep.webp adı, IMG_4821.webp adından daha anlaşılırdır. Benzer ürünleri ayırmaya yardımcıysa ürün kodu ekleyin. Yıl, görseli gerçekten tanımlamıyorsa eklemeyin.

Kolay bir sistem için küçük harfler ve sözcükler arasında kısa çizgi kullanın. Düzeni kolaylaştırır, ancak daha iyi sıralama garantilemez. Uzantıyı doğru tutun: addaki .png uzantısını .jpg yapmak görseli dönüştürmez. Biçimi değiştirmek için dönüştürme aracı kullanın.

Mümkünse yüklemeden önce adlandırın. Yayımlanmış görselin adı web adresini değiştirirse eski adresi kullanan sayfalar görseli kaybedebilir. Bu sayfaları güncelleyin, gerekirse eski adresi yeniye yönlendirin. Çalışan bir görsel arşivini yalnızca anahtar kelime eklemek için yeniden adlandırmayın.

Açıklamayı sayfadaki görsele ekleyin

Editörde “alternatif metin” veya “alt metni” alanını arayın. Kaydedip yayımlanan sayfayı kontrol edin. Medya arşivindeki başlık, görsel açıklaması veya dosya adını değiştirmek sayfanın alternatif metnini mutlaka değiştirmez. Editörler ve şablonlar alanları farklı kullanır.

Editör doğru alanı sunuyorsa HTML yazmanız gerekmez. Sayfa kodunu doğrudan düzenleyenler için basit bir bilgi veren görsel şöyle görünür:

<img src="/images/yesil-sirt-cantasi-yan-cep.webp"
     alt="Yan file cebinde su şişesi bulunan yeşil sırt çantası">

Kaydettikten sonra gerçek sayfayı kontrol edin. Masaüstü tarayıcıda görsel öğesini inceleyip alt değerini bulabilirsiniz. Erişilebilirlik aracı eksik öznitelikleri bulur, ancak açıklamanın faydalı olup olmadığını güvenilir şekilde değerlendiremez. Metni sayfa içeriğiyle birlikte okuyun.

Çok dilli sitelerde açıklamayı sayfanın dilinde yazın. İngilizce anahtar kelime listesini taşımak yerine anlamı doğal biçimde çevirin. Her sayfa kendi açıklamasını sakladığı için aynı dosya farklı sayfalarda farklı alternatif metin alabilir.

Örnek: ürün fotoğrafına yararlı bir açıklama ekleyin

Yeşil sırt çantasının ürün sayfasına yan cep fotoğrafı ekliyorsunuz. Amaç tüm özellikleri tekrarlamak değil, su şişesinin cebe nasıl sığdığını göstermektir.

1. Faydalı açıyı seçin. Şişenin ve cebin net göründüğü fotoğraf kullanın. Gizli ayrıntıları tarif etmeyin.
2. Dosyayı hazırlayın. Gereksiz alanı kırpın ve cebi görünür tutan ölçüler seçin. Tüm süreç için ürün görselleri kılavuzumuzu izleyin.
3. Son dosyayı adlandırın. Örneğin yesil-sirt-cantasi-yan-cep.jpg adını, gerçek kayıt biçimine uygun uzantıyla kullanın.
4. Sayfaya özel alternatif metin ekleyin. File cepteki şişeyi anlatın. Fiyatlar, teslimat vaatleri ve ilgisiz arama ifadeleri sayfanın diğer içeriğinde kalmalıdır.
5. Yayımlanan galeriyi kontrol edin. Kaydedilen açıklamayı ve galeri kontrollerinin etiketlerini hem telefonda hem masaüstünde kontrol edin.

Bu süreç dosyayı hazırlamakla alternatif metin yazmayı ayırır. İkisi de önemlidir, ancak farklı sorunları çözer. Aynı yöntemi ekran görüntüsü ve grafiklerde, açıklamayı bilgiye uyarlayarak kullanın.

Bu yaygın hatalardan kaçının

• Arama ifadelerini tekrarlamak. “Sırt çantası en iyi sırt çantası ucuz sırt çantası yürüyüş çantası” cebi açıklamaz veya fotoğrafı anlamaya yardımcı olmaz.
• Dosya adını açıklama olarak kullanmak. Dosyayı bulmayı sağlar, ancak okuyucunun bilmesi gerekeni her zaman anlatmaz.
• Her galeri görseline aynı metni vermek. Farklı bilgiler gösteriyorlarsa farklı açıları açıklayın.
• Ayrıntıları tahmin etmek. Malzemeleri, etiketleri ve özellikleri görünüşten uydurmak yerine doğrulayın.
• Dekorasyonlara uzun açıklamalar yazmak. Fazladan duyurular, faydalı içeriği takip etmeyi zorlaştırabilir.
• Yalnızca medya arşivini kontrol etmek. Şablon, düzenlediğiniz alanı kullanmayabilir. Yayımlanan görseli kontrol edin.

Sık sorulan sorular

Alternatif metin ne kadar uzun olmalı?

Faydalı bilgiyi çıkarmadan mümkün olduğunca kısa tutun. Basit bir fotoğraf için kısa bir cümle yeterli olabilir. Açıklamayı yararlı kılan tek bir karakter sınırı yoktur. Uzun grafik açıklamalarını sayfa metnine koyun.

Her görselin açıklayıcı alternatif metni olmalı mı?

Hayır. Bilgi ekleyenleri açıklayın, dekorasyonlarda boş bırakın. Görsel bağlantı veya düğmenin tek etiketi ise hedefi ya da işlemi anlatın.

Taslak için yapay zekâ kullanabilir miyim?

Başlangıç olarak kullanabilirsiniz, ancak gerçek görsel ve sayfayla karşılaştırın. Tahminleri, gereksiz ayrıntıları ve tekrarları çıkarın. Üretilen metin, görünmeyen bir özelliği anlatırken bile emin görünebilir.

Sıkıştırma alternatif metni siler mi?

Metin web sayfasındadır, görsel dosyasında değil. Yerel JPG veya PNG'yi sıkıştırmak sayfayı değiştirmez. Ancak editörde görseli değiştirmek alanları değiştirebilir veya sıfırlayabilir. Sonrasında yayımlanan açıklamayı kontrol edin.

Daha iyi dosya adları arama trafiğini garanti eder mi?

Hayır. Açık adlar ve faydalı açıklamalar iyi hazırlanmış sayfayı destekler; dizine eklenme, sıralama veya tıklama garantilemez. Google çevre metnini, tarayıcılarının erişimini ve yüklemeyi de ele alır. Görsel performansı kılavuzumuz çalışmanın bu ayrı bölümünü açıklar.

Yapay zekâyla özetleChatGPT (yeni sekmede açılır)Grok (yeni sekmede açılır)Google (yeni sekmede açılır)Perplexity (yeni sekmede açılır)Claude (yeni sekmede açılır)