Teknik SEO

Görsel SEO Nasıl Yapılır?

Görsel SEO, bir fotoğrafın dosya adını değiştirmekten ibaret değildir. Okurun sorusunu yanıtlayan görseli seçmek, içeriğin yakınında açıklamak, erişilebilir bir alternatif metin yazmak ve görüntüyü hızlı açılacak biçimde sunmak aynı işin parçalarıdır. Google görselin konusunu sayfadaki metin, alt metin ve görsel verileriyle birlikte anlamaya çalışır. Bu nedenle tek bir ayarla sıralama garantisi veren vaatlere temkinli yaklaşmak gerekir.

Bu rehberde bir WordPress yazısını yayımlamadan önce uygulanabilecek görsel seçimi, alt metin, format, boyut, hız ve indekslenebilirlik kontrollerini örneklerle ele alacağız. Teknik terimleri gerektiği yerde açıklayıp her adımın okura ne kazandırdığını göstereceğiz. Hedef, yalnızca Google Görseller’de görünmek değil; yazının daha anlaşılır, erişilebilir ve kullanışlı olmasıdır.

Görsel SEO neyi kapsar?

Bir görselin arama sonuçlarında keşfedilebilmesi için önce tarayıcının ve arama motorunun ona ulaşabilmesi gerekir. Ardından hangi konuyla ilişkili olduğunu anlamaları gerekir. Görselin bulunduğu sayfa erişime kapalıysa, dosya URL’si bozuksa veya görsel yalnızca CSS arka planı olarak verilmişse keşif zorlaşabilir. İlgili sayfa metni, açıklayıcı dosya adı ve bağlama uygun alt metin bu ikinci aşamayı destekler.

Üçüncü boyut deneyimdir. Çok büyük bir dosya mobil bağlantıda geç açılabilir; ölçüleri belirtilmeyen resim yüklenirken sayfa içeriği yer değiştirebilir. Yazının başındaki büyük kapak resmi geç görünürse okur bekler. Dolayısıyla görsel SEO, içerik kalitesi, erişilebilirlik ve sayfa performansının kesişimindedir. Her yazıya zorla görsel eklemek yerine okuyucunun anlamasını kolaylaştıran görseli kullanın.

1. Önce ilgili ve güvenilir görseli seçin

Bir makaledeki görselin ilk görevi konuyu açıklamaktır. “Yalıtım malzemesi nasıl seçilir?” yazısında uygulama katmanlarını gösteren bir fotoğraf, rastgele bir bina stok görselinden daha faydalıdır. Bir yazılım rehberinde ise gerçek arayüzün güncel ekran görüntüsü, genel teknoloji çiziminden daha öğretici olabilir. Fotoğrafı kullanmadan önce yanlış teknik izlenim verip vermediğini kontrol edin.

Özgünlük yararlıdır; fakat sırf özgün diye bilgi taşımayan bir görsel kullanmayın. Çizim, şema veya yapay zekâ ile üretilmiş görsellerde özellikle etiketlerin, bağlantıların ve ölçülerin doğru olup olmadığına bakın. Makalede gösterilen bir işlemi gerçekten temsil etmeyen temsili illüstrasyonu adım adım ekran görüntüsü gibi sunmayın. Gerekirse alt yazıda “temsili görsel” olduğunu söyleyin. Kaynak ve kullanım hakkını da kayıt altına alın.

Görselin bulunduğu bölüm önemlidir. Arama motorları ve okurlar, resmin hemen öncesindeki başlık ve açıklamadan bağlam çıkarır. Bu yüzden bir alt metin örneğini anlattığınız paragrafın yanına alt metin seçimini gösteren görsel koymak, onu yazının sonunda ilgisiz bir galeride tutmaktan daha anlamlıdır.

Editör, makaleyle ilgisiz fotoğraf yerine kuşun doğal ortamını gösteren ilgili görseli seçiyor
İlgili görsel, yakınındaki metinle birlikte okurun konuyu anlamasına yardım eder; temsili illüstrasyon.

2. Alt metni görselin sayfadaki işlevine göre yazın

Alternatif metin, HTML’de alt niteliğinin değeridir. Görsel açılmadığında ve ekran okuyucu kullanıldığında içeriğin anlaşılmasına yardım eder. Google da alt metni görselin konusunu anlamak için kullandığı işaretlerden biri olarak açıklar. Ancak bu alan, anahtar kelimeleri virgülle dizmek için ayrılmış bir SEO kutusu değildir. Birine resmi telefonda tarif eder gibi, gerekli bilgiyi kısa ve doğal anlatın.

Örneğin bir “nehir kuşları” makalesinde yalnızca alt="kuş" yazmak çok genel kalır. alt="Yalıçapkını, nehir kenarındaki yosunlu dalda bekliyor" daha fazla bilgi verir. Buna karşılık alt="yalıçapkını kuş nehir doğa fotoğraf kuş türleri en iyi kuş" okur için yorucudur. İyi alt metin, görselin içeriğini ve sayfadaki nedenini yansıtır; aynı kelime dizisini bütün görsellere kopyalamaz.

Bir arayüz ekran görüntüsünde, yalnızca “ekran görüntüsü” yazmayın. Kullanıcının yapacağı işlemi tarif edin: “WordPress ortam kütüphanesinde alternatif metin alanı açık.” Düğme olarak çalışan bir görselde ise görünen nesneyi değil düğmenin işlevini belirtin: “Arama yap.” Karmaşık grafikte kısa alt metinle temel sonucu özetleyin, rakamların tamamını yakınındaki metin veya tabloda da verin.

Dekoratif görsellerde boş alt metin

Görsel sadece süsleme yapıyor ve metne yeni bilgi katmıyorsa alt="" doğru olabilir. W3C’nin erişilebilirlik rehberi, dekoratif görsellerin ekran okuyucuda gereksiz tekrar oluşturmaması için boş alt niteliğini önerir. Buradaki boş değer, alt niteliğinin hiç yazılmamasından farklıdır. Görsel bağlantı veya düğme ise dekoratif saymadan önce işlevini düşünün.

Sabit bir karakter sınırı ya da her alt metinde odak anahtar kelime kullanma zorunluluğu yoktur. Bir cümle çoğu zaman yeterlidir. Çok uzun açıklama gerekiyorsa kısa alt metin yazıp ayrıntıyı görünür metinde anlatın. Görselin üstünde önemli yazılar varsa o bilgiyi yalnızca piksel olarak bırakmayın; sayfanın metninde de bulunmasını sağlayın.

3. Dosya adı, başlık ve altyazıyı birbirine karıştırmayın

Dosya adını yüklemeden önce kısa ve açıklayıcı seçin: yalicapkini-nehir-kiyisi.webp gibi. IMG_3048.webp neyi gösterdiğini anlatmaz. Google dosya adını hafif bir bağlam ipucu olarak değerlendirir; tek başına güçlü bir sıralama kaldıracı olarak görmemek gerekir. Türkçe karakter içermeyen, küçük harfli ve kelimeleri kısa çizgiyle ayıran adlar URL yönetimini kolaylaştırır.

WordPress ortam kütüphanesindeki “Başlık”, “Alternatif metin” ve “Görsel altyazısı” ayrı alanlardır. Başlık dosyayı yönetirken bulmayı kolaylaştırabilir. Alt metin görselin işlevini açıklar. Altyazı ise görselin altında okura görünen bir bağlam veya kaynak bilgisi verir. Aynı cümleyi üç alana kopyalamak yerine her alanı amacı için kullanın. WordPress’te ortam kütüphanesi alt metni varsayılan olarak sunabilir; yazı içindeki görseli ayrıca kontrol edin.

4. Görseli doğru boyutta ve uygun formatta hazırlayın

Bir görüntünün piksel ölçüsü ile dosya boyutu farklı şeylerdir. 3000 piksel genişliğinde bir fotoğrafı içerikte 700 piksel göstermek, ziyaretçinin gereğinden büyük dosya indirmesine yol açabilir. Önce görselin sayfada hangi genişlikte kullanılacağını belirleyin; gerekli çözünürlüğü buna göre seçin. Yüksek yoğunluklu ekranlar için daha büyük bir kaynak gerekebilir, ama sonsuz büyüklük otomatik olarak kalite getirmez.

Fotoğraflarda JPEG, WebP veya AVIF; şeffaflık veya keskin çizimler için ihtiyaca göre PNG, WebP, AVIF ya da SVG düşünülebilir. Formatı yalnızca uzantısına bakarak seçmeyin: aynı örnek görseli birkaç ayarda dışa aktarın, gerçek cihazda ayrıntı kaybını karşılaştırın. WebP veya AVIF her resimde aynı ölçüde kazanç sağlamaz. SVG dosyalarını güvenilir kaynaktan alın ve güvenlik ile erişilebilirlik gereksinimlerini ayrıca değerlendirin.

“Tüm görseller 100 KB altında olmalı” gibi evrensel bir sınır yoktur. Geniş, detaylı bir fotoğrafla küçük ikonun ihtiyaçları farklıdır. Hedefiniz, okurun fark etmeyeceği görsel kayıplarla gereksiz veriyi azaltmak ve sayfadaki tüm görsellerin toplam maliyetini izlemektir. Bir illüstrasyonda keskin çizgiler bozuluyorsa birkaç kilobayt daha büyük dosya daha iyi bir seçim olabilir.

5. Mobil ekranlar için duyarlı görsel sunun

WordPress, yüklenen görsel için farklı boyutlar üretebilir ve temanın işaretlemesine göre srcset ile sizes değerleri ekleyebilir. Böylece tarayıcı ekranına uygun kaynağı seçer. Ancak otomatik sistemin çalıştığını varsaymak yerine canlı sayfada HTML’yi ve mobil görünümü kontrol edin. İçeriğe doğrudan yapıştırılmış bir URL, blokla eklenen görselin bütün özelliklerini otomatik olarak taşımayabilir.

HTML’de width ve height değerleri veya uygun bir en boy oranı, resim gelmeden önce ona yer ayrılmasına yardım eder. Bu, sayfanın kaymasını azaltabilir. CSS tarafında görselin genişliğini kapsayıcıya uydurup yüksekliğini otomatik bırakın; aksi halde mobilde taşma veya ezilme oluşabilir. En geniş masaüstü görünümü kadar dar telefon ekranını da test edin. Görsel üzerindeki yazı telefonda okunmuyorsa metni sayfaya taşıyın.

Büyük dağ fotoğrafı sıkıştırılarak bilgisayar ve telefon için uygun boyutlarda sunuluyor
Aynı görseli farklı ekranlara uygun ölçülerde ve makul dosya boyutuyla sunmak, mobil deneyimi iyileştirir; temsili illüstrasyon.

6. Hız: öncelikli görseli geç yüklemeyin

Sayfanın ilk ekranında görünen büyük resim, Largest Contentful Paint yani LCP ölçümünü etkileyebilir. Bu resme gelişigüzel loading="lazy" eklemek yüklemeyi geciktirebilir. Google’ın web performansı rehberleri LCP görselinin erken keşfedilmesini ve gerekirse uygun öncelik verilmesini önerir. Buna karşılık yazının çok aşağısındaki görsellerin geç yüklenmesi ilk açılıştaki veri yükünü azaltabilir.

Burada tek bir WordPress ayarını körlemesine açıp kapatmayın. Temanın kapak görselini nasıl işlediğini, sayfa önbelleğini ve gerçek LCP öğesini PageSpeed Insights veya tarayıcının performans araçlarıyla ölçün. Hero görsel zaten erken yükleniyorsa fazladan ön yükleme eklemek yarar sağlamayabilir. Her büyük görsele fetchpriority="high" vermek de öncelik kavramını etkisizleştirir. Önce sorunu ölçün, sonra ilgili öğeye müdahale edin.

Görsellerin toplam sayısı da önemlidir. Aynı bilgi için beş dekoratif resim yerine bir açıklayıcı şema tercih edebilirsiniz. Ancak kaliteyi yalnızca dosya boyutu uğruna düşürmeyin; bulanık ekran görüntüsü öğreticiliği azaltır. Sıkıştırmadan sonra masaüstü ve mobilde hem okunabilirliği hem de dosya boyutunu karşılaştırın.

7. Google’ın görseli bulabildiğini doğrulayın

Google, standart <img src="..."> işaretlemesindeki görselleri keşfedebilir. Yalnızca CSS arka planı olarak gösterilen bir görsel için aynı keşif yolunu beklemeyin. JavaScript ile sonradan yüklenen görsellerde de URL’nin render edilmiş HTML’de erişilebilir olmasına dikkat edin. Görsel dosyasını yeni sekmede açıp 200 yanıtı verip vermediğini ve giriş gerektirip gerektirmediğini kontrol edin.

Sayfanın kendisi noindex ise veya robots kuralları dosyaya erişimi engelliyorsa diğer optimizasyonlar sınırlı kalır. İçerik taşındığında eski görsel URL’lerinin kırılıp kırılmadığını kontrol edin. Bir CDN kullanıyorsanız ilgili alanın taranabilir olduğundan emin olun. Google Search Console’daki URL inceleme ve dizine ekleme raporları sayfa düzeyinde tanı koymak için yararlıdır; görselin arama sonucunda görünmesi için garanti vermezler.

Görsel site haritası şart mı?

Google, normal taramada bulunması güç görsel URL’leri için görsel site haritasının yardımcı olabileceğini belirtir. Her küçük WordPress sitesinin ayrı bir görsel site haritasına ihtiyacı olduğu anlamına gelmez. Önce görsellerin sayfa HTML’sinde bulunduğunu, sayfanın indekslenebilir olduğunu ve mevcut site haritasının doğru gönderildiğini kontrol edin. Site haritasının temel mantığını Google’a site haritası gönderme rehberinde anlattık.

Yapılandırılmış veri eklemeli miyim?

Yalnızca kullandığınız içerik türünün Google tarafından desteklenen şemasına gerçekten uygun özellikler varsa yapılandırılmış veri ekleyin. Her görsele genel bir “SEO şeması” yapıştırmak gerekmez. Lisans ve kredi bilgileri için Google’ın ayrı görsel meta veri yönergeleri vardır. Böyle bir işaretleme kullanıyorsanız sayfada görünen bilgilerle tutarlı olmalı ve doğrulanmalıdır. Arama sonuçlarında özel görünüm elde etmek garanti değildir.

8. Telif hakkı ve güveni kontrol edin

İnternette bulunabilen her resmi yayımlama hakkınız yoktur. Kendi çektiğiniz fotoğrafları, izin aldığınız kaynakları veya koşullarını okuyup uyduğunuz lisanslı materyalleri kullanın. Kaynak gösterme zorunluluğu olan bir görseli altyazıda ve gerekiyorsa lisans sayfasında açıkça belirtin. Yapay zekâ ile üretilen görsellerde gerçek kişiyi, markayı ya da ölçülmüş sonucu yanlış temsil etmeyin.

Özellikle sağlık, finans, güvenlik ve ürün incelemelerinde temsili bir görselin gerçek test fotoğrafı sanılması okuru yanıltabilir. Bir ekran görüntüsü eski sürüme aitse tarihini ve sürümünü metinde açıklayın. Görsel üzerindeki veri ile makalenin yazılı açıklaması çelişiyorsa önce bilgiyi düzeltin. Görsel SEO’nun kalıcı değeri güvenilirlikten gelir.

WordPress’te yayımlamadan önce uygulama sırası

  1. Görseli seçin: Makalenin hangi sorusunu açıklayacağını yazın. Cevap yoksa eklemeyi yeniden düşünün.
  2. Dosyayı hazırlayın: Kırpma, en boy oranı ve okunabilirliği kontrol edin; açıklayıcı ad verin; karşılaştırarak sıkıştırın.
  3. Ortam kütüphanesine yükleyin: Dosya türü, ölçüler ve boyutu kontrol edin. Kaynak bilgisini kendi yayın kayıtlarınızda saklayın.
  4. Alt metni girin: Fotoğrafı sayfa bağlamında kısa anlatın. Dekoratif öğede bilinçli olarak boş bırakın.
  5. Doğru yere ekleyin: İlgili paragrafın yakınına koyun. Gerekiyorsa okura görünen altyazı veya kaynak ekleyin.
  6. Önizlemeyi inceleyin: Mobilde taşma, bulanıklık, okunamayan yazı ve kırık görsel olup olmadığına bakın.
  7. Canlı sayfayı denetleyin: Alt metin, src, ölçüler, kanonik URL ve indeksleme durumunu kontrol edin.

WordPress blok editöründe görsele eklediğiniz alt metin ilgili yazıdaki kullanım için ayrıca ayarlanabilir. Aynı görseli başka bir sayfada başka amaçla kullanıyorsanız, o sayfadaki alt metni bağlama göre yeniden değerlendirin. Ortam kütüphanesindeki alanı değiştirdikten sonra eski yazılarda her kullanımın otomatik güncellendiğini varsaymayın; canlı HTML’yi açıp bakın.

Yayın sonrası kısa denetim listesi

  • Görsel, çevresindeki başlık ve paragrafla gerçekten ilişkili mi?
  • Alternatif metin görselin işlevini anlatıyor mu; anahtar kelime tekrarı var mı?
  • Dekoratif görseller bilinçli olarak alt="" kullanıyor mu?
  • Dosya URL’si açılıyor mu ve yanlışlıkla engellenmiş mi?
  • Mobilde görsel oranı, netlik ve üzerindeki metin doğru mu?
  • İlk ekranın büyük görseli gecikiyor mu; aşağıdaki görseller gereksiz erken mi yükleniyor?
  • Görselin lisansı, kaynağı ve varsa “temsili” niteliği açık mı?

Bir sorun bulduğunuzda önce okuru etkileyen hatayı düzeltin: kırık resim, yanıltıcı şema veya telefonda okunmayan grafik; daha sonra dosya adındaki küçük iyileştirmelere geçin. Yeniden adlandırma için mevcut bir görsel URL’sini doğrudan değiştirirseniz eski bağlantılar bozulabilir. Mevcut dosyayı taşımadan önce nerelerde kullanıldığını ve yönlendirme gerekip gerekmediğini belirleyin.

Sık sorulan sorular

Alt metin kaç kelime olmalı?

Herkese uyan sabit bir kelime sayısı yoktur. Kısa ama anlamlı bir açıklama yazın. Görsel karmaşıksa temel mesajı alt metinde verip ayrıntıyı görünür paragraf veya tabloda sunun. Anahtar kelimeyi yalnızca doğal biçimde gerekiyorsa kullanın.

WebP’ye dönüştürmek tek başına SEO’yu artırır mı?

Hayır. WebP uygun bir seçenek olabilir, fakat hız ve kalite dosyanın gerçek boyutuna, çözünürlüğüne ve sunum biçimine bağlıdır. Aynı görseli farklı ayarlarda karşılaştırın. Arama motorunun anlayabileceği bağlam ve erişilebilirlik de gerekir.

Stok fotoğraf kullanmak zararlı mı?

Stok fotoğraf kullanımı başlı başına hata değildir. Asıl soru lisansının uygun olup olmadığı, okura bilgi katıp katmadığı ve yazıyı yanlış temsil edip etmediğidir. Özgün ama ilgisiz bir görsel de zayıf bir seçimdir.

Görsel altyazısı alt metnin yerine geçer mi?

Geçmez. Altyazı sayfada görünen ek bağlamı ve kaynak bilgisini sunar; alt metin görselin erişilebilir metin karşılığıdır. Her görselin altyazıya ihtiyacı yoktur. Bilgi taşıyan görselde alt metni ayrıca düşünün.

Google Görseller’de neden hemen görünmüyorum?

Tarama, dizine ekleme ve sıralama farklı süreçlerdir. Yeni bir URL’nin keşfi zaman alabilir; erişim engeli, düşük kaliteli sayfa veya yetersiz bağlam da etkili olabilir. Önce URL’nin erişilebilir ve indekslenebilir olduğunu, görselin HTML içinde bulunduğunu ve sayfanın konuyla ilgili olduğunu kontrol edin. Görünürlük için kesin süre veya garanti yoktur.

Üç gerçek yayın senaryosu

Ürün karşılaştırmasında fotoğraf

İki cihazı karşılaştıran yazıda ikisini aynı ışık ve açıyla gösteren bir fotoğraf seçin. Görselin altında model adlarını ve hangi farkın görülebildiğini yazın. Alt metin “Solda A modelinin, sağda B modelinin bağlantı noktaları” gibi gözle görülür bilgiyi taşısın. Fotoğrafta görünmeyen performans farkını alt metne iddia olarak eklemeyin; o sonuç ölçüm tablosunda yer almalıdır. Üreticinin reklam görselini kendi testinizmiş gibi kullanmayın.

Adım adım yazılım öğreticisinde ekran görüntüsü

Bir ayarın yerini göstermek için ekran görüntüsü aldıysanız gereksiz menüleri kırpın, fakat kullanıcının hangi ekranda olduğunu anlayacağı bağlamı bırakın. Gizli anahtar, e-posta veya özel dosya adı görünüyorsa yayımlamadan önce temizleyin. Oklarla işaretlenen adımı paragrafta da yazın; yalnızca ok rengine güvenmeyin. Arayüz değiştiğinde görseli ve yönergeyi birlikte güncelleyin. Alt metinde ekranda görünen ana kontrolü adlandırın.

Veri grafiğinde erişilebilir açıklama

Grafiğin amacı yalnızca dekorasyon değildir. Alt metinde ana eğilimi bir cümlede özetleyin: “Ocaktan hazirana mobil görüntüleme artarken masaüstü sabit kaldı.” Kesin sayılar karar için önemliyse grafiğin altında tablo sağlayın. Renkleri ayırt edemeyen okurlar için çizgi türü veya doğrudan etiket kullanın. Grafiği düşük çözünürlükte yükleyip rakamları okunmaz hale getirmeyin. Kaynak, dönem ve ölçüm birimini açıkça belirtin.

Kaynaklar ve ileri okuma

özgür BAYRAM

Özgür Bayram, WordPress, Laravel, yapay zekâ ve web performansı alanlarında çalışan bir yazılım geliştiricisidir. Bilim Meraklısı’nda teknoloji, yazılım, hosting, SEO ve dijital araçlar hakkında anlaşılır, uygulanabilir rehberler hazırlar. Amacı, teknik konuları sade bir dille anlatarak okuyucuların doğru kararlar vermesine ve sorunlarını güvenle çözmesine yardımcı olmaktır.

İlgili Makaleler

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu