Görsel Optimizasyonunun Çifte Amacı

Bir web sayfasındaki her görsel bir fırsat ya da bir yüktür. Optimize edilmiş bir görsel sayfa yükleme hızını artırır (bir sıralama faktörü), görsel arama görünürlüğüne katkıda bulunur, ekran okuyucu kullanıcılarına bilgi iletir ve ölçülen bağlantılardaki kullanıcılar için bant genişliğini azaltır.

İyi haber şu ki, görseller için erişilebilirlik optimizasyonu ve SEO optimizasyonu pratikte neredeyse aynıdır. Her ikisi de açıklayıcı alternatif metin, mantıklı dosya adları, uygun dosya biçimleri ve doğru HTML işaretlemesi gerektirir.

Etkili Alt Metni Yazmak

Alt metni (img öğeleri üzerindeki alt niteliği) aynı anda üç amaca hizmet eder: ekran okuyucular tarafından sesli okunur, arama motorları tarafından indekslenir ve görsel yüklenemediğinde görüntülenir. Aynı metin üç kitleye de iyi hizmet etmek zorundadır.

Görselin tam olarak nasıl göründüğünü değil, ilettiği bilgiyi açıklayın.
Alt metni 150 karakterin altında tutun. Karmaşık görseller için bitişik metinde veya aria-describedby aracılığıyla uzun bir açıklama sağlayın.
"Görsel" veya "fotoğraf" ile başlamayın — ekran okuyucular öğe türünü zaten duyurur.
İşlevsel görseller için alt metin görünüşü değil işlevi açıklamalıdır.
Dekoratif görseller için alt="" kullanın, alt niteliğini hiç atlamayın.

Dosya Adları ve URL Yapısı

Google görsel dosya adlarını indeksler ve bunları alaka düzeyi sinyali olarak kullanır. DSC_0042.jpg adlı bir görsel hiçbir şey katmaz; wcag-klavye-gezinme-testi.jpg adlı bir görsel konu alaka düzeyi ekler. Yüklemeden önce görselleri içeriği ve hedef anahtar kelimeyi yansıtan açıklayıcı, tire ile ayrılmış slug'lara yeniden adlandırın.

Modern Görsel Biçimleri ve Performans

Görsel biçim seçimi doğrudan Temel Web Vitals'ı (LCP) etkiler. WebP görselleri eşdeğer JPEG/PNG dosyalarından %25–35 daha küçüktür. AVIF, JPEG'den %50 daha küçüktür. Daha küçük dosyalar daha hızlı yüklenir ve LCP puanlarını iyileştirir.

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img
    src="/images/hero.jpg"
    alt="Erişilebilirlik denetim panosunda %98 uyumluluk puanı"
    width="1200"
    height="630"
    loading="eager"
    decoding="async"
  >
</picture>

Srcset ile Duyarlı Görseller

srcset ve sizes nitelikleri, tarayıcıların her cihaz için uygun boyutlarda görseller sunmasına olanak tanır. Bu, 375 piksel genişliğindeki bir mobil ekrana 2400 piksel genişliğinde görsel göndermekten kaçınır.

Geç Yükleme ve CLS Önleme

Görünümün altındaki tüm görsellerde loading="lazy" kullanarak yüklemelerini kullanıcı kaydırana kadar erteleyin. Ancak, görünümün üstündeki görsellerde — özellikle LCP görselinde — hiçbir zaman geç yükleme kullanmayın. Her zaman <img> öğelerinde açık genişlik ve yükseklik nitelikleri belirtin.

SVG'ler: Erişilebilir ve SEO Dostu Grafikler

Satır içi SVG'ler arama motorları tarafından tam olarak indekslenebilir ve bir başlık öğesiyle aria-labelledby kullanılarak tam erişilebilir hale getirilebilir. Simgeler ve dekoratif SVG'ler için ekran okuyucular tarafından duyurulmasını engellemek amacıyla aria-hidden="true" kullanın.

<!-- Erişilebilir bilgi veren SVG -->
<svg role="img" aria-labelledby="svg-baslik" viewBox="0 0 400 200">
  <title id="svg-baslik">Sektöre Göre WCAG Uyumluluğu</title>
  <!-- grafik yolları -->
</svg>

SEO ve Erişilebilirlik için Görsel Optimizasyonu