Rich Snippets Nedir?

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çıklanabilir¹. 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 ².

<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ılmakta³. 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ı inceleyebilirsiniz⁴. Şimdide bir Blog yazısı için RDFa ve JSON-LD yapısına bakalım⁵. 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ı kullanabilirsiniz⁶.

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ı kullanabilirsiniz⁷. 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ır⁸. Ek olarak, anasayfa ve benzeri alanların, statik içeriklerin (hakkımızda, vizyon vb.) de Website olarak daha uygun olacağını düşünüyorum⁹ ¹⁰. Bu ve benzeri konulara dair aslında en mantıklı işleyip Full Hierarchy açıklamaları üzerinden ilerlemek olacaktır¹¹.

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örebilirsiniz⁷:

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.

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.

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 tanesi¹².