SEO İçin Görsel Optimizasyonu: Alt Text, Boyut ve Format Rehberi

Görseller, web sayfalarının vazgeçilmez öğeleridir. Kullanıcı deneyimini zenginleştirir, içeriği destekler ve doğru optimize edildiğinde önemli bir organik trafik kaynağı haline gelir. Google Görsel Arama, dünya genelindeki tüm aramaların önemli bir bölümünü oluşturur. Ancak arama motorları görselleri insanlar gibi "göremez"; bunun yerine alt text, dosya adı, çevredeki metin ve teknik metadata gibi sinyallere dayanır. Bu rehberde, görsellerinizi hem arama motorları hem de kullanıcılar için optimize etmenin tüm yönlerini kapsamlı bir şekilde ele alıyoruz.

Alt Text (Alternatif Metin) Nedir ve Neden Önemlidir?

Alt text, bir görselin HTML kodunda tanımlanan ve görselin içeriğini metin olarak açıklayan özelliktir. Üç temel işlevi vardır: Birincisi, görsel yüklenemediğinde kullanıcıya görselin ne olduğunu açıklar. İkincisi, ekran okuyucu kullanan görme engelli kullanıcıların görseli anlamasını sağlar (erişilebilirlik). Üçüncüsü, arama motorlarına görselin içeriği hakkında bilgi verir.

Etkili Alt Text Yazma Kuralları

İyi bir alt text, görseli görmeden anlayabileceğiniz kadar açıklayıcı, ancak gereksiz detaylarla şişirilmemiş olmalıdır. İşte temel kurallar:

• Açıklayıcı ve spesifik olun: "Köpek" yerine "parkta oynayan golden retriever yavrusu" yazın. Görsel ne gösteriyorsa, onu net bir şekilde tanımlayın.
• Anahtar kelimeyi doğal şekilde dahil edin: Hedef anahtar kelimenizi zorlamadan, anlamlı bir cümle içinde kullanın. "SEO analiz aracı" hedefliyorsanız, "SEO analiz aracı Screaming Frog'un kontrol paneli ekran görüntüsü" uygun bir alt text'tir.
• Keyword stuffing yapmayın: "SEO, SEO optimizasyonu, SEO aracı, en iyi SEO" gibi anahtar kelime yığınları spam olarak değerlendirilir ve ceza almanıza neden olabilir.
• 125 karakterin altında tutun: Ekran okuyucular genellikle 125 karakter civarında alt text'i keser. Kısa ve öz tutmak hem erişilebilirlik hem de SEO açısından önemlidir.
• "Resim", "görsel", "fotoğraf" gibi kelimelerle başlamayın: Tarayıcılar ve ekran okuyucular zaten bunun bir görsel olduğunu bilir. Doğrudan içeriği tanımlayın.
• Dekoratif görsellerde alt text boş bırakın: Arka plan desenleri, ayırıcı çizgiler gibi dekoratif görseller için alt="" kullanın. Ekran okuyucular bu görselleri atlayacaktır.

Alt Text Örnekleri

Kötü örnekler ve iyi alternatifleri karşılaştıralım:

• Kötü: alt="görsel" — Hiçbir bilgi vermiyor.
• Kötü: alt="istanbul restoran yemek kafe en iyi lezzetli" — Keyword stuffing.
• İyi: alt="İstanbul Kadıköy'de deniz manzaralı balık restoranının dış mekan terası" — Açıklayıcı, spesifik, doğal.
• Kötü: alt="grafik" — Anlamsız.
• İyi: alt="2025 yılında Türkiye'deki mobil internet kullanım oranını gösteren çubuk grafik" — Grafiğin ne anlattığını belirtiyor.

Dosya Adlandırma Stratejisi

Görsel dosya adları, arama motorlarının görseli anlamasına yardımcı olan önemli bir sinyaldir. Kameranızdan gelen "IMG_20250315_143022.jpg" gibi dosya adları hiçbir SEO değeri taşımaz.

Dosya Adlandırma Kuralları

• Açıklayıcı isimler kullanın: "mavi-kadin-kosu-ayakkabisi.webp" şeklinde görseli tanımlayan isimler verin.
• Kelimeleri tire (-) ile ayırın: Google, tireleri kelime ayırıcı olarak tanır. Alt çizgi (_) kullanmayın çünkü Google bunu kelime birleştirici olarak algılar.
• Küçük harf kullanın: Sunucu yapılandırmasına bağlı olarak büyük/küçük harf sorunları yaşanabilir. Her zaman küçük harf tercih edin.
• Türkçe karakter kullanmayın: ş, ç, ö, ü, ğ, ı gibi karakterler yerine ASCII karşılıklarını kullanın. "gorsel-optimizasyonu" şeklinde yazın.
• Gereksiz kelimelerden kaçının: "bir", "ve", "ile" gibi bağlaçları dosya adına eklemeyin.

Görsel Sıkıştırma ve Dosya Boyutu

HTTP Archive verilerine göre, ortalama bir web sayfasındaki görsellerin toplam boyutu yaklaşık 1 MB'tır. Bu, sayfa hızını doğrudan etkileyen en büyük faktörlerden biridir. Doğru sıkıştırma ile görsel kalitesinden minimum ödün vererek dosya boyutunu %60-80 oranında azaltabilirsiniz.

Kayıplı ve Kayıpsız Sıkıştırma

• Kayıpsız sıkıştırma (Lossless): Görsel kalitesinde hiçbir kayıp olmadan dosya boyutunu azaltır. PNG görseller için OptiPNG veya PNGQuant araçları kullanılabilir. Genellikle %10-30 boyut azalması sağlar.
• Kayıplı sıkıştırma (Lossy): Kalitede gözle görülmeyecek düzeyde kayıp yaratarak çok daha büyük boyut azalması sağlar. JPEG için kalite değerini %75-85 arasında tutmak, çoğu durumda yeterli kaliteyi korurken %50-70 boyut azalması sağlar. MozJPEG ve jpegoptim popüler araçlardır.

Önerilen Sıkıştırma Araçları

• Squoosh (squoosh.app): Google'ın geliştirdiği, tarayıcı tabanlı ücretsiz araç. Farklı formatları karşılaştırmalı olarak önizleyebilirsiniz.
• TinyPNG/TinyJPG: Toplu sıkıştırma için popüler bir araç. API desteği ile otomasyona entegre edilebilir.
• Sharp (Node.js): Programatik görsel işleme için en hızlı Node.js kütüphanesi. Next.js'in built-in görsel optimizasyonu da Sharp kullanır.
• ImageOptim (macOS): Masaüstü uygulaması olarak toplu sıkıştırma imkanı sunar.

Modern Görsel Formatları: WebP ve AVIF

WebP

Google tarafından geliştirilen WebP formatı, hem kayıplı hem de kayıpsız sıkıştırmayı destekler. JPEG'e göre %25-35 daha küçük dosya boyutu sunar. Şeffaflık (alpha channel) desteği vardır, bu da PNG'nin yerini alabilmesini sağlar. Animasyon desteği ile GIF'e alternatif olarak da kullanılabilir. 2024 itibarıyla tarayıcı desteği %97'nin üzerindedir.

AVIF

AV1 video kodekinden türetilen AVIF, WebP'den bile %20 daha verimli sıkıştırma sunar. Özellikle düşük bitrate'lerde üstün kalite sağlar. Ancak encode süresi WebP'ye göre daha uzundur ve tarayıcı desteği henüz %92 civarındadır. Yavaş yavaş benimsenmektedir ancak fallback stratejisi gereklidir.

Format Seçim Stratejisi

HTML'de picture etiketi kullanarak tarayıcının desteklediği en verimli formatı sunabilirsiniz. Önce AVIF, sonra WebP, en son JPEG/PNG sırasıyla fallback tanımlayın. Bu sayede modern tarayıcılar AVIF kullanırken, eski tarayıcılar JPEG ile çalışmaya devam eder. Build sürecinde otomatik format dönüştürme yapan araçlar (Sharp, Imagemin) kullanarak her görselin birden fazla formatını oluşturabilirsiniz.

Lazy Loading (Tembel Yükleme)

Lazy loading, ekranın dışında kalan görsellerin yüklenmesini, kullanıcı o bölgeye kaydırana kadar erteleyen bir tekniktir. Bu sayede ilk sayfa yüklenme süresi önemli ölçüde kısalır.

Native Lazy Loading

Modern tarayıcılar, loading="lazy" HTML özelliğini destekler. JavaScript gerektirmez ve en basit uygulama yöntemidir. Tarayıcı, görselin viewport'a ne kadar yakın olduğunu otomatik olarak hesaplar ve uygun zamanda yüklemeye başlar.

Dikkat Edilmesi Gerekenler

• Above-the-fold görsellerde kullanmayın: Sayfanın üst kısmında görünen görseller (hero banner, logo, ilk ürün görseli) hemen yüklenmelidir. Bu görsellere loading="eager" ekleyin veya loading özelliğini kullanmayın.
• LCP öğesinde kullanmayın: Sayfadaki en büyük içerik öğesi bir görsel ise, bu görsele lazy loading uygulamak LCP skorunuzu olumsuz etkiler.
• Placeholder kullanın: Lazy loading uygulanan görseller için düşük çözünürlüklü bir blur placeholder veya düz renkli bir alan koyun. Bu hem CLS'yi önler hem de kullanıcıya görselin yükleneceğine dair görsel ipucu verir.
• fetchpriority="high" kullanın: LCP görseli için fetchpriority="high" özelliğini ekleyerek tarayıcıya bu görselin öncelikli olarak yüklenmesi gerektiğini bildirin.

Responsive Görseller

Farklı cihazlar için farklı boyutlarda görsel sunmak hem performans hem de kullanıcı deneyimi açısından kritiktir. srcset ve sizes özellikleri ile tarayıcıya farklı çözünürlükler sunabilirsiniz. Böylece mobil cihaz 400 piksellik görseli indirirken, masaüstü 1200 piksellik görseli indirir.

Standart bir yaklaşım olarak görselleri 400px, 800px, 1200px ve 1600px genişliklerinde oluşturmanız çoğu kullanım senaryosu için yeterlidir. Next.js Image bileşeni bu süreci otomatik olarak yönetir ve doğru boyuttaki görseli sunar.

Görsel Sitemap ve Structured Data

Görsel Sitemap

XML sitemap'inize görsel bilgileri ekleyerek Google'ın görsellerinizi keşfetmesini kolaylaştırabilirsiniz. Her URL için görsel konumu, başlık ve açıklama bilgilerini ekleyebilirsiniz. Özellikle JavaScript ile yüklenen görseller için sitemap çok önemlidir, çünkü Googlebot JavaScript rendering'i her zaman mükemmel yapamayabilir.

Structured Data (Yapısal Veri)

Ürün görselleri için Product schema'sı, tarif görselleri için Recipe schema'sı, haber görselleri için NewsArticle schema'sı kullanarak görselerinizin zengin sonuçlarda (rich results) görünme şansını artırabilirsiniz. Schema.org'un ImageObject tipi ile görsellerin lisans bilgilerini de belirtebilirsiniz.

Google Görsel Arama Optimizasyonu İpuçları

• Özgün görseller kullanın: Stok fotoğraflar yerine özgün görseller, Google Görsel'de daha iyi sıralanır. Aynı stok fotoğrafı yüzlerce site kullanır ve Google bunu bilir.
• Görseli ilgili içerikle çevreleyin: Görselin üst ve altındaki metin, Google'ın görselin bağlamını anlamasına yardımcı olur. Görseli ilgili paragrafın yanına yerleştirin.
• Yüksek kaliteli görseller tercih edin: Bulanık veya düşük çözünürlüklü görseller hem kullanıcı deneyimini olumsuz etkiler hem de Google'ın görsel arama sonuçlarında daha düşük sıralanır.
• Görselleri sayfanın üst kısmına yerleştirin: Önemli görsellerin sayfanın üst bölümünde yer alması, hem kullanıcılar hem de arama motorları tarafından daha hızlı fark edilmesini sağlar.
• Open Graph ve Twitter Card etiketleri: Sosyal medya paylaşımları için og:image ve twitter:image meta etiketlerini tanımlayın. Önerilen boyut en az 1200x630 pikseldir.

Yaygın Hatalar ve Çözümleri

• CSS ile gizlenen görseller: display:none ile gizlenen görseller hala indirilir ve bant genişliği harcar. Bunun yerine picture etiketiyle media query kullanın.
• Boyutu belirtilmeyen görseller: Width ve height belirtilmezse tarayıcı görselin boyutunu bilemez ve CLS sorununa neden olur. Her zaman boyut belirtin veya CSS aspect-ratio kullanın.
• Aşırı büyük görseller: 5000x3000 piksellik bir görseli 300 piksel genişlikte göstermek büyük bir israftır. Görseli gösterim boyutuna uygun şekilde yeniden boyutlandırın.
• Eksik alt text: Tüm anlamlı görsellerin alt text'i olmalıdır. Chrome DevTools'un Accessibility paneli ile eksik alt text'leri tespit edebilirsiniz.

Sonuç

Görsel optimizasyonu, SEO'nun sıklıkla gözden kaçan ancak büyük potansiyel taşıyan bir alanıdır. Doğru alt text yazımı, akıllı dosya adlandırma, modern format kullanımı, etkili sıkıştırma ve lazy loading uygulamasıyla hem sayfa hızınızı hem de Google Görsel Arama'daki görünürlüğünüzü artırabilirsiniz. Her yeni görsel eklediğinizde bu kontrol listesini uygulamayı alışkanlık haline getirin: doğru format, uygun boyut, açıklayıcı alt text ve anlamlı dosya adı. Bu basit adımlar, zamanla önemli bir organik trafik artışı sağlayacaktır.