Kısaca: Görsel SEO, sitenizdeki fotoğraf ve grafiklerin hem arama motorlarınca anlaşılmasını hem de sayfa hızını düşürmeden yüklenmesini sağlayan çalışmaların bütünüdür. Temel adımlar; açıklayıcı alt metin yazmak, anlamlı dosya adı vermek, görselleri doğru boyutta ve WebP gibi modern formatlarda sunmak ve ekran dışındaki görselleri geç yüklemektir.
Görsel SEO, web sitenizdeki fotoğraf, ürün görseli ve grafiklerin arama motorları tarafından doğru anlaşılmasını ve sayfayı yavaşlatmadan yüklenmesini sağlayan teknik ve içerik çalışmalarının toplamıdır. En önemli adımlar; görseli tarif eden bir alt metin yazmak, dosyaya anlamlı bir ad vermek, görseli gösterileceği boyuta uygun ölçüde ve modern bir formatta sunmak, ekranın dışında kalan görselleri ise geç yüklemektir. Bu rehberde her adımı, işletmelerin sitelerinde sık gördüğümüz hatalarla birlikte anlatıyoruz.
Görsel SEO neden önemli?
Görseller çoğu sitede sayfa ağırlığının en büyük kısmını oluşturur. Optimize edilmemiş birkaç büyük fotoğraf, sayfanın mobilde saniyelerce geç açılmasına yol açabilir. Bu durum hem ziyaretçinin siteden ayrılma ihtimalini artırır hem de Google'ın sayfa deneyimi değerlendirmesinde kullanılan ölçümleri olumsuz etkiler. Sayfa hızının önemini web sitesi hızı ve Core Web Vitals yazımızda ayrıntılı anlattık.
Öte yandan görseller ek bir trafik kaynağıdır. Ürün, mekân, yemek, mimari proje ya da takı gibi görsel ağırlıklı aramalarda Google Görseller sekmesinden gelen ziyaretçiler, doğrudan satın alma niyetine yakın olabilir. Görselin doğru tanımlanması bu aramalarda görünür olmanın ön koşuludur.
Alt metin (alt etiketi) nasıl yazılır?
Alt metin, görsel yüklenemediğinde ya da ekran okuyucu kullanan bir ziyaretçi sayfayı dinlediğinde görselin yerine geçen kısa açıklamadır. Arama motorları da görselin ne anlattığını anlamak için bu metinden yararlanır. İyi bir alt metin:
- Görselde ne olduğunu açık ve kısa biçimde anlatır.
- Gerekiyorsa bağlamı ekler: “Levent ofisimizde toplantı odası” gibi.
- Anahtar kelimeyi yalnızca doğal olduğunda içerir.
- “Resim”, “görsel”, “fotoğraf” gibi gereksiz kelimelerle başlamaz.
| Zayıf alt metin | Daha iyi alt metin |
|---|---|
| resim1 | Beyaz zemin üzerinde 14 ayar altın halka küpe |
| web tasarım istanbul web tasarım ajans | Mobil ve masaüstü ekranda açılmış kurumsal web sitesi tasarımı |
| ofis | Kuaför salonunun aynalı çalışma alanı ve bekleme koltukları |
İkinci satırdaki gibi anahtar kelime doldurulmuş alt metinler hem kullanıcıya hiçbir şey anlatmaz hem de spam olarak değerlendirilme riski taşır.
Dosya adı ve klasör yapısı
Görselin dosya adı da arama motorlarına küçük ama anlamlı bir ipucu verir. “IMG_4821.jpg” yerine “kadikoy-kafe-kahvalti-tabagi.webp” gibi kısa, Türkçe karakter içermeyen ve kelimeleri tire ile ayıran bir ad kullanmak iyi bir alışkanlıktır. Görselleri mantıklı klasörlerde tutmak (ör. /img/urunler/, /img/projeler/) site yönetimini de kolaylaştırır.
Doğru boyut ve format seçimi
Telefon kamerasıyla çekilmiş 4000 piksel genişliğindeki bir fotoğrafı, sayfada 800 piksel genişliğinde göstermek gereksiz veri yükü demektir. Görselleri gösterilecekleri alana yakın ölçülere küçültmek ve sıkıştırmak ilk adımdır.
- WebP: JPEG ve PNG'ye göre genellikle daha küçük dosya boyutunda benzer kalite sunar; güncel tarayıcıların büyük çoğunluğu destekler.
- AVIF: Daha yeni bir formattır, sıkıştırma başarısı yüksektir; destek giderek yaygınlaşmaktadır.
- SVG: Logo ve ikon gibi vektörel çizimler için idealdir; her ekranda net görünür.
- PNG: Şeffaf arka plan gereken ve az renk içeren görsellerde kullanılabilir.
Farklı ekranlara farklı boyutta görsel sunmak için srcset özelliği kullanılır. Böylece telefon küçük, geniş ekranlı bilgisayar büyük görseli indirir.
Lazy loading ve ilk ekran görseli
Lazy loading (geç yükleme), ekranın dışında kalan görsellerin kullanıcı sayfayı kaydırana kadar indirilmemesini sağlar. HTML'de loading="lazy" özelliği ile kolayca uygulanır. Ancak sayfanın en üstündeki ana görsel, yani ilk ekranda görünen büyük fotoğraf, geç yüklenmemelidir. Bu görsel sayfanın en büyük içerik öğesi olduğunda geç yüklemek, açılış süresini uzatır. İlk ekran görselinde öncelikli yükleme, diğerlerinde geç yükleme en dengeli yaklaşımdır.
Görsel boyutlarını belirtmek ve kayma sorununu önlemek
Görsel etiketinde genişlik ve yükseklik değerlerinin belirtilmemesi, sayfa yüklenirken içeriğin aşağı yukarı kaymasına yol açar. Ziyaretçi bir bağlantıya tıklamak üzereyken içeriğin kayması hem rahatsız edicidir hem de düzen kayması ölçümünü olumsuz etkiler. Her görsele width ve height değerlerini eklemek ya da CSS ile en-boy oranı tanımlamak bu sorunu çözer.
Görsel çevresindeki metin ve yapısal veri
Arama motorları görseli yalnızca alt metinle değil, çevresindeki başlık, açıklama ve paragraf metinleriyle birlikte yorumlar. Ürün görselinin hemen altında ürün adı ve kısa açıklama bulunması, görselin bağlamını güçlendirir. Ürün, tarif ya da makale sayfalarında görsel bilgisini yapısal veriye eklemek de zengin sonuçlarda görselin gösterilmesine katkı sağlayabilir. Bu konuyu yapısal veri (schema) nedir yazımızda anlattık.
Sitenizin görselleri site haritasında da yer alabilir. Özellikle çok sayıda ürün görseli bulunan e-ticaret sitelerinde bu, görsellerin keşfedilmesini kolaylaştırır. Site haritası hakkında bilgi için XML site haritası rehberimize göz atabilirsiniz.
Görsel SEO kontrol listesi
- Her içerik görselinde açıklayıcı bir alt metin var mı?
- Dosya adları anlamlı ve Türkçe karaktersiz mi?
- Görseller gösterildikleri boyuta yakın ölçüde ve sıkıştırılmış mı?
- WebP ya da AVIF gibi modern formatlar kullanılıyor mu?
- İlk ekran görseli hariç diğerlerinde lazy loading açık mı?
- Görsellerin genişlik ve yükseklik değerleri tanımlı mı?
- Görseller, içeriği tekrar eden stok fotoğraflar yerine mümkün olduğunca özgün mü?
E-ticaret ve katalog sitelerinde görsel SEO
Ürün sayısı yüksek sitelerde görsel SEO, tek tek yapılan bir iş olmaktan çıkıp bir süreç haline gelmelidir. Yüzlerce ürün görseli yüklenirken her birine elle alt metin yazmak zaman alır; bu nedenle yönetim panelinde ürün adı, rengi ve malzemesi gibi bilgilerden otomatik alt metin üreten bir yapı kurmak verimli bir çözümdür. Otomatik metnin ardından öne çıkan ürünlerde açıklamayı elle zenginleştirmek, hem hız hem kalite sağlar.
Ürün fotoğraflarında birden fazla açı kullanılıyorsa her görselin alt metni farklı olmalıdır: “ön görünüm”, “yan profil”, “kutu içeriği” gibi küçük eklemeler görsellerin birbirinin kopyası gibi algılanmasını önler. Aynı görselin farklı ürün sayfalarında tekrar tekrar kullanılması ise hem kullanıcı deneyimini hem de arama motorunun sayfaları ayırt etmesini zorlaştırır.
Görsellerin yüklendiği sunucunun yanıt süresi de önemlidir. Çok sayıda görsel barındıran sitelerde içerik dağıtım ağı (CDN) kullanmak, görsellerin ziyaretçiye en yakın noktadan sunulmasını sağlayarak açılış süresini kısaltır. Sunucu tercihleri hakkında hosting türleri yazımız fikir verebilir.
Son olarak, görsel optimizasyonunun bir kerelik bir iş olmadığını hatırlatmak gerekir. Sitenize yeni içerik eklendikçe aynı kuralların uygulanıp uygulanmadığını düzenli aralıklarla kontrol etmek, birkaç ay içinde biriken ağır görsellerin hızı yeniden düşürmesini engeller.
Kodifix ile görsel ve teknik SEO
Kodifix olarak 2010'dan beri İstanbul'daki işletmelerin sitelerinde görsel optimizasyonu, sayfa hızı ve teknik SEO çalışmaları yürütüyoruz. Arama sonuçlarındaki konum rekabete ve pek çok etkene bağlı olduğundan kesin sıralama vaadi vermiyor, ölçülebilir ve şeffaf bir iyileştirme planı sunuyoruz. Ayrıntılar için SEO danışmanlığı sayfamızı inceleyebilirsiniz.
Sık Sorulan Sorular
Alt metin kaç karakter olmalı?
Kesin bir sınır yoktur, ancak görseli bir iki cümleyle anlatan, genellikle 125 karakteri geçmeyen açıklamalar ekran okuyucular için de pratiktir.
Her görsele alt metin yazmak gerekir mi?
İçerik taşıyan görsellere evet. Yalnızca süsleme amaçlı dekoratif görsellerde boş alt özelliği kullanmak erişilebilirlik açısından daha doğrudur.
WebP formatı tüm tarayıcılarda çalışır mı?
Güncel tarayıcıların büyük çoğunluğu WebP'yi destekler. Eski tarayıcılar için picture etiketiyle JPEG yedeği sunmak mümkündür.
Görsel SEO yapay zekâ aramalarını etkiler mi?
Açıklayıcı alt metin ve görselin çevresindeki metin, içeriğin anlaşılmasına katkı sağlar. Bu da hem Google Görseller'de hem de içeriği özetleyen arama deneyimlerinde sayfanızın daha doğru yorumlanmasına yardımcı olur.
İstanbul’da projeniz için bize ulaşın: Levent’teki ofisimizde ya da online görüşmeyle ihtiyacınızı dinleyip size özel bir yol haritası hazırlayalım. İletişim sayfamızdan ya da +90 507 374 61 41 numaralı telefondan bize ulaşabilirsiniz.