Webmaster

Schema.org'a giriş

Not. 

Bu belge, orijinal http://schema.org/docs/gs.html kullanım rehberinin bazı ufak eklerle yapılan bir çevirisidir.

HTML işaretlemesi, her webmasterın bildiği bir şeydir. HTML etiketleri genellikle etiketteki bilgiyi görüntüleme şekli konusunda web tarayıcısını bilgilendiren öğelerdir. Örneğin <h1>Avatar</h1> etiketi, “Avatar” satırını birinci düzey başlığı formatında görüntülemek gerektiğini ifade ediyor. HTML etiketi, bu satırın anlamsal değeri konusunda bilgi sağlamaz: Dolayısıyla satırın anlamsal değerini oluştıran “Avatar” sözcüğü aynı olasılıkla hem çok başarılı bir 3D filmi hem de bir kullanıcı hesabının parçası olan resim anlamına gelebilir. Doğal olarak gerekli ek bilgi sağlanmadıkça webde kullanıcı sorgularına uygun yanıtlar bulmak çok zordur.

Schema.org, webmasterların web sayfalarını Yandex, Google, Microsoft ve Yahoo! gibi popüler web arama motorlarında anlaşılır şekilde işaretleme için herkese açık ve kullanışlı bir "sözlük" sunar.

Schema.org sözlüğü, microdata formatlı mikro-verilerle birlikte kullanılır. Semantik işaretlemenin uzun vadeli gelişme amacı desteklenen formatlar listesinin genişlemesi yönünde olmakla birlikte mikro-veriler, semantik işaretleme işleminde ilk kullanılan format olmaya devam etmektedir. Bu kullanım rehberi sayesinde mikro-veriler ve schema.org'u kullanmayı öğrendikten sonra semantik işaretlemeyi web sayfalarınızda hemen kullanabileceksiniz.

Web içeriğini mikro-veriler kullanarak işaretleme şekli

Mikro-veriler ne işe yarar

Web sitenizdeki sayfaların içeriği, sayfaları ziyaret eden kullanıcılar için pek anlaşılır olsa dahi arama motorları için aynı şeyi söylemek mümkün değil. Web sayfalarınızın HTML koduna özel etiketler ekleyerek bir arama motoruna belli sayfada “tam olarak neden söz edildiğini (yani belirli bir bir film, bir yer, bir kişi veya bir müzik videosu vb.)” anlatıyor gibi olacaksınız. Sayfaya eklediğiniz işaretler, içeriğini arama motorları ve diğer uygulamalar için daha anlaşılır hale getirerek anılan uygulamalar tarafından daha uygun şekilde yansıtılmasını sağlar. HTML5'de kullanıma sunulan mikro-veri (microdata) etiketleri de bu amaçla kullanılır.

itemscope ve itemtype

Önce bir örnek verelim. “Avatar” filmi hakkında standart içerikli (filmin özeti, yönetmeni hakkında bilgi notu, fragman vb.) bir web sayfamız olduğunu farzedelim. Bunun HTML kodu şöyle görünebilir:

<div>
    <h1>Avatar</h1>
    <span>Yönetmen: James Cameron (16 Ağustos 1954 doğumlu)</span>
    <span>Bilimkurgu filmi</span> <a href="../movies/avatar-theatrical-trailer.html">Fragman</a> 
</div>

Önce “Avatar” filminin kendisiyle ilgili sayfa kısmını belirtmemiz gerekiyor. Bu amaçla film hakkındaki bilgiyi içeren HTML etiketine itemscope özniteliğini ekleyelim.

<div itemscope>
    <h1>Avatar</h1>
    <span>Yönetmen: James Cameron (16 Ağustos 1954doğumlu) </span>
    <span>Bilimkurgu filmi</span>
    <a href="../movies/avatar-theatrical-trailer.html">Fragman</a> 
</div>

itemscope'u ekleyerek <div>...</div> bloğunun içerdiği HTML kodunun bir varlığın özelliklerini açıkladığını işaretlemiş bulunuyoruz.

Fakat bu ana kadar o varlığın niteliklerini tam olarak belirtmeden sadece genel olarak bir tür varlıktan söz edildiğini açıkladık. O varlığın türünü belirtmek için itemscope'un hemen ardından itemtype özniteliğini de ekleyelim.

<div itemscope itemtype="http://schema.org/Movie">
    <h1>Avatar</h1>
    <span>Yönetmen: James Cameron (16 Ağustos 1954doğumlu) </span>
    <span>Bilimkurgu filmi</span>
    <a href="../movies/avatar-theatrical-trailer.html">Fragman</a> 
</div>

Bu şekilde tarifi <div> etiketinde bulunan varlığın bir film (schema.org türler hiyerarşisinde Movie türü) olduğunu açıklıyoruz. Tür isimleri URL şeklinde yazılır; böylelikle bizim örneğimizde ilgili tür ismi şöyle görünür: http://schema.org/Movie.

itemprop

“Avatar” filmi hakkında arama motorlarına başka ne tür ek bilgiler sağlayabiliriz? Aslında bu film hakkında, oynayan aktörler, yönetmen, reytinglerdeki durumu gibi birçok ilginç şey anlatılabilir. Varlığın özelliklerini belirtmek için itemprop özniteliğini kullanalım. Örneğin filmin yönetmenini belirtmek için onun ismini içeren HTML etiketine itemprop="director" özniteliğini ekleyelim. (Bir film için ekleyebileceğimiz özellik öğelerinin tam listesini http://schema.org/Movie sayfasında bulacaksınız.)

<div itemscope itemtype="http://schema.org/Movie">
    <h1 itemprop="name">Avatar</h1>
    <span>Yönetmen:
       <span itemprop="director">James Cameron</span>
       (16 Ağustos 1954 doğumlu)</span>
    <span itemprop="genre">Bilimkurgu filmi</span>
    <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Fragman</a>
</div>

NOT: itemprop özniteliğini sayfadaki istediğimiz metne bağlamak için ek bir <span>...</span> etiketi ekledik. <span> etiketi, sayfanın tarayıcıda görüntülenmesini etkilemediği için bunun itemprop'la beraber kullanılması uygun sayılır.

Eklediğimiz etiketler sayesinde arama motorları http://www.avatarmovie.com'un sadece bir web bağlantısı olduğunu değil, James Cameron filmi olan “Avatar”'ın fragmanına yönlendirdiğini de anlayabilecek.

İç varlıklar

Şimdi özellik değerinin bir varlık olarak kendine ait bir özellikler setine sahip olduğu durumlardan söz edelim. Örneğin bir film yönetmeni, Person türü bir varlık olarak tarif edilerek name (ad) ve birthDate (doğum tarihi) özellikleri sahibi algılanabilir. Bir özellik değerinin kendisinin bir varlık olduğunu işaretlemek istiyorsak ilgili bir itemprop'un hemen ardından bir itemscope özniteliğini eklememiz lazım.

 <div itemscope itemtype="http://schema.org/Movie">
    <h1 itemprop="name">Avatar</h1>
    <div itemprop="director" itemscope itemtype="http://schema.org/Person"> Yönetmen: <span itemprop="name">James Cameron</span>
    (<span itemprop="birthDate">16 Ağustos 1954</span> doğumlu)
    </div>
    <span itemprop="genre">Bilimkurgu filmi</span>
    <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Fragman</a> 
</div>

Schema.org sözlüğü kullanım şekli

Schema.org tür ve özelliklleri

Web içeriğini mikro-veriler kullanarak işaretleme şekli bölümünde sözü edilen Movie ve Person türleri, schema.org'un tarif ettiği ve her biri kendi birer özellikler setine sahip olan çok sayıda varlık türlerinden sadece ikisidir.

O varlık türlerinden en genel olan Thing (nesne) türünün 4 özelliği olabilir: name (isim), description (açıklama), url (bağlantı) ve image (resim). Daha spesifik özel türler daha genel türlerle ortak özelliklere sahip olabiliyorlar. Örneğin, Place (yer) türü, Thing türünün spesifik bir örneğidir. Benzer şekilde, LocalBusiness (yerel işletme) türü, Place türünün spesifik bir örneğidir. Spesifik (özel) türler öz üst türlerinin özelliklerini paylaşır. (Dahası, LocalBusiness türünün, hem Place türü için hem de Organization türü için spesifik bir örnek olarak algılanabildiği için ikisinin de özelliklerini paylaştığını göz önünde bulundurmak gerekir.)

Bazı popüler varlık türlerini sıralayalım:

Varlık türlerinin tam listesini tek sayfa olarak inceleyin.

Beklendik türler, metin ve URL

Schema.org aracılığıyla web sayfası işaretlemesini yaparken aşağıdaki kurallara uymanızı öneririz:

  • Web sayfanıı işaretlemeniz, görüntülenmesi için iyidir. Gizlenmiş metin hariç sayfa içeriğine ne kadar çok işaret etiketi koyarsanız o kadar iyi. Öte yandan, sayfadaki <div> tipi gizli etiketler ve diğer gizli öğeler gibi kullanıcıların görmeyeceği sayfa içeriği için işaretleme işlemi genellikle yapılmaz.

  • Beklendik türler veya metin. Schema.org türlerini inceleyecek olursanız bazı özelliklerin "beklendik türler"i olduğunu farkedersiniz. Bu demektir ki, bir özellik değeri aynı zamanda bir iç varlık olarak algılanabilir (bkz.: İç varlıklar bölümü). Fakat iç varlığı hiç eklemeden, sadece metin veya URL kullanarak gerekeni elde edebilmemiz de mümkün.

    Ayrıca, beklendik tür yerine alt tipin kullanılması da mümkündür. Örneğin, bir özelliğin beklendik türü olarak Place türü belirtildiyse LocalBusiness türlü bir iç varlık ekleyebiliriz.

  • url özelliğinin kullanımı. Belli bir kişinin şahsi bilgilerini içeren ve dolayısıyla Person varlık türüyle işaretlenebilen bir web sayfası gibi tek bir varlığın tarif edildiği sayfaların yanı sıra birden fazla varlığın tarif edildiği sayfalar da vardır. Kurumsal web sitenizdeki çalışanların şahsi kullanıcı hesaplarına yönlendiren bağlantılar içeren personel listesi sayfası, bu tür "çok varlıklı" sayfaların bir örneği sayılabilir. Bu tür toplayıcı sayfalarda bulunan her varlık teker teker işaretlenerek Person türlü varlıklar dizisi oluşturulur. Varlıkların her biriyle ilgili sayfalara yönlendiren bağlantılara birer url özelliği eklenir. Örneğin:

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

İşaretlemenin doğruluk kontrolü

Bir web tarayıcısı, bir web sayfasında yapılan düzenleme değişiklerinin kontrolü ya da bir derleyici kod kontrolü için kullanıldığı gibi, schema.org işaretlemesi de benzer şekilde kontrol işleminden geçirilmelidir. Yapılan işaretlemenin doğruluk kontrolü için internette birkaç tane farklı araç bulmak mümkündür. Bunların bazı örnekleri: Yandex mikroformat doğrulayıcısı, Google Rich Snippets Testing Tool, Structured Data Linter.

Ek: Makineyle okunabilir bilgi sürümü

Sayfaların birçoğunu sadece Web içeriğini mikro-veriler kullanarak işaretleme şekli bölümünde açıklaması yapılan itemscope, itemtype ve itemprop öznitelikleri ile Schema.org sözlüğü kullanım şekli bölümünde açıklanan schema.org tür ve özellikleri kullanılarak işaretlemek mümkün.

Fakat bazı durumlarda arama robotu, varlığın özelliklerini algılamakta zorluk çekebiliyor. Bu bölümde sayfa işaretlemesini makineyle okunabilir bilgiyle tamamlama yöntemleri açıklanıyor.

Tarih ve zaman: datetime öznitelikli <time> etiketini kullanın.

Arama robotları, tarih ve süreleri doğru algılamakta arada sırada hata yapabiliyorlar. Örneğin “04/01/11” şeklindeki tarih notunun doğru okunması hangisi: 11 Ocak 2004 mü, 4 Ocak 2011 mi yoksa 1 Nisan 2011 mi? Tarihi net olarak belirtmek için datetime özniteliğiyle <time> etiketini kullanmanız gerekir. datetime özniteliğinin doğru değeri: YYYY-MM-DD formatındaki tarih. Aşağıdaki bir HTML kodu 1 Nisan 2011 tarihini tam ve net belirtiyor:

<time datetime="2011-04-01">04/01/11</time>

Saat ve dakika olarak zamanı belirtmek için hh:mm ve hh:mm:ss formatlarından birini kullanmanız ve önüne T prefixini de koymanız gerekir. Tarih ve saati birlikte de koymanız mümkün:

<time datetime="2011-05-08T19:30">8 Mayıs, 19:30</time>

Bir örneği tam bir bağlamıyla inceleyelim: Örnek olarak 8 Mayıs 2011 günü gerçekleşecek bir müzik etkinliğini alalım. Event türü işaretleme etkinliğin adını, kısa açıklamasını ve yapılacağı tarihi içerir.

<div itemscope itemtype="http://schema.org/Event">
    <div itemprop="name">Spinal Tap</div>
    <span itemprop="description">Dünyanın önde gelen grupların biri 2 günlük muhteşem bir gösteri yapmak için tekrar birleşecek!</span> Konser tarihi: 
    <time itemprop="startDate" datetime="2011-05-08T19:30">8 Mayıs, 19:30</time> 
</div> 

Etkinliğin süresini net belirtmek için <time> etiketi ve datetime özniteliğini kullanmanız gerekir. Öznitelik değerini P prefixiyle tamamlanmalı (İng. "period", süre anlamına gelir). Bir yemek tarifini 1 saat 30 dakikalık pişirme süresi notuyla tamamlamak için şöyle yazabiliriz:

<time itemprop="cookTime" datetime="PT1H30M">1 ½ saat</time>

H harfi süreyi saatler olarak, M harfi ise dakikalar olarak belirtmek için kullanılır.

Tarih, zaman ve süre formatları ISO 8601 standardına uygundur.

Sıralamalar ve kanonik sayfalara yönlendirmeler için link etiketi ve href özniteliği kullanılır.

  • Sıralamalar

    Bazı özelliklerin olası değerler dizisi çok sınırlıdır. Programcılar bunlara sıralamalar derler. Örneğin bir internet mağazası, arzettiği ürünler yelpazesinin tarifi için Offer varlık türünü kullanabilir. Availability (mevcudiyet) özelliğinin de genellikle sadece birkaç adet olası değeri var: Bu olası değerler: In stock (var), Out of stock (yok), Pre-order (sipariş üzerine) vb. olabiliyor. Sıralanan özelliklerin değerlerini de schema.org varlık türlerine benzer şekilde URL olarak belirtmek mümkün.

    Mağazanın arzettiği ürünlerin Offer türlü bir varlık olarak işaretlemesi yapılan listesi şöyle görünüyor:

    <div itemscope itemtype="http://schema.org/Offer">
        <span itemprop="name">Blend-O-Matic</span> <span itemprop="price">$19.95</span>
        <span itemprop="availability">Satışlar başladı!</span> 
    </div> 

    Öbür taraftan, aynı ürünler listesini, <link> ve href'i kullanarak da işaretleyebiliriz. Böylelikle availability özelliğinin olası değerlerinden birini tam olarak belirtebiliriz:

    <div itemscope itemtype="http://schema.org/Offer">
        <span itemprop="name">Blend-O-Matic</span> <span itemprop="price">$19.95</span> 
        <link itemprop="availability" href="http://schema.org/InStock"/>Satışlar başladı! 
    </div>

    Schema.org, bir özelliğin az sayıda tipik değerler olduğu durumlarda az sayıda özellikler için bir olası değerler listesi sağlar. Böylelikle availability özelliğinin olası değerler ItemAvailability'de sıralanıyor.

  • Kanonik sayfalara yönlendiren bağlantılar

    Bir bağlantı kurmak için normalde kullanılan etiket <a> etiketidir. Tıpkı “Çavdar Tarlasında Çocuklar” romanının Vikipedi sayfasına yönlendiren bu bağlantıda kullanıldığı gibi:

    <div itemscope itemtype="http://schema.org/Book">
        <span itemprop="name">Çavdar Tarlasında Çocuklar</span> Yazan:
        <span itemprop="author">Jerome Salinger</span> 
        <a itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye">Vikipedi sayfası</a> 
    </div> 

    Gördüğünüz gibi itemprop="url" özniteliği, aynı varlığa adanmış başka bir siteye (bu durumda Vikipedi'ye) yönlendirme yapmak için kullanılabilir. Üçüncü taraf sitelere yapılan yönlendirmeler, arama motorlarının kendi sitenizde nelerden söz edildiğini daha net anlamalarını sağlayabiliyor.

    Kullanıcılar tarafından görülebilecek bir bağlantı eklemek istemediğinizde aşağıda gösterildiği gibi <link> etiketini kullanınız:

    <div itemscope itemtype="http://schema.org/Book">
        <span itemprop="name">Çavdar Tarlasında Çocuklar</span>
        <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" /> Yazan:     <span itemprop="author">Jerome Salinger</span> 
    </div> 

Eksik veya net olmayan bilgi için content öznitelikli <meta> etiketini kullanınız

Sayfada özel görüntülenme şeklinden dolayı (örneğin otel yıldızları gibi bir resim veya bir müzik videosu süresi gibi bir Flash nesnesi olarak görüntülendiği veya bir ürünün fiyatının belirtildiği para cinsi gibi kendinden anlaşılması nedeniyle hiç belirtilmediği durumlarda) önemli bilgilerin işaretlenmesi imkansız olduğu istisnai durumlar da olabilir.

Bu tür durumlar için content öznitelikli <meta> etiketinin kullanılması tavsiye edilebilir. Aşağıdaki örneğimiz bir ürünün 5 yıldızlı reytingde 4 yıldızlı durumunu ifade ediyor:

<div itemscope itemtype="http://schema.org/Offer">
    <span itemprop="name">Blend-O-Matic</span>
    <span itemprop="price">$19.95</span>
    <img src="four-stars.jpg" /> 25 yorum var
</div> 

Şimdi anılan reytinge dair bilginin işaretlenmiş olduğu aynı örneğimizi inceleyelim:

<div itemscope itemtype="http://schema.org/Offer">
    <span itemprop="name">Blend-O-Matic</span>
    <span itemprop="price">$19.95</span>
    <div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating">
        <img src="four-stars.jpg" /> <meta itemprop="ratingValue" content="4" /> <meta itemprop="bestRating" content="5" />
        <span itemprop="ratingCount">25</span> yorum var
    </div>
</div>

Genellikle istisnai durumlarda uygulanması önerilen bu yöntemin gereksiz yere kullanılmasını sakıncalı buluyoruz. Dolayısıyla sayfa içeriğinin başka yöntemlerle işaretlemesini yapabildiğiniz sürece content öznitelikli <meta> etiketini kullanmamanızı öneririz.

Schema.org'un genişlemesi

Site ve kuruluşların büyük çoğunluğu genellikle schema.org'da sunulan olanaklar yelpazesini daha da genişletmeye gerek duymaz. Fakat gerektiğinde bu olanaklar yelpazesini, yeni özellikler ve alt türler eklemek suretiyle daha da genişlemek mümkün. Buna gerek duyanlara, schema.org'u genişleme yöntemleri'ni incelemelerini öneririz.

Not. 

Kaynak: http://schema.org/docs/gs.html

© Google, Inc., Yahoo, Inc., Microsoft Corporation. 2011.

Metin, Creative Commons Attribution-ShareAlike License (sürüm 3.0) lisansı altında kullanılabilir.

Makaleyi değerlendirin
Geri bildiriminiz için teşekkür ederiz!