Google görsel SEO için en iyi uygulamalar

Google, kullanıcıların web üzerindeki bilgileri görsel olarak keşfetmelerine yardımcı olan metin sonucu görselleri, Google Keşfet ve Google Görseller gibi çeşitli Arama özellikleri ve ürünleri sunar. Her özellik ve ürün farklı görünse de, görsellerin bunlarda görünmesini sağlamaya yönelik genel öneriler aynıdır.

Görsellerinizin Google arama sonuçlarında görünmesini sağlamak için şu en iyi uygulamaları izleyerek onları optimize edebilirsiniz:

1. Görsellerinizi keşfetmemize ve dizine eklememize yardımcı olun
2. Görsel açılış sayfalarını optimize edin

Görsellerinizi keşfetmemize ve dizine eklememize yardımcı olun

İçeriğinizin Google arama sonuçlarında yer alması için gereken teknik gereksinimler görseller için de geçerlidir. Görseller HTML’den önemli ölçüde farklı bir format olduğundan, dizine eklenmeleri için ek gereksinimler bulunur; örneğin, görsellerin sitenizde bulunması farklıdır ve görsellerin sunumu, bir görselin dizine eklenip eklenmeyeceğini ve doğru anahtar kelimelerle eşleşip eşleşmeyeceğini etkiler.

Görselleri yerleştirmek için HTML görsel öğelerini kullanın

Standart HTML görsel öğelerini kullanmak, tarayıcıların görselleri bulmasına ve işlemesine yardımcı olur. Google, <img> öğesinin src özniteliğindeki görselleri (<picture> öğesi gibi diğer öğelerin alt öğesi olsa bile) bulabilir. Google, CSS görsellerini dizine eklemez.

İyi:

<img src=”puppy.jpg” alt=”Golden retriever yavrusu” />

Kötü:

<div style=”background-image:url(puppy.jpg)”>Golden retriever yavrusu</div>

Görsel site haritası kullanın

Aksi takdirde keşfedemeyebileceğimiz görsellerin URL’lerini bir görsel site haritası göndererek sağlayabilirsiniz.

Normal site haritalarından farklı olarak, görsel site haritalarının <image:loc> öğelerine diğer alan adlarından URL’ler ekleyebilirsiniz. Bu, görselleri barındırmak için CDN’ler (içerik dağıtım ağları) kullanmanıza olanak tanır. Bir CDN kullanıyorsanız, bulabileceğimiz tarama hatalarını size bildirebilmemiz için Search Console’da CDN alan adının mülkiyetini doğrulamanızı öneririz.

Duyarlı (responsive) görseller

Duyarlı web sayfaları tasarlamak, kullanıcılar bunlara çok sayıda cihaz türünden erişebildiği için daha iyi bir kullanıcı deneyimi sağlar. Web sitenizdeki görselleri yönetmeye yönelik en iyi uygulamaları öğrenmek için duyarlı görseller kılavuzumuza bakın.

Web sayfaları, duyarlı görselleri belirtmek için <picture> öğesini veya img öğesinin srcset özniteliğini kullanır. Ancak, bazı tarayıcılar ve tarayıcılar (crawlers) bu öznitelikleri anlamaz. Her zaman src özniteliğini kullanarak bir yedek URL belirtmenizi öneririz.

srcset özniteliği, özellikle farklı ekran boyutları için aynı görselin farklı sürümlerini belirtmeye olanak tanır. Örneğin:

<picture> öğesi, aynı görselin farklı <source> sürümlerini gruplamak için kullanılan bir kapsayıcıdır. Tarayıcının piksel yoğunluğu ve ekran boyutu gibi cihaz özelliklerine bağlı olarak doğru görseli seçebilmesi için bir yedekleme yaklaşımı sunar. picture öğesi, yeni formatları henüz desteklemeyen istemciler için yerleşik zarif bozulma (graceful degradation) ile yeni görsel formatlarını kullanmak için de kullanışlıdır.

HTML Standardının 4.8.1 bölümü uyarınca, picture öğesini kullanırken aşağıdaki formatı izleyerek src özniteliğine sahip bir img öğesini yedek olarak sağladığınızdan emin olun:

Desteklenen görsel formatlarını kullanın

Google Arama, img öğesinin src özniteliğinde referans verilen şu dosya formatlarındaki görselleri destekler: BMP, GIF, JPEG, PNG, WebP, SVG ve AVIF. Ayrıca dosya adı uzantınızın dosya türüyle eşleşmesi iyi bir fikirdir.

Görselleri Veri URI’leri (Data URI) olarak da satır içine (inline) alabilirsiniz. Veri URI’leri, bir img öğesinin src özniteliğini aşağıdaki formatı kullanarak Base64 kodlu bir dize olarak ayarlayıp görsel gibi bir dosyayı satır içine dahil etmenin bir yolunu sağlar:

Görselleri satır içine almak HTTP isteklerini azaltabilse de, sayfa boyutunu önemli ölçüde artırabileceğinden bunları ne zaman kullanacağınıza dikkatle karar verin. Bunun hakkında daha fazla bilgi için web.dev sayfamızdaki görselleri satır içine almanın avantajları ve dezavantajları bölümüne bakın.

Hız ve kalite için optimize edin

Yüksek kaliteli fotoğraflar, bulanık ve net olmayan görsellerden daha çok kullanıcıların ilgisini çeker. Ayrıca, keskin görseller sonuç küçük resminde kullanıcılar için daha çekicidir ve kullanıcılardan trafik alma olasılığını artırabilir. Bununla birlikte, görseller genellikle toplam sayfa boyutuna en büyük katkıda bulunan öğelerdir, bu da sayfaların yavaşlamasına ve yüklenmesinin maliyetli olmasına neden olabilir. Yüksek kaliteli ve hızlı bir kullanıcı deneyimi sağlamak için en son görsel optimizasyonu ve duyarlı görsel tekniklerini uyguladığınızdan emin olun.

Sitenizin hızını PageSpeed Insights ile analiz edin ve web sitesi performansını artırmaya yönelik en iyi uygulamaları ve teknikleri öğrenmek için Hız neden önemlidir? sayfamızı ziyaret edin.

Görsel açılış sayfalarını optimize edin

Hemen belli olmasa da, bir görselin yerleştirildiği sayfaların içeriği ve meta verileri, görselin Google arama sonuçlarında nasıl ve nerede görünebileceği üzerinde büyük bir etkiye sahip olabilir.

Meta verilerle tercih edilen bir görsel belirtin

Google’ın görsel önizlemesi seçimi tamamen otomatiktir ve belirli bir sayfadaki hangi görselin Google’da gösterileceğini (örneğin, bir metin sonucu görseli veya Keşfet’teki önizleme görseli) seçmek için bir dizi farklı kaynağı dikkate alır.

Tercih ettiğiniz görseli aşağıdaki meta veri kaynaklarından biri aracılığıyla sağlayarak hangi görselin seçileceğini etkileyebilirsiniz:

• Bir URL veya ImageObject ile schema.org primaryImageOfPage özelliğini belirtin.

  Veya bir görsel URL‘si ya da ImageObject özelliği belirtin ve bunu ana varlığa ekleyin (schema.org mainEntity veya mainEntityOfPage özelliklerini kullanarak):
• og:image meta etiketini belirtin.

Schema.org işaretlemesinde veya og:image meta etiketinde kullanılacak tercih ettiğiniz görseli seçerken şu en iyi uygulamaları izleyin:

• Sayfayla alakalı ve onu temsil eden bir görsel seçin.
• Genel bir görsel (örneğin, site logonuz) veya schema.org işaretlemesinde ya da og:image meta etiketinde üzerinde metin bulunan bir görsel kullanmaktan kaçının.
• Aşırı en boy oranına sahip (çok dar veya aşırı geniş görseller gibi) bir görsel kullanmaktan kaçının.
• Mümkünse yüksek çözünürlük kullanın.

Sayfa başlığınızı ve açıklamanızı kontrol edin

Google Arama, her sonucu ve bunun kullanıcı sorgusuyla nasıl ilişkili olduğunu en iyi şekilde açıklamak için otomatik olarak bir başlık bağlantısı ve snippet oluşturur. Bu, kullanıcıların bir sonuca tıklayıp tıklamamaya karar vermelerine yardımcı olur. İşte bir Google Arama sonuçları sayfasında başlık bağlantılarının ve snippet’in nasıl görünebileceğine dair iki örnek:

Bu bilgi için, her sayfanın title ve meta etiketlerindeki bilgiler dahil olmak üzere bir dizi farklı kaynak kullanıyoruz.

Google’ın başlık ve snippet yönergelerini izleyerek sayfalarınız için görüntülenen başlık bağlantısının ve snippet’in kalitesini artırmamıza yardımcı olabilirsiniz.

Yapılandırılmış veri ekleyin

Yapılandırılmış veri eklerseniz, Google görsellerinizi Google Görseller’de kullanıcılarınıza sayfanız hakkında alakalı bilgiler veren ve sitenize daha iyi hedeflenmiş trafik çekebilen belirgin bir rozet dahil olmak üzere belirli zengin sonuçlarda görüntüleyebilir.

Genel yapılandırılmış veri yönergelerinin yanı sıra yapılandırılmış veri türünüze özel yönergeleri izleyin; aksi takdirde yapılandırılmış verileriniz Google Görseller’de zengin sonuç olarak görüntülenmeye uygun olmayabilir. Bu yapılandırılmış veri türlerinin her birinde, görsel özniteliği, Google Görseller’de rozet ve zengin sonuç almaya hak kazanmak için gerekli bir alandır. İşte zengin sonuçların Google Görseller’de nasıl görünebileceğine dair iki örnek:

Açıklayıcı dosya adları, başlıklar ve alt metinler kullanın

Google, görselin konusu hakkındaki bilgileri, açıklamalar ve görsel başlıkları dahil olmak üzere sayfanın içeriğinden çıkarır. Mümkün olan her yerde, görsellerin alakalı metinlerin yakınına ve görselin konusuyla alakalı sayfalara yerleştirildiğinden emin olun.

Aynı şekilde, dosya adı da Google’a görselin konusu hakkında çok hafif ipuçları verebilir. Mümkün olduğunda kısa ama açıklayıcı dosya adları kullanın. Örneğin, my-new-black-kitten.jpg, IMG00023.JPG‘den daha iyidir. Mümkünse image1.jpg, pic.gif, 1.jpg gibi genel dosya adları kullanmaktan kaçının. Sitenizde binlerce görsel varsa, görsellerin adlandırılmasını otomatikleştirmeyi düşünebilirsiniz. Görsellerinizi yerelleştiriyorsanız, Latin olmayan veya özel karakterler kullanıyorsanız URL kodlama yönergelerini göz önünde bulundurarak dosya adlarını da çevirmeyi unutmayın.

Bir görsel için daha fazla meta veri sağlama konusunda en önemli öznitelik, ekran okuyucu kullanan veya düşük bant genişliğine sahip bağlantıları olan kullanıcılar dahil olmak üzere web sayfalarındaki görselleri göremeyen kişiler için erişilebilirliği de artıran alt metindir (bir görseli tanımlayan metin).

Google, görselin konusunu anlamak için bilgisayarlı görü algoritmaları ve sayfanın içeriğiyle birlikte alt metni kullanır. Ayrıca, bir görseli bağlantı olarak kullanmaya karar verirseniz, görsellerdeki alt metin bağlantı metni (anchor text) olarak da kullanışlıdır.

Alt metin yazarken, anahtar kelimeleri uygun şekilde kullanan ve sayfa içeriği bağlamında olan, yararlı ve bilgi açısından zengin içerik oluşturmaya odaklanın. alt özniteliklerini anahtar kelimelerle doldurmaktan (anahtar kelime doldurma olarak da bilinir) kaçının, çünkü bu olumsuz bir kullanıcı deneyimiyle sonuçlanır ve sitenizin spam olarak görülmesine neden olabilir.

Kötü (alt metin eksik):

<img src=”puppy.jpg”/>

Kötü (anahtar kelime doldurma):

<img src=”puppy.jpg” alt=”yavru köpek bebek köpek yavru yavrular köpekçikler yavrular köpek retriever labrador tazı setter pointer yavru jack russell terrier yavrular köpek maması ucuz köpek maması yavru köpek maması“/>

Daha iyi:

<img src=”puppy.jpg” alt=”yavru köpek“/>

En iyi:

<img src=”puppy.jpg” alt=”Getir götür oynayan Dalmaçyalı yavrusu“/>

Ayrıca, W3 yönergeleri uyarınca alt metninizin erişilebilirliğini de göz önünde bulundurun. <img> öğesi için öğenin alt özniteliğini ekleyebilir, satır içi <svg> öğeleri için ise <title> öğesini kullanabilirsiniz. Örneğin:

İçeriğinizi erişilebilirlik denetimi yaparak ve yavaş bir ağ bağlantısı emülatörü kullanarak test etmenizi öneririz.

Bir görsel daha büyük bir web sitesindeki birden fazla sayfada referans veriliyorsa, sitenin genel tarama bütçesini göz önünde bulundurun. Özellikle, Google’ın görseli birden çok kez istemesine gerek kalmadan önbelleğe alabilmesi ve yeniden kullanabilmesi için görsele sürekli olarak aynı URL ile referans verin.

Google Görseller satır içi bağlantısından (inline linking) çıkın

İsterseniz, Google Görseller arama sonuçları sayfasında satır içi bağlantıdan çıkarak tam boyutlu görselin görünmesini engelleyebilirsiniz. Satır içi bağlantıdan çıkmak için:

1. Görseliniz istendiğinde, istekteki HTTP yönlendiren (referrer) başlığını inceleyin.
2. İstek bir Google alan adından geliyorsa, 200 HTTP durum kodu veya 204 HTTP durum kodu ve içerik olmadan yanıt verin.

Google yine de sayfanızı tarayacak ve görseli görecektir, ancak arama sonuçlarında tarama sırasında oluşturulan küçük bir görseli görüntüleyecektir. Bu çıkış işlemi her zaman mümkündür ve bir web sitesinin görsellerinin yeniden işlenmesini gerektirmez. Bu davranış görsel gizleme (cloaking) olarak kabul edilmez ve manuel işlemlere yol açmaz.

Alternatif olarak, görselin arama sonuçlarında tamamen görünmesini engelleyebilirsiniz.

SafeSearch için optimize edin

SafeSearch, Google Arama sonuçlarında müstehcen görsellerin, videoların ve web sitelerinin gösterilip gösterilmeyeceğini, bulanıklaştırılacağını veya engelleneceğini belirleyen bir Google kullanıcı hesabı ayarıdır. Google’ın sitenizin doğasını anladığından emin olun, böylece Google uygunsa SafeSearch filtrelerini sitenize uygulayabilir. SafeSearch için sayfaları etiketleme hakkında daha fazla bilgi edinin.