Görsel SEO: alt Metni, Dosya Adı ve Boyutlandırma
Görsel SEO: alt Metni, Dosya Adı ve Boyutlandırma, SEO alanında sıkça karşılaşılan ve doğru uygulandığında fark yaratan konulardan biri. Bu yazı konuyu 5 temel noktada ele alıyor, çalışan bir HTML örneği üzerinden ilerliyor, sonunda da uygulamada nelere dikkat edilmesi gerektiğini…
İçindekiler
Görsel SEO: alt Metni, Dosya Adı ve Boyutlandırma, SEO alanında sıkça karşılaşılan ve doğru uygulandığında fark yaratan konulardan biri. Bu yazı konuyu 5 temel noktada ele alıyor, çalışan bir HTML örneği üzerinden ilerliyor, sonunda da uygulamada nelere dikkat edilmesi gerektiğini özetliyor.
Görsel SEO: alt Metni, Dosya Adı ve Boyutlandırma nedir, neden önemlidir?
Google Görseller birçok site için gözden kaçan önemli bir trafik kaynağıdır. Arama motorları görselin içeriğini çevresindeki metinden, dosya adından ve alt metninden anlar; doğru boyutlandırılmış ve modern biçimde sunulan görseller ise sayfa hızını ve dolayısıyla sıralamayı iyileştirir.
Kritik noktalar
- Açıklayıcı alt metni: Görseli göremeyen birine anlatır gibi yazın; anahtar kelime doldurmak yerine görselde ne olduğunu söyleyin.
- Anlamlı dosya adı: IMG_4512.jpg yerine kablosuz-mouse-siyah.jpg gibi tireyle ayrılmış, içeriği anlatan adlar kullanın.
- width ve height: Boyutları belirtmek, görsel yüklenirken sayfanın kaymasını (CLS) önler.
- Modern biçimler: AVIF ve WebP, JPEG'e göre çok daha küçük dosyalar üretir; picture etiketiyle eski tarayıcılara JPEG sunulur.
- İlk görseli geciktirmeyin: Sayfanın en üstündeki ana görselde loading="lazy" kullanmayın; en büyük içerik çizim süresini (LCP) uzatır.
Uygulamalı örnek
Teoriyi somutlaştırmak için kısa bir HTML örneğine bakalım:
<picture>
<source type="image/avif" srcset="/img/kablosuz-mouse-siyah-800.avif 800w, /img/kablosuz-mouse-siyah-1600.avif 1600w">
<source type="image/webp" srcset="/img/kablosuz-mouse-siyah-800.webp 800w, /img/kablosuz-mouse-siyah-1600.webp 1600w">
<img src="/img/kablosuz-mouse-siyah-800.jpg"
sizes="(min-width: 1024px) 50vw, 100vw"
width="800" height="600"
alt="Siyah kablosuz mouse, yandan görünüm, USB alıcısıyla birlikte"
loading="lazy" decoding="async">
</picture>Örneği kendi projenize uyarlarken değişken adlarını ve yapılandırma değerlerini ortamınıza göre değiştirmeyi unutmayın.
header, main, article ve footer gibi anlamsal etiketler erişilebilirliği ve SEO'yu birlikte iyileştirir.
Neden önemli? Kazanımlar
Görsel SEO: alt Metni, Dosya Adı ve Boyutlandırma konusunu doğru uygulamanın başlıca kazanımları şunlar:
- Arama motorlarının sayfayı doğru anlamasını kolaylaştırır
- Organik trafiği uzun vadede artırır
- Kullanıcı deneyimini ve sayfada kalma süresini iyileştirir
Son söz
Bu yazı boyunca Görsel SEO: alt Metni, Dosya Adı ve Boyutlandırma konusunun temel taşlarını ve uygulamada dikkat edilmesi gerekenleri gördük. Özellikle Açıklayıcı alt metni ve İlk görseli geciktirmeyin başlıklarını uygulamaya geçirmek iyi bir başlangıç olur.
İlgili içerikler:
- Schema.org JSON-LD ile Google'da Zengin Sonuç Alma
- Core Web Vitals: LCP, INP ve CLS'yi İyileştirme
- Canonical Etiketi ve Yinelenen İçerik Sorunu
Daha fazla uygulamalı içerik için Akademi derslerine ve blog yazılarına göz atabilirsiniz.
Yazar
Ferdi Giden @adminPHP, MySQL ve Tailwind ile kurumsal yazılımlar geliştiriyor; FerdiSoft çatısı altında ERP, WMS ve SaaS çözümleri üretiyor.