Schema.org Nedir ve Nasıl Kullanılır?

Schema.org Nedir ve Nasıl Kullanılır?

Atakan Yıldırım tarafından paylaşıldı.

Schema.org‘u kısacası açık kaynaklı ve tüm arama motorları ile uyumlu bir açık kaynak projesi olarak anlatabiliriz. Schema kullanımı HTML kod yazmak kadar basit ve işlevsel bir araçtır.

Örnek olarak webmasterlar sayfalarındaki HTML etiketlerini bilir. Yani nasıl kod yazılacağını, neye göre yazacaklarını ve HTML etiketlerinin ne işe yaradığını bilir.  Eğer bu HTML etiket terimini yeni duyuyorsanız, kısa bir bilgi vereyim. Bu etiketlerin amacı HTML kodlarını tarayıcıda çalıştırma biçimini belirlemektir. Örneğin, <h1> Avatar </h1>, tarayıcıya “Avatar” yazısının H1 (HEADER 1) olarak gösterilmesini sağlar. Genellikle H1 etiketleri büyüktür ve sayfanın başlığını belirler. Fakat bu sadece başlığın yazısını belirlemiş olur.

Schema Microdata ile bunu değiştiriyoruz. Schema ile arama motorlarına yeni bilgiler verebilir, arama motorlarının kullanıcılara da daha iyi bilgi vermesini sağlayabiliriz. Tabii bunlar karşılıklı olacak ve biz de haliyle yükseleceğiz. Mesela benim bir film sitem var ve film paylaşıyorum, bu filmleri izleyen kullanıcılar da yorum yapıyor. Arama motorları bu yazının bir film olduğunu anlamalı ve o film hakkında yapılan incelemeleri de anlayarak arama sonuçlarına bunu dahil etmeli. Ne kadar zor değil mi? Ama Schema etiketleri ile bu mümkün ve çok kolay.

Schema.org; Google, Microsoft Bing, Yandex ve Yahoo gibi büyük arama motorlarının anlayabilmesi için, Schema kodlarının bulunduğu web sayfalarında sözcük işaretlemesi yapar. Bu sayede arama motorları, o sayfada bulunan yazıların ne anlama geldiğini anlayarak arama sonuçlarında bazı değişiklikler yapar. Bu değişikliklere örnek verecek olursak, Google’nin son zamanlarda yaptığı ve arama sonuçları sayfasında çıkardığı “nedir” kutusudur. Örneğin Google’a “şeker nedir” yazdığınızda üstte büyük bir kutu çıkar ve şekerin ne olduğunu anlatan bir yazıyı bizimle paylaşır. Aynı şey Google’a soru sorrunca karşımıza çıkan cevap kutusu gibidir. SEO nedir derseniz yine aynı şekilde ilk sırada SEO hakkında bilgi veren bir kutucuk bulursunuz. Bu Google’nin yeni algoritması ile ilgilidir ve Schema ile mümkün olduğunun kanıtıdır. Google bu bilgileri kendisi değil, internet sitelerinden almaktadır.

Tabii arama motorları bilgileri çekmek için işaretlenmiş sözcüklere dikkat ederken, siz de kendi sitenizde Schema’yı kullanabilirsiniz.  Schema‘yı kullanarak hem arama motorlarının sayfanızı anlamasında, hem de üst sıralara çıkartmasında yardımcı olabilirsiniz.

Mikrodata (Mikro Veri) nasıl kullanılır?

Neden mikro veri kullanacağız?

İnsanlar web sitelerine girdiğinde ve bilgileri okuduğunda yeni bir şey öğrenir. Fakat arama motorları için bu mümkün değildir, çünkü arama motorları insan değildir ve yazınızı okuyarak herhangi bir şey anlayamaz. Fakat Schema mikrodatası kullanırsanız, arama motorları “Bu adamın web sitesinde bir çok film var ve bu filmleri inceleyen insanlar var.” olarak anlayabilir. Anladıklarını ise arama sonuçlarına dökerler. Kullanıcılar ise arama sonuçlarında yıldızlı incelemeleri ve filmin fragmanını öne çıkmış olarak gördüğünde sizin sitenizi tercih ederler.

Ayrıca bu veri etiketleri yeni nesil HTML5 ile de uyumlu olarak çalışır.

itemscope ve itemtype Etiketleri

Somut bir örnekle başlayalım. Avatar filmi ile ilgili bir sayfanızın olduğunu hayal edin. Bu filmin yönetmeni ve fragmanını paylaştığınızı düşünün. Aşağıdaki gibi bir kod web sitenizde oluşacaktır.

<div>
<h1>Avatar</h1>
<span>Yönetmen: James Cameron (born August 16, 1954)</span>
<span>Bilim kurgu</span>
<a href="../movies/avatar-theatrical-trailer.html">Fragman</a>
</div>

Başlamak için, bu sayfada bulunan filmin, film olduğunu anlatmamız gerekiyor. Film olduğunu anlatmadan önce bu sayfayı film tanıtan bir sayfa olmasını sağlamamız gerekiyor. Bunu yapmak için itemscope etiketini koda en başta olmak üzere ekleyin.

<div itemscope>
<h1>Avatar</h1>
<span>Director: James Cameron (born August 16, 1954) </span>
<span>Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

itemscope ekleyerek, <div> … </ div> aralığında olan HTML’nin belirli bir özelliği olduğunu belirtmiş olursunuz.
Şimdi ise vereceğimiz bilgiyi ayrıntılı olarak yazalım.

<div itemscope itemtype="http://schema.org/Movie">
<h1>Avatar</h1>
<span>Yönetmen: James Cameron (born August 16, 1954)</span>
<span>Bilim kurgu</span>
<a href="../movies/avatar-theatrical-trailer.html">Fragman</a>
</div>

Bu kodun en tepesinde itemtype="http://schema.org/Movie" olduğunu gördünüz. Bu kod, arama motorlarına bu sayfanın film içerikli bir sayfa olduğunu anlatıyor. Bu sayfayı görüntüleyen arama motorları http://schema.org/Movie adresinde ki özelliklere göre çalışacaktır.

itemprop

Arama motorlarına Avatar filmi hakkında ek bilgi verebilir miyiz? itemprop; yönetmen, oyuncular, derecelendirmeler gibi ilgi çekici özellikleri içeren bir etikettir. Bir öğenin özelliklerini belirlemek için itemprop etiketini kullanın. Örneğin, bir filmin yönetmenini belirlemek için, yönetmenin adını içeren öğeye itemprop = "director" etiketini ekleyin.  (http://schema.org/Movie adresinde bir filmle ilişkilendirebileceğiniz tüm özelliklerin tam listesi bulunuyor.)

Örnek bir film sayfası yapısı aşağıdaki gibidir.

<div itemscope itemtype ="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>Yönetmen: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
<span itemprop="genre">Bilim kurgu</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Fragman</a>
</div>

itemprop etiketlerini, sayfadaki uygun metne eklemek için ek olarak <span></span> etiketini kullanmanızı öneririz. <span> etiketleri, sayfaların bir web tarayıcısı tarafından oluşturulma şeklini değiştirmez, bu nedenle bu etiket, itemprop ile kullanılacak uygun bir HTML öğesidir.

Şimdi arama motorları, http://www.avatarmovie.com’un bir URL olduğunu değil aynı zamanda James Cameron tarafından yönetilen bilim kurgu filmi Avatar’ın web sitesinin URL’si olduğunu da anlayabiliyor.

Schema.org sözlüğünü kullanma

Schema sadece filmler için yapılmış bir araç değildir. Web siteleri ve bloglar, etkinlik düzenleyen web siteleri, müzikler, sözlükler, satış yapan yerler ve daha fazlası için yapılmıştır. Bunun için de http://schema.org/docs/full.html adresini kullanabilirsiniz.

Başlıca Schema terimleri

Yüzlerce terim var, fakat başlıcalarını öğrenirseniz gerisini anlamanız uzun sürmeyecektir. Aşağıdaki terimler de başlıca bunların başlıcalarıdır. Bu terimleri etiket olarak kullanırsanız arama motorları sitenizi daha iyi anlayacaktır.

itemprop="url" terimi ile, eklendiği a etiketinin, bir başka sayfaya yönlendirdiğini arama motorlarına gösterebilirsiniz.

<div itemscope itemtype="http://schema.org/Person">
<a href="bob.html" itemprop="url">Bob Smith</a>
</div>

datetime="2011-04-01" etiketi ile paylaşılan içeriğin ne zaman paylaşıldığını gösterebilirsiniz.

<time datetime="2011-05-08T19:30">May 8, 7:30pm</time>

itemprop="name" içeriğin adını göstermenizi sağlar.
itemprop="description" içeriğin açıklamasını göstermenizi sağlar.
itemprop="price" eğer satış yapıyorsanız, o içeriğin fiyatını gösterir.
itemprop="reviews" içerik hakkında yapılan incelemelerin olduğunu gösterir.
itemprop="bestRating" içeriğin alabileceği en yüksek inceleme puanını gösterir.
itemprop="ratingValue" içeriğin aldığı inceleme puanını gösterir.

Tabii ki bu kadar değil, tüm Schema terimlerini görmek için bu sayfayı ziyaret edebilirsiniz.

Google Yapısal Veri Test Aracı İle Yapılandırmak

Google Yapısal Veri Aracı ile web sayfanızı hızlıca yapılandırabilirsiniz. Google tarafından sunulan bu özellik, Schema verilerinin Google için ne kadar önemli olduğunu bir kez daha kanıtı oluyor.

Ayrıca buradan Google yapısal veri test aracının ayrıntılı açıklamasını okuyabilirsiniz.

Bu yazıyı beğendiniz mi? Diğerlerine de göz atın.