Google Görseller SEO en iyi uygulamaları

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

Aşağıdaki en iyi uygulamaları kullanarak görsellerinizi Google'ın arama sonuçlarında görünecek şekilde optimize edebilirsiniz:

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

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

İçeriğinizin Google arama sonuçlarında görünmesine yönelik teknik şartlar, görseller için de geçerlidir. Görseller, HTML ile karşılaştırıldığında oldukça farklı bir biçim olduğundan görsellerin dizine eklenmesi için ek şartlar mevcuttur. Örneğin, sitenizdeki görselleri bulmak farklıdır ve görsellerin sunumu, görselin dizine eklenip eklenmediğini ve dizine eklerken doğru anahtar kelimelerin kullanılıp kullanılmadığını da etkiler.

Resim yerleştirmek için HTML resim öğelerini kullanma

Standart HTML resim öğeleri, tarayıcıların resimleri bulup işlemesine yardımcı olur. Google, göreselleri <img> öğesinin src özelliğinde bulabilir (bu öğe <picture> gibi başka öğelerin alt öğesi olsa bile). Google, CSS görsellerini dizine eklemez.

İyi:

<img src="puppy.jpg" alt="Yavru golden retriever" />

Kötü:

<div style="background-image:url(puppy.jpg)">Yavru golden retriever</div>

Görsel site haritası kullanma

Başka türlü keşfedemeyebileceğimiz görsel URL'lerini bir görsel site haritası göndererek sağlayabilirsiniz.

Normal site haritalarının aksine, 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'leri (içerik yayınlama ağları) kullanmanızı sağlar. CDN kullanıyorsanız Search Console'da CDN'nin alan adının sahipliğini doğrulamanızı öneririz. Böylece, bulabileceğimiz tarama hatalarını size bildirebiliriz.

Uyumlu görseller

Duyarlı web sayfaları tasarlamak, bu sayfalara kullanıcılar çok çeşitli cihazlardan erişebildiğinden daha iyi kullanıcı deneyimi sunar. Web sitenizde görsel kullanımıyla ilgili en iyi uygulamaları öğrenmek için duyarlı görsel rehberimizi inceleyin.

Web sayfaları, uyumlu görselleri belirtmek için bir <picture> öğesini veya img öğesinin srcset özelliğini kullanır. Ancak bazı tarayıcılar bu özellikleri anlamaz. Dolayısıyla, src özelliğini kullanarak her zaman yedek bir URL belirtmenizi öneririz.

srcset özelliği, özellikle farklı ekran boyutları için aynı görselin farklı sürümlerini belirtmeyi sağlar. Örneğin:

<img
  srcset="maine-coon-nap-320w.jpg 320w, maine-coon-nap-480w.jpg 480w, maine-coon-nap-800w.jpg 800w"
  sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
  src="maine-coon-nap-800w.jpg"
  alt="A watercolor illustration of a maine coon napping leisurely in front of a fireplace">

<picture> öğesi, aynı görselin farklı <source> sürümlerini gruplandırmak için kullanılan bir kapsayıcıdır. Yedek olarak kullanılabilecek bir yaklaşım sunar. Böylece tarayıcı, cihaz olanaklarına göre (ör. piksel yoğunluğu ve ekran boyutu) doğru görseli seçebilir. picture öğesi ayrıca ileride yeni biçimleri destekleme ihtimali olan istemcilerin, yerleşik olarak bulunan kontrollü azalma stratejisiyle oluşturulmuş yeni görselin biçimlerini kullanmaları açısından da pratiktir.

HTML Standardı'nın 4.8.1 bölümü uyarınca, picture öğesini aşağıdaki biçimde kullanırken img öğesini bir src özelliğiyle yedek olarak sağladığınızdan emin olun:

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="An 1800s oil painting of The Great Pyramid">
</picture>

Desteklenen resim biçimlerini kullanın

Google Arama, img etiketinin src özelliğinde referans verilen resimler için şu dosya biçimlerinde destekler: BMP, GIF, JPEG, PNG, WebP, SVG ve AVIF . Dosya türüyle eşleşen bir dosya adı uzantınızın olması da iyi bir fikirdir.

Ayrıca, görselleri Veri URI'leri olarak satır içine de alabilirsiniz. Veri URI'leri aşağıdaki biçimi kullanarak, görsel gibi bir dosyayı img öğesinin src özelliğini Base64 olarak kodlanmış dize şeklinde ayarlayarak satır içine almanın yolunu sağlar:

<img src="data:image/svg+xml;base64,[data]">

Görselleri satır içine almak HTTP isteklerini azaltabilir. Ancak bunların ne zaman kullanılacağını dikkatlice değerlendirin. Zira bu kullanım sayfa boyutunu önemli ölçüde büyütebilir. Bu konuyla ilgili daha fazla bilgi için web.dev sayfamızda resimleri satır içine almanın avantajları ve dezavantajları bölümüne bakabilirsiniz.

Hız ve kalite için optimize etme

Yüksek kaliteli fotoğraflar, kullanıcılara bulanık, belirsiz görsellere göre daha çekici görünür. Ayrıca, net görseller, sonuç küçük resminde kullanıcılara daha cazip görünür ve kullanıcılardan trafik alma olasılığınızı artırabilir. Bununla birlikte görseller genellikle toplam sayfa boyutuna en çok katkıda bulunan öğelerdir ve sayfaları yavaşlatıp yüklenmelerini zorlaştırabilir. Hem yüksek kaliteli hem de hızlı bir kullanıcı deneyimi sağlamak için en yeni görsel optimizasyonu ve duyarlı görsel tekniklerini uyguladığınızdan emin olun.

Site hızınızı PageSpeed Insights ile analiz edin. Ayrıca web sitesi performansını iyileştirmenizi sağlayacak en iyi uygulamaları ve teknikleri öğrenmek için Hız neden önemlidir sayfamızı ziyaret edin.

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

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

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

Google Arama her sonucu ve sonucun kullanıcı sorgusuyla nasıl ilişkilendirileceğini 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 sonucu tıklayıp tıklamayacağına karar vermesine yardımcı olur. Başlık bağlantıları ile snippet'in bir Google arama sonuçları sayfasında nasıl görünebileceğine dair iki örnek aşağıda verilmiştir:

Bu bilgi için, her sayfanın title ve meta etiketindeki açıklayıcı bilgiler dahil olmak üzere çeşitli kaynakları kullanırız.

Google'ın başlık ve snippet kurallarını uygulayarak sayfalarınız için görüntülenen başlık bağlantısı ve snippet'in kalitesini iyileştirmemize yardımcı olabilirsiniz.

Yapılandırılmış veriler ekleme

Yapılandırılmış veriler eklerseniz Google, görsellerinizi Google Görseller'de belirgin bir rozet ile birlikte belirli zengin sonuçlarda gösterebilir. Böylece, kullanıcılarınıza sayfanıza dair alakalı bilgiler sağlamış olursunuz ve sitenize daha iyi hedeflenmiş trafik çekebilirsiniz.

Yapılandırılmış veri türünüze özel kuralların yanı sıra genel yapılandırılmış veri kurallarını uygulayın. Aksi takdirde, yapılandırılmış verileriniz Google Görseller'de zengin sonuç görüntüsü için uygun bulunmayabilir. Bu yapılandırılmış veri türlerinin her birinde image (görsel) özelliği, Google Görseller'deki rozet ve zengin sonuca uygun olmak için zorunlu bir alandır. Zengin sonuçların Google Görseller'de nasıl görünebileceğine dair iki örnek aşağıda verilmiştir:

Açıklayıcı dosya adı, başlık ve alternatif metin kullanma

Google, görselin konusuyla ilgili bilgileri altyazılar ve görsel başlıkları dahil olmak üzere sayfanın içeriğinden çıkarır. Mümkün olduğunda, görsellerin alakalı metnin yakınına ve görselin konusuyla alakalı sayfalara yerleştirildiğinden emin olun.

Benzer şekilde, dosya adı da Google'a görselin konusuyla ilgili çok ufak ipuçları verebilir. Mümkün olduğunda, kısa ancak açıklayıcı dosya adları kullanın. Örneğin, dosya adı olarak IMG00023.JPG yerine my-new-black-kitten.jpg kullanmanız daha iyidir. Mümkün olduğunda image1.jpg, pic.gif, 1.jpg gibi genel dosya adları kullanmaktan kaçının. Sitenizde binlerce resim varsa resim adlandırmayı otomatikleştirme seçeneğini değerlendirebilirsiniz. Görsellerinizi yerelleştiriyorsanız Latin alfabesinde olmayan veya özel karakterler kullanmanız durumunda dosya adlarını çevirirken de URL kodlama yönergelerine uyduğunuzdan emin olun.

Bir görsel için daha fazla meta veri sağlama konusundaki en önemli özellik alternatif metindir (bir görseli açıklayan metin). Bu özellik, ekran okuyucu kullanan veya düşük bant genişliği olan bağlantılara sahip kullanıcılar da dahil olmak üzere web sayfalarındaki görselleri göremeyen kişiler için erişilebilirliği de artırır.

Google, görselin konusunu anlamak için alternatif metinle birlikte bilgisayar görüşü algoritmalarını ve sayfanın içeriğini kullanır. Ayrıca, bir görseli bağlantı olarak kullanmaya karar verirseniz görsellerdeki alternatif metin bağlantı metni olarak da kullanılabilir.

Alt metin yazarken, anahtar kelimeleri uygun şekilde kullanan ve sayfanın içeriği bağlamında yer alan, yararlı, bilgi bakımından zengin içerik oluşturmaya odaklanın. alt özelliklerini anahtar kelimelerle doldurmaktan (anahtar kelime doldurma olarak da bilinir) kaçının. Bu, negatif bir kullanıcı deneyimine yol açabilir ve sitenizin spam olarak görünmesine neden olabilir.

Kötü (eksik alternatif metin):

<img src="puppy.jpg"/>

Kötü (anahtar kelime doldurma):

<img src="puppy.jpg" alt="köpek yavrusu köpek bebek köpek yavru yavrular sevimli köpekler talaş yavrucuklar köpek retriever labrador av köpeği setter pointer yavru jack russell terrier yavrular köpek maması ucuz mama yavru köpek maması"/>

Daha iyi:

<img src="puppy.jpg" alt="köpek yavrusu"/>

En iyi:

<img src="puppy.jpg" alt="Dalmaçyalı yavru köpek atılanları getirme oyunu oyuyor"/>

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

<svg aria-labelledby="svgtitle1">
  <title id="svgtitle1">Googlebot wearing an apron and chef hat, struggling to make pancakes on the stovetop</title>
</svg>

Erişilebilirliği denetleyerek ve yavaş ağ bağlantısı emülatörü kullanarak içeriğinizi test etmenizi öneririz.

Google Görseller satır içi bağlantısını devre dışı bırakma

İsterseniz Google Görseller arama sonuçlarında satır içi bağlantıyı devre dışı bırakarak tam boyutlu görüntünün Google Görseller arama sonuçları sayfasında görünmesini engelleyebilirsiniz. Satır içi bağlantı oluşturmayı devre dışı bırakmak için:

1. Resminiz istendiğinde, istekteki HTTP yönlendiren üst bilgisini inceleyin.
2. İstek bir Google alanından geliyorsa 200 HTTP durum kodu veya 204 HTTP durum koduyla ve içerik olmadan yanıt verin.

Google sayfanızı taramaya devam eder ve resmi görür, ancak arama sonuçlarında tarama sırasında oluşturulan bir küçük resmi görüntüler. Web sitesinin resimlerinin yeniden işlenmesini gerektirmeyen bu devre dışı bırakma işlemini istediğiniz zaman gerçekleştirebilirsiniz. Bu davranış, resim gizleme olarak kabul edilmez ve manuel işlemlerle sonuçlanmaz.

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

Güvenli Arama için optimize etme

Google kullanıcı hesabındaki bir ayar olan Güvenli Arama, müstehcen görsellerin, videoların ve web sitelerinin Google Arama sonuçlarında gösterileceğini mi, bulanıklaştırılacağını mı yoksa engelleneceğini mi belirler. Gerektiğinde Güvenli Arama filtrelerinin sitenize uygulanabilmesi için Google'ın sitenizin yapısını anladığından emin olun. Güvenli Arama için sayfaları etiketleme hakkında daha fazla bilgi edinin.