Görsel SEO: Google Görseller İçin Optimizasyon Rehberi

Görsel SEO çoğu zaman yalnız alt metin yazmak olarak anlaşılır, oysa bir görselin Google Görseller'de bulunabilmesi için önce keşfedilmesi, doğru dosya biçimiyle sunulması, ilgili metnin yanında durması ve sayfayı yavaşlatmaması gerekir. Bu rehber keşif, dosya, yerleşim ve performans katmanlarını tek bir kontrol listesinde toplar. Alt metin ve lisans ayrıntılarını ise ayrı bir yazıda ele aldığımız için burada yalnız genel çerçevede anıyoruz.

Görsel SEO Neyi Kapsar

Görsel SEO'yu dört katmanda düşünmek, eksikleri bulmayı kolaylaştırır:

1. Keşif: Google görseli bulabiliyor mu? HTML görsel etiketi, render ve görsel sitemap bu katmandadır.
2. Dosya: Görsel doğru biçimde, makul boyutta ve anlaşılır adla mı sunuluyor?
3. Yerleşim: Görsel, konusunu açıklayan metnin, başlığın ve açıklamanın yanında mı duruyor?
4. Performans: Görsel sayfanın yüklenmesini geciktiriyor mu, özellikle ilk ekrandaki en büyük öğe olarak?

Bu katmanlar birbirine bağlıdır. Keşfedilemeyen bir görsel için dosya adını iyileştirmek sonuç vermez; hızlı yüklenen ama konusuz bir sayfada duran görsel de ilgili aramalarda görünmekte zorlanır. Google'ın Google Görseller için SEO belgesi (yeni sekmede açılır) bu katmanların hepsine değinir ve bu yazıdaki teknik bilgilerin ana kaynağıdır.

Görsel metin alternatifi bu çerçevenin önemli bir parçasıdır, ancak tek parçası değildir. Bağlama uygun alt metin yazımı ve stok görsel kullanım koşulları için makale görseli alt metni ve stok görsel lisansı rehberine bakabilirsiniz. Bu yazı alt metnin dışındaki katmanlara odaklanır.

Denetime hangi katmandan başlayacağınız da önemlidir. Sıralama genellikle keşif, performans, dosya ve yerleşim şeklinde ilerlemelidir: Görülmeyen bir görselin diğer özelliklerini iyileştirmek boşa emektir, LCP'yi geciktiren bir görsel ise tüm sayfanın deneyimini etkiler. Dosya ve yerleşim düzeltmeleri bu iki temel çözüldükten sonra daha görünür sonuç verir.

Google Görselleri Nasıl Keşfeder

Google, görselleri sayfadaki HTML görsel öğelerinin src niteliğinden bulur; görsel bir picture öğesinin içinde olsa da bu kural geçerlidir. Belgenin açık ifadesine göre Google CSS görsellerini dizine eklemez. Yani yalnız CSS background-image ile gösterilen bir ürün fotoğrafı, sayfada görünse bile Google Görseller'de çıkmaz.

Bu ayrım, tasarım kararlarını doğrudan etkiler. Dekoratif desenler, gradyanlar ve süsleme amaçlı arka planlar CSS ile verilebilir; zaten aramada görünmelerine gerek yoktur. Ancak ürün fotoğrafı, infografik, adım adım ekran görüntüsü gibi bilgi taşıyan görseller HTML görsel öğesiyle sunulmalıdır.

İkinci keşif sorunu JavaScript'tir. Görseli sayfa yüklendikten sonra istemci tarafında ekleyen bileşenler, render tamamlanmadan görseli görünmez kılabilir. Google JavaScript'i işleyebilir, ancak render ek bir aşamadır ve hatalar olabilir. Görsel URL'lerinin render sonrası HTML'de src niteliğinde yer alıp almadığını Search Console'daki URL denetimi aracıyla kontrol edebilirsiniz. İstemci tarafı render ile indeksleme ilişkisini JavaScript SEO ve render rehberinde anlattık.

Son olarak robots.txt kurallarını kontrol edin. Görsellerin bulunduğu dizin veya CDN alan adı engellenmişse Google görsel dosyasını getiremez. Bu engeller çoğu zaman bilinçli değil, eski bir kuralın kalıntısıdır.

HTML Görsel Etiketi ve Responsive Görseller

Farklı ekran boyutlarına farklı görsel sunmak için iki yöntem vardır: img öğesinde srcset niteliği veya birden çok source içeren picture öğesi. Her iki durumda da Google, src niteliğiyle bir yedek URL belirtilmesini önerir. picture kullandığınızda en sonda src taşıyan bir img öğesi bulunmalıdır; bazı tarayıcılar ve tarayıcı botları yalnız bu yedeği okur.

Responsive görsellerde dikkat edilecek noktalar şunlardır:

• srcset ve sizes birlikte: sizes niteliği, görselin sayfada kaplayacağı genişliği tarayıcıya bildirir. Eksik olduğunda tarayıcı gereğinden büyük dosya indirebilir.
• Genişlik ve yükseklik: img öğesine gerçek oranı yansıtan width ve height değerleri yazmak, görsel yüklenmeden önce alan ayrılmasını sağlar ve düzen kaymasını azaltır.
• Tutarlı görsel: srcset içindeki tüm sürümler aynı görselin farklı boyutları olmalıdır. Mobilde başka bir kadraj göstermek istiyorsanız picture ve media koşulu daha uygundur.
• Tercih edilen görsel: Sayfayı temsil eden görseli og:image veya yapılandırılmış veriyle belirtebilirsiniz. Google, genel bir logo yerine sayfayı temsil eden, yüksek çözünürlüklü ve aşırı uç en boy oranı taşımayan bir görsel seçilmesini önerir.

Data URI ile satır içine gömülen görseller de desteklenir, ancak belge bunun sayfa boyutunu belirgin biçimde artırabileceği uyarısını yapar. Küçük ikonlar dışında harici dosya kullanmak daha dengeli bir yoldur.

Dosya Adı, Format ve Sıkıştırma

Google, kısa ve açıklayıcı dosya adlarının görselin konusu hakkında hafif bir ipucu verdiğini belirtir. Belgedeki örnekte siyah-yavru-kedi.jpg benzeri bir ad, IMG00023.JPG gibi bir addan daha yararlıdır. Görsel1.jpg gibi genel adlardan kaçının; yerelleştirilmiş sayfalarda dosya adını da hedef dile çevirmeyi düşünün. Dosya adını anahtar kelime listesine dönüştürmek ise yarar sağlamaz.

Desteklenen biçimler konusunda belge net bir liste verir: img öğesinin src niteliğinde referans verilen BMP, GIF, JPEG, PNG, WebP, SVG ve AVIF biçimleri desteklenir. Dosya uzantısının gerçek dosya türüyle eşleşmesi de beklenir; WebP içeriğini .jpg uzantısıyla sunmak bu kurala aykırıdır.

WebP ve AVIF, aynı görsel kalitede genellikle daha küçük dosyalar üretebilir. Bunu bir sıralama avantajı olarak değil, sayfa hızı ve kullanıcı deneyimi kazancı olarak değerlendirin. Biçim seçiminde pratik bir yol şöyledir:

• Fotoğraflar için WebP veya AVIF, gerekiyorsa JPEG yedeğiyle.
• Şeffaflık gereken grafikler için WebP veya PNG.
• Logo, ikon ve basit çizimler için SVG.
• Animasyon için GIF yerine animasyonlu WebP veya video.

Sıkıştırma düzeyini gözle kontrol ederek belirleyin. Aşırı sıkıştırma ürün dokusunu, metin içeren görsellerde harfleri bozar. Google da keskin ve kaliteli görsellerin kullanıcıyı daha çok çektiğini, ama görsellerin çoğu zaman sayfa boyutunun en büyük parçası olduğunu birlikte hatırlatır.

Görselin Çevresindeki Metin ve Başlık

Google, görselin konusunu anlamak için sayfanın içeriğinden, görsel açıklamalarından ve sayfa başlığından yararlanır. Bu nedenle bir görselin aramada görünmesi, büyük ölçüde içinde bulunduğu sayfanın ne anlattığına bağlıdır.

Uygulamada şu ilkeleri izleyin. Görseli, konusunu açıklayan paragrafın yakınına yerleştirin; makalenin sonunda toplu bir galeri yerine ilgili bölümün içinde kullanın. Görselin altına, okuyucuya bilgi veren kısa bir açıklama yazın; açıklama alt metni tekrarlamak yerine bağlam eklemelidir. Görselin konusu sayfanın konusuyla uyumlu olsun; bir kahve makinesi rehberindeki rastgele bir manzara fotoğrafı ne kullanıcıya ne de aramaya katkı sağlar.

Sayfa başlığı ve meta açıklama da görselle birlikte arama sonuçlarında gösterilen bilgiyi etkiler. Google Görseller'de bir görsele tıklayan kullanıcı, başlığı ve açıklamayı görerek sayfaya gidip gitmeyeceğine karar verir. Görselin bulunduğu sayfanın başlığı görselle çelişiyorsa tıklama ihtimali düşer.

Tanıtım yazılarında ve sponsorlu içeriklerde görsel ile videonun metinle nasıl birlikte kurgulanacağını tanıtım yazısında görsel ve video kullanımı yazısında ayrıca ele aldık. Orada da temel ilke aynıdır: görsel, metnin anlattığı şeyi desteklemelidir.

Görsel Sitemap Ne Zaman İşe Yarar

Görsel sitemap, Google'ın başka yollarla bulamayabileceği görselleri bildirmek için kullanılır. Google'ın görsel sitemap belgesi (yeni sekmede açılır), JavaScript ile yüklenen görselleri bu duruma örnek gösterir. Her url girdisi içine image:image etiketi ve bu etiketin içinde zorunlu image:loc etiketi eklenir; tek bir url girdisi en fazla 1.000 görsel içerebilir.

Belgede dikkat edilmesi gereken bir güncelleme de vardır: image:caption, image:title, image:geo_location ve image:license etiketleri Google belgelerinden kaldırılmıştır. Eski şablonlarda bu etiketler hâlâ bulunabilir; yeni sitemap üretirken yalnız image:loc yeterlidir.

Görseller farklı bir alan adında, örneğin bir CDN üzerinde barınabilir. Bu durumda belge, barındıran alan adının Search Console'da doğrulanmasını ve robots.txt'nin bu görselleri engellememesini ister.

Görsel sitemap her site için şart değildir. Görselleriniz zaten HTML görsel öğeleriyle sunuluyor ve sayfalarınız düzgün taranıyorsa standart sitemap ve iç bağlantılar genellikle yeterlidir. Görsel sitemap; görselleri JavaScript ile yükleyen, büyük ürün kataloğu olan veya görselleri ayrı bir alan adında barındıran siteler için daha anlamlıdır. Mevcut sitemap'lerinizi nasıl denetleyeceğinizi XML sitemap denetimi ve hata çözümü yazısında bulabilirsiniz.

Lazy Loading ve İlk Ekran Görselleri

Lazy loading, ekran dışındaki görsellerin kullanıcı sayfada ilerleyene kadar yüklenmemesini sağlar. Doğru kullanıldığında ilk yükleme hızlanır ve gereksiz veri indirilmez. Yanlış kullanıldığında ise hem kullanıcı deneyimini hem de Google'ın içeriği görmesini zorlaştırır.

Google'ın tembel yükleme rehberi iki temel ilke koyar. Birincisi, uygulama görünüm alanına giren tüm ilgili içeriği yüklemelidir. Tarayıcının yerleşik tembel yüklemesi, IntersectionObserver API'si veya görünüm alanına girişte yükleme yapan kütüphaneler bu amaca uygundur. İkincisi, yükleme kaydırma veya tıklama gibi kullanıcı eylemlerine bağlı olmamalıdır, çünkü Google sayfayla bu şekilde etkileşime girmez.

Rehberin üçüncü uyarısı ilk ekranla ilgilidir: hemen görünen içerik tembel yüklenmemelidir. Sayfanın üst kısmındaki ana görsel, kahraman alanındaki fotoğraf veya ürün sayfasındaki ilk ürün görseli loading="lazy" ile işaretlenirse, tarayıcı onu geç keşfeder ve ekranda görünmesi gecikir. Bu görseller için tembel yükleme yerine normal yükleme kullanın; gerekirse fetchpriority="high" niteliğiyle tarayıcıya önceliği bildirin.

Uygulamayı kontrol etmek için Search Console URL denetimi aracında render edilmiş HTML'e bakın ve görsel URL'lerinin src niteliklerinde göründüğünü doğrulayın. Yalnız data-src gibi özel niteliklerde duran ve hiç src'ye taşınmayan görseller sorun işaretidir.

Görsel ve Sayfa Hızı İlişkisi

