Rich Snippets Nedir?
Rich Snippets (veya Schema.org işaretlemesi), zorunlu olmayan ancak arama motorlarına çeşitli tanımlı bilgiler iletilmesi sonucunda kullanıcıların arama deneyimini iyileştiren, Google başta olmak üzere Microsoft, Yahoo ve Yandex tarafından da desteklenen bir işaretleme (markup) standardıdır.
Rich Snippets bize şu faydaları sağlar:
- Arama motorları içeriği daha net bir şekilde değerlendirir ve bu sebeple siteyi daha alakası sorgularla ilişkilendirir.
- Kullanıcılar ilgili sonuçların aramalarıyla olan alaka düzeyini daha kolay tespit eder.
- Site sahipleri, sitelerini ziyaret eden kullanıcılara içerikle ilgili daha fazla ve zenginleştirilmiş detay sunabilir (puan, yorum sayısı vb.) ve bu sayede daha yüksek tıklama ve daha düşük hemen çıkma oranı elde edebilir.
Rich Snippets
Özetle, rich snippets, Schema.org tarafından paylaşılan bir dizi arama motorları tarafından anlamlı ifadenin ve bu ifadelerle tanımlanmış bilginin Microdata, RDFa ya da JSON-LD gibi formatlarda web sayfası içerisinde sunulması şeklinde açıklanabilir1. Google Search Console işlemleri içerisinde Yapısal Veri olarak da görmeniz mümkün. Bilindiği üzere genel olarak bir web sayfasında HTML etikerleri içerisinde bilginin nasıl görüntüleneceği / sunulacağı belirlenir. Örneğin <h1>Marka Adı</h1>
internet tarayıcısına Marka Adı‘nın nasıl görüntüleneceğini iletmiş olur. Ancak, HTML etiketi Marka Adı‘nın anlamsal ve işlevsel karşılığına hakim değildir. Kullanıcı ilgili kelimenin görüntülediği sayfa ile olan ilişkisine hakim iken arama motoru bu anlama karşılık bir değer oluşturamaz. İşte bu noktada Google, Microsoft, Yandex ve Yahoo tarafından da desteklenen type ve properties gibi ilgili Schema.org tanımlama setleri öne çıkmakta. Örnek olarak Google Merchandise Store altında satışta yer bulan Google Premium Bundle ürününü ve bu ürüne dair işaretlenmemiş kod bloğunu ele alabiliriz 2.
<div>
<!-- https://your.googlemerchandisestore.com/details/New%20in/GGL1446_Google%20Premium%20Bundle -->
<span>315</span>
<div>
<img alt="Photo of product" src="https://your.googlemerchandisestore.com/Images/Products/Large/GGL1446_Image 1_2979.JPG" />
<a href="https://your.googlemerchandisestore.com/details/New%20in/GGL1446_Google%20Premium%20Bundle">
<span>GGL1446</span>
</a>
<div>
<span>$54</span>
</div>...
<div>
...
</div>
</div>
</div>
Sırayla düzenleyelim o halde. İlk olarak Markup ile örneğimizi geliştirelim:
<div itemscope itemtype="http://schema.org/ItemList">
<link itemprop="url" href="https://your.googlemerchandisestore.com/details/New%20in/GGL1446_Google%20Premium%20Bundle" />
<span itemprop="numberOfItems">315</span>
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
<img alt="Photo of product" itemprop="image"
src="https://your.googlemerchandisestore.com/Images/Products/Large/GGL1446_Image 1_2979.JPG" />
<a itemprop="url" href="https://your.googlemerchandisestore.com/details/New%20in/GGL1446_Google%20Premium%20Bundle">
<span itemprop="name">GGL1446</span>
</a>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">$54</span>
</div>...
<div itemprop="itemListElement" itemtype="http://schema.org/Product">
...
</div>
</div>
</div>
RDFa
<div vocab="http://schema.org/" typeof="ItemList">
<link property="url" href="https://your.googlemerchandisestore.com/details/New%20in/GGL1446_Google%20Premium%20Bundle" />
<span property="numberOfItems">315</span>
<div property="itemListElement" typeof="Product">
<img property="image" alt="Photo of product"
src="https://your.googlemerchandisestore.com/Images/Products/Large/GGL1446_Image 1_2979.JPG" />
<a property="url" href="https://your.googlemerchandisestore.com/details/New%20in/GGL1446_Google%20Premium%20Bundle">
<span property="name">GGL1446</span>
</a>
<div property="offers" typeof="http://schema.org/Offer">
<meta property="schema:priceCurrency" content="USD">$
<meta property="schema:price" content="54">54
<link property="schema:itemCondition" href="http://schema.org/NewCondition">
</div>...
<div property="itemListElement" typeof="Product">
...
</div>
</div>
</div>
JSON-LD (ItemList)
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "ItemList",
"url": "https://your.googlemerchandisestore.com/details/New%20in/GGL1446_Google%20Premium%20Bundle",
"numberOfItems": "315",
"itemListElement": [{
"@type": "Product",
"image": "https://your.googlemerchandisestore.com/Images/Products/Large/GGL1446_Image 1_2979.JPG",
"url": "https://your.googlemerchandisestore.com/details/New%20in/GGL1446_Google%20Premium%20Bundle",
"name": "GGL1446"
},{
"@type": "Product",
"name": "..."
}
],
"offers": {
"@type": "Offer",
"price": "$54
}
}
</script>
Yukarıdaki örneklerde de göreceğiniz üzere Product tanımı için Product yapısına uygun property
seçenekleri olan numberOfItems
, itemListElement
, url
, image
, name
ve ek olarak Offer
kapsamında priceCurrency
, price
, itemCondition
tanımlamaları kullanılmakta3. Elbette kullanılabilecek seçenekler / tanımlamalar bunlarla sınırlı değil. schema.org/Product sayfasından tüm detayları görüntüleyebilirsiniz. Örnek bir kullanım için (film örneklemesi olarak) Schema.org tarafından paylaşılan Getting started with schema.org using Microdata sayfasını inceleyebilirsiniz4. Şimdide bir Blog yazısı için RDFa ve JSON-LD yapısına bakalım5. Ayrıca blog yazısı ile birlikte yayıncı ve yazar bilgilerini de belirtelim. Bu sayede çoklu bir yapıyı nasıl oluşturabileceğimizi görebiliriz.
<div itemscope itemtype="http://schema.org/Blog">
<!-- https://analytics.googleblog.com/2018/07/new-brand-new-home-mktg.html -->
<link itemprop="url" href="https://analytics.googleblog.com/2018/07/new-brand-new-home-mktg.html" />
<h2 itemprop="name"><a href="https://analytics.googleblog.com/2018/07/new-brand-new-home-mktg.html" itemprop="url">New brand, new home: Where to find Google Marketing Platform online</a></h2>
<article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
<span itemprop="headline">New brand, new home: Where to find Google Marketing Platform online</span>
<span itemprop="image" itemscope="itemscope" itemtype="http://schema.org/ImageObject">
<img alt="Photo of content" itemprop="image"
src="https://4.bp.blogspot.com/-ox6HqipEum8/W1fAfqh07uI/AAAAAAAADcI/pDTP-nymPRgII2-CldYBZ65-rE7Zg2RPwCLcBGAs/s640/GMP%2Bnew%2Bchannel%2Bannoucements%2Bheader.png" />
<meta content="https://4.bp.blogspot.com/-ox6HqipEum8/W1fAfqh07uI/AAAAAAAADcI/pDTP-nymPRgII2-CldYBZ65-rE7Zg2RPwCLcBGAs/s640/GMP%2Bnew%2Bchannel%2Bannoucements%2Bheader.png" itemprop="url" />
<meta content="700" itemprop="width" />
<meta content="463" itemprop="height" />
</span>
<span itemprop="datePublished">July 25, 2018</span>
<span itemprop="dateModified">July 28, 2018</span>
<div itemprop="description">...</div>
<div itemprop="mainEntityOfPage">...</div>
<span itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person">
<meta content="https://plus.google.com/116899029375914044550" itemprop="url" />
<meta content="Google Author" itemprop="name" />
</span>
<span itemprop="publisher" itemscope="itemscope" itemtype="http://schema.org/Organization">
<meta content="https://google.com" itemprop="url" />
<meta content="Google" itemprop="name" />
<span itemprop="logo" itemscope="itemscope" itemtype="http://schema.org/ImageObject">
<img alt="Logo" itemprop="image"
src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
<meta content="https://google.com/logo.png" itemprop="url" />
</span>
</span>
</article>
<span itemprop="keywords">kelime1, kelime2, kelime3...</span>
</div>
JSON-LD (Blog)
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Blog",
"keywords": "kelime1, kelime2, kelime3...",
"blogPosts": {
"@type": "BlogPosting",
"description": "...",
"headline": "New brand, new home: Where to find Google Marketing Platform online",
"mainEntityOfPage": "...",
"image": {
"@type": "ImageObject",
"url": "https://4.bp.blogspot.com/-ox6HqipEum8/W1fAfqh07uI/AAAAAAAADcI/pDTP-nymPRgII2-CldYBZ65-rE7Zg2RPwCLcBGAs/s640/GMP%2Bnew%2Bchannel%2Bannoucements%2Bheader.png",
"height": 463,
"width": 700
},
"datePublished": "2018-07-25",
"dateModified": "2018-07-28",
"author": {
"@type": "Person",
"name": "Google Author"
},
"publisher": {
"@type": "Organization",
"name": "Google",
"logo": {
"@type": "ImageObject",
"url": "https:/google.com/logo.png",
"width": 70
}
}
}
}
</script>
Yukarıdaki örnekleri ihtiyaçlarınıza uygun şekilde istediğiniz gibi geliştirebilirsiniz. Önemli olan tanımlı property ifadeleri kullanmanız. Geliştirmelerinizi URL üzerinden ve/veya doğrudan oluşturduğunuz kod bloğunu test gerçekleştirmek için Google Yapısal Veri Test Aracı’nı kullanabilirsiniz6.
![Google Veri Aracı Google Veri Aracı](https://ceaksan.com/tr/rich-snippets-nedir/google-veri-araci-rich-snippets_lbdrrr.jpg)
Ek olarak, yine Google Search Console vasıtasıyla otomatik bir şekilde veri işaretleme gerçekleştirebilir ve Google’a içerik alanı içerisinde alanların ne ifade ettiğini belirtebilirsiniz. Bu işlem için de Yapısal Veri İşaretleme Yardımcısı’nı kullanabilirsiniz7. Bu araçta da URL ve kod blokları kullanabilirsiniz.
Bu kodları (özellikle JSON-LD) Google Tag Manager vasıtasıyla da ekleyebileceğiniz gibi bir mantık kurabilirsiniz. Özellikle birkaç SEO etkinliğinde buna benzer ifadeler duydum. Bu durumda unutmamanız gereken bir arama motorunun web sayfanızı taramaya başladığında nasıl hareket ettiği olmalı. Google tarafından aktarılan bilgi bu yöntemin tavsiye edilmediği, mümkün olduğu kadar tanımlamaların sayfa yapısı içerisinde yapılması gerektiği yönünde.
Bu arada, blog yazılarında Article kullanımı da tercih edilebilir. Article referans / atıf içeren yazılar için daha doğru bir tercih olacaktır8. Ek olarak, anasayfa ve benzeri alanların, statik içeriklerin (hakkımızda, vizyon vb.) de Website olarak daha uygun olacağını düşünüyorum9 10. Bu ve benzeri konulara dair aslında en mantıklı işleyip Full Hierarchy açıklamaları üzerinden ilerlemek olacaktır11.
Neden Rich Snippets Kullanımı
Yazı içerisinde de sıklıkla belirttiğim gibi, arama motorlarının sitenizi daha iyi anlamlandırabilmesi için Rich Snippets kullanmanız yararınıza olacaktır. Çünkü, anlamlı bir içerik arama motoru sorgularında da avantajlı bir şekilde kullanıcılara sunulacaktır. Bu durum da elbette ziyaretçi sayınızı pozitif olarak etkileyecektir. Google tarafından geçerli bir kod bloğu oluşturmuş iseniz test aracıyla kontrol ederek öğrenebilirsiniz, içeriklerinizin bir süre sonra arama sorgularında şu örneklerdeki gibi listelendiğini görebilirsiniz7:
![Rich Snippets Rich Snippets](https://ceaksan.com/tr/rich-snippets-nedir/rich-snippets-arama-sorgulari_ww4scw.jpg)
Bu örnekte kullanıcı bildirimlerinin (yorum ve puan) sorgu altında yer aldığını görebilirsiniz. Bu amaçla Product içeriğinde comment property yapısı oluşturabilirsiniz.
![Google Search Rich Snippets Google Search Rich Snippets](https://ceaksan.com/tr/rich-snippets-nedir/google-search-rich-snippets_nruzrz.jpg)
Bu örnekte ise içeriğin genişletilmiş bir şekilde sorgularda listelendiğini görebilirsiniz. Öncelikli olarak değerlendirilen içerikler içerisinde yer alan liste (ol, ul), görsel (minimum 700px genişliğinde) ve tablolar bu şekilde sorgu sonuçlarına dahil edilebilmektedirler. Rich Snippets kullanımına dair daha pek çok örnek vermek mümkün.
Ayrıca önerebileceğim birkaç yazıyı aşağıda liste olarak iletiyorum.
- A Beginner’s Guide to Rich Snippets
- How To Add Schema And Rich Snippets In WordPress
- How To Get A 30% Increase In CTR With Structured Markup
- How to Make Your Content More Visible in Google with “Articles” Snippet
- How to generate rich snippets for your articles by implementing Schema.org mark-up
- 4 things you didn’t know about rich snippets
Son olarak, WordPress ve benzeri CMS sistemlerinde bu süreci yönetebileceğiniz ve kolaylıkla içeriğinize uygun tanımlamaları yapabileceğiniz eklentiler mevcut; Yoast bunlardan sadece bir tanesi12.
- Kavi Goel, Ramanathan V. Guha, Othar Hansson. (2009). Introducing Rich Snippets. Google Webmaster Central Blog ↩
- Google Premium Bundle. Google Merchandise Store ↩
- Thing > Product. Schema.org ↩
- Getting started with schema.org using Microdata. Schema.org ↩
- Thing > CreativeWork > Blog. Schema.org ↩
- Google Yapısal Veri Test Aracı ↩
- Yapısal Veri İşaretleme Yardımcısı ↩ ↩
- Thing > CreativeWork > Article. Schema.org ↩
- Thing > CreativeWork > WebSite. Schema.org ↩
- superhero. (2012). What microdata should I use for a blog? StackOverflow ↩
- Full Hierarchy. Schmea.org ↩
- Marieke van de Rakt. (2020). What are rich snippets? Yoast SEO ↩