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.
![Google arama sonuçlarında, görseller sekmesinde ve Keşfet'te görselleri gösteren bir resim](https://developers-dot-devsite-v2-prod.appspot.com/static/search/docs/images/images-on-google.png?authuser=6&hl=tr)
Aşağıdaki en iyi uygulamaları kullanarak görsellerinizi Google'ın arama sonuçlarında görünecek şekilde optimize edebilirsiniz:
- Görsellerinizi keşfetmemize ve dizine eklememize yardımcı olma
- 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, ve SVG
. 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:
![Görsel arama sonuçlarında başlıkları ve açıklamaları gösteren bir resim](https://developers-dot-devsite-v2-prod.appspot.com/static/search/docs/images/titles-descriptions-in-image-results.png?authuser=6&hl=tr)
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:
![Zengin sonuçların Google Görseller'de nasıl görünebileceğini gösteren bir resim](https://developers-dot-devsite-v2-prod.appspot.com/static/search/docs/images/structured-data-in-image-results.png?authuser=6&hl=tr)
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:
- Resminiz istendiğinde, istekteki HTTP yönlendiren üst bilgisini inceleyin.
-
İstek bir Google alanından geliyorsa
200
HTTP durum kodu veya204
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.