Görseller çoğu sayfada en büyük içerik öğesidir ve Largest Contentful Paint (LCP) metriğini doğrudan belirler. web.dev LCP rehberine (yeni sekmede açılır) göre iyi bir kullanıcı deneyimi için LCP 2,5 saniye veya daha kısa olmalıdır; 2,5 ile 4 saniye arası iyileştirme gerektirir, 4 saniyenin üstü zayıf kabul edilir. Ölçüm, mobil ve masaüstü ayrı ayrı olmak üzere sayfa yüklemelerinin 75. yüzdelik dilimi üzerinden yapılır.

LCP öğesi olabilecek türler arasında img öğeleri, SVG içindeki image öğeleri, video poster görselleri ve url() ile yüklenen arka plan görselleri bulunur. Bu son madde önemlidir: CSS arka plan görseli Google Görseller'de dizine eklenmese de LCP öğesi olabilir ve hızınızı etkiler.

LCP görselini hızlandırmak için şu sırayı izleyin: Önce sayfanın LCP öğesini tespit edin. Bu bir görselse, HTML kaynağında doğrudan bulunabilir olmasını sağlayın; JavaScript veya CSS içinden keşfedilen görseller geç başlar. Ardından dosya boyutunu ekran ihtiyacına göre küçültün, uygun biçimi seçin ve tembel yüklemeyi kaldırın. Son olarak sunucu ve önbellek ayarlarının görsel dosyalarını hızlı teslim ettiğini kontrol edin.

Reklam alanı içeren yayıncı sayfalarında görsellerle reklam yerleşimlerinin hız üzerindeki ortak etkisini reklam ve Core Web Vitals dengesi yazısında anlattık; LCP görseli ile reklam kutusunun aynı ekran alanını paylaştığı durumlar orada ayrıca ele alınır.

Ürün ve Blog Görsellerinde Farklı Öncelikler

Ürün sayfası ve blog yazısı görsel SEO'dan farklı şeyler bekler. Ürün sayfasında görsel, satın alma kararının parçasıdır: kullanıcı ürünü farklı açılardan, gerçek renginde ve ayrıntısıyla görmek ister. Blog yazısında ise görsel çoğunlukla anlatımı destekler: bir süreci, ekranı veya karşılaştırmayı açıklar.

Ürün görsellerinde öncelikler şunlardır: her ürünün kendine ait, özgün fotoğrafları; varyant renkleri için ayrı görseller; yakınlaştırmaya uygun yüksek çözünürlük ile hızlı ilk yükleme arasında denge; ürün yapılandırılmış verisinde image alanının doldurulması. Ürün görsellerinin metinle birlikte nasıl kurgulanacağını ürün açıklaması yazdırma rehberinde ele aldık; açıklamadaki özellikler ile görselde görünenlerin tutarlı olması, kullanıcıya güven verir.

Blog görsellerinde ise öncelik, görselin bilgi taşıyıp taşımadığıdır. Kapak görseli sayfanın konusunu temsil etmeli, gövdedeki görseller ise anlatılan adımı veya veriyi açıklamalıdır. Yalnız görsel sayısını artırmak için eklenen ilgisiz fotoğraflar sayfayı ağırlaştırır.

Şöyle bir durumu düşünün: Kurgusal bir mutfak gereçleri mağazası, ürün fotoğraflarını CSS arka planı olarak gösteriyor ve blog yazılarında aynı stok fotoğrafı tekrar tekrar kullanıyor. Ekip ürün fotoğraflarını HTML görsel öğesine taşıyor, dosya adlarını ürün adına göre düzenliyor, ilk ürün görselinden tembel yüklemeyi kaldırıyor ve blogda her yazıya konuya özgü süreç görselleri ekliyor. Senaryo kurgudur; amacı, değişikliklerin hangi katmana dokunduğunu göstermektir.

Görsel Telif ve Meta Veri Bilgisi

Google, görsel için oluşturucu, kullanım hakkı ve kredi bilgisini Google Görseller'de gösterebilir. Bu bilgi iki yolla verilebilir: sayfadaki yapılandırılmış veri veya görsel dosyasına gömülen IPTC fotoğraf meta verisi. İkisi çeliştiğinde Google yapılandırılmış veriyi kullanır.

Yapılandırılmış veri yönteminde contentUrl zorunludur ve creator, creditText, copyrightNotice veya license alanlarından en az biri gerekir. Lisanslanabilir rozeti için license alanı bulunmalıdır; acquireLicensePage ise önerilen alandır. IPTC tarafında Google'ın okuduğu alanlar arasında Creator, Credit Line, Copyright Notice, Licensor URL ve Web Statement of Rights bulunur.

Bu meta verilerin bir sıralama etkisi olduğu belgelenmiş değildir; görselin nasıl gösterileceğini ve kullanıcıya hangi bilgilerin sunulacağını etkiler. Ayrıca görüntülenmeleri de kesin değildir. Kendi ürettiğiniz görsellerde kredi ve hak bilgisini eklemek, görsellerinizin başka sitelerde kullanıldığında kaynağın anlaşılmasına yardımcı olur.

Stok veya üçüncü taraf görsellerde ise kullanım hakkını görsel bazında doğrulamak gerekir; koleksiyon düzeyinde "ücretsiz" etiketi her kullanım için yeterli olmayabilir. Görselin kaynağını, lisans sayfasını ve indirme tarihini bir kayıtta tutmak, ileride çıkabilecek bir hak sorusunu hızlıca yanıtlamanızı sağlar.

Örnek Şablon: Görsel SEO Kontrol Listesi

Aşağıdaki örnek şablon, bir sayfanın görsellerini dört katmanda denetlemek için kullanılabilir; durum sütunu kurgusal bir sayfa için örnek değerler içerir.

Listeyi şablon bazında uygulayın: tek tek sayfalar yerine ürün, kategori ve blog şablonlarını denetlemek, aynı hatanın yüzlerce sayfada tekrarlanmasını tek düzeltmeyle çözer. Her şablon için bir temsilci sayfa seçin, tabloyu o sayfada doldurun ve düzeltme sonrası aynı sayfayı yeniden kontrol ederek değişikliğin şablonun tamamına yansıdığını doğrulayın.

Sıkça Sorulan Sorular

Görsel dosya adı SEO için önemli mi?

Google, kısa ve açıklayıcı dosya adlarının görselin konusu hakkında hafif bir ipucu verdiğini belirtir. Belirleyici bir etken değildir, ama IMG00023.JPG gibi anlamsız adlar yerine konuyu anlatan adlar kullanmak kolay ve faydalı bir adımdır. Anahtar kelime doldurmaktan kaçının.

WebP formatı sıralamayı artırır mı?

Hayır, biçim değişikliği tek başına bir sıralama avantajı olarak belgelenmemiştir. WebP ve AVIF genellikle daha küçük dosyalar sağladığı için sayfa hızına ve kullanıcı deneyimine katkı verir. Google, WebP ve AVIF dahil yaygın biçimleri destekler.

CSS arka plan görselleri Google Görseller’de çıkar mı?

Hayır. Google'ın görsel SEO belgesi, CSS görsellerinin dizine eklenmediğini açıkça belirtir. Aramada görünmesini istediğiniz görselleri HTML görsel öğesiyle sunun.

Her siteye görsel sitemap gerekir mi?

Hayır. Görseller HTML görsel öğeleriyle sunuluyor ve sayfalar düzgün taranıyorsa çoğu zaman gerekmez. JavaScript ile yüklenen görseller, büyük kataloglar veya ayrı alan adında barınan görseller için daha yararlıdır.

İlk ekrandaki görsele lazy loading eklenmeli mi?

Hayır. Hemen görünen içerik tembel yüklenmemelidir; ilk ekrandaki ana görsel genellikle LCP öğesidir ve tembel yükleme onun görünmesini geciktirir. Bu görseli normal yükleyin, ekran dışındaki görsellerde tembel yükleme kullanın.

Stok görsel kullanmak görsel SEO’yu zayıflatır mı?

Stok görsel kullanmak tek başına bir sorun olarak belgelenmemiştir, ancak aynı görsel birçok sitede bulunduğu için ayırt edici bir değer katmaz. Konuyu gerçekten açıklayan özgün görseller kullanıcıya daha fazla bilgi verir. Stok görsel kullanıyorsanız lisans koşullarını görsel bazında doğrulayın.

Sonuç ve Sonraki Adım

Görsel SEO; keşif, dosya, yerleşim ve performans katmanlarının birlikte çalışmasıdır. Bilgi taşıyan görselleri HTML öğesiyle sunun, açıklayıcı ad ve uygun biçim seçin, görseli ilgili metnin yanına yerleştirin ve ilk ekran görselini tembel yüklemeden çıkarın. Görsellerinizi destekleyecek, konuyu derinlemesine anlatan metinlere ihtiyaç duyuyorsanız makale yazımı hizmetini inceleyebilir, seçenekleri ürün sayfasındaki ayrıntılara göre değerlendirebilirsiniz.