Schema Markup Nedir?
Schema veya schema markup olarakta karşımıza çıkan bu kavram; Google, Yandex, Bing ve Yahoo gibi arama motorlarının 2011 yılında beraber oluşturduğu bir ortak havuzu veya kütüphaneyi ifade etmektedir. Bu ortak havuza ait veriler daha doğrusu etiketler (tag) schema.org adresinde tutulmaktadır. Peki schema markup ne işe yarar? schema entegrasyonu, ilgili siteler tarafından kullanılması durumda, arama motorları botlarının web siteleri daha iyi yorumlamalarını sağlar.
Şöyle ki, bütün web siteleri arama motorlarında üst sıralarda yer almak isteyecektir. Bir sitenin üst sıralarda yer alması içinde arama motoru botları tarafından iyi yorumlanabilesi gerekmektedir. İşte tam bu noktada devreye schema.org sitesi girmektedir. Eğer web sitesi oluştururken schema.org sitesinde bulunan etiketlerden faydalanırsanız, bu durumda başta Google olmak üzere arama motorları sizin sayfanızı daha rahat yorumlayacak ve müteakiben siteniz üst sıralarda yer alacaktır.
ItemProp Nedir? Nasıl Kullanılır?
Itemprop kullanımına geçmeden önce konunun daha iyi anlaşılması için itemscope ve itemtype kullanımından bahsetmemiz daha uygun olacaktır. Herkesin rahatlıkla anlayabileceği bir örnek üzerinden konuyu açıklamaya çalışalım. Farz edelim ki bir web sitesi kurdunuz ve bu site, Avatar filmi, fragmanı, yönetmeni ve filme ait diğer konular hakkında bilgi veriyor. Bu durumda sitenizin kodu aşağıdakine benzer olacaktır;
<.div>
<.h1>Avatar
<.span>Director: James Cameron (born August 16, 1954)
<.span>Science fiction
<.a href="../movies/avatar-theatrical-trailer.html">Trailer
<./div>
Şimdide web sayfazının Avatar filmi hakkında bilgi verdiğini açıklayabilmek için itemscope elementini film hakkında bilgi içeren HTML’e ekleyeceğiz. Eklediğimizde elimizdeki HTML kod parçası aşağıdaki gibi olacaktır.
<.div itemscope>
<.h1>Avatar
<.span>Director: James Cameron (born August 16, 1954)
<.span>Science fiction
<.a href="../movies/avatar-theatrical-trailer.html">Trailer
<./div>
Aslında burada, itemscope ekleyerek <.div>... bloğu arasında bulunan HTML kodlarının, özel bir konu (item) hakkında bilgi verdiğini belirtmiş oluyorsunuz. Bu noktadan sonra ilgili konunun daha ayrıntılı olarak neyi ifade ettiğinide belirtmeniz gerekebilir. Bu noktada yardımımıza itemtype yetişmektedir. Itemscope’tan sonra özellikle konunun niteliğini veya türünü belirtmek için itemtype kullanabilirsiniz.
<.div itemscope itemtype="http://schema.org/Movie">
<.h1>Avatar
<.span>Director: James Cameron (born August 16, 1954)
<.span>Science fiction
<.a href="../movies/avatar-theatrical-trailer.html">Trailer
<./div>
Tıpkı schema.org tür hiyerarşisinde tanımlandığı gibi yukarıdaki kod, div arasıda bulunan konunun bir film olduğunu belirtmektedir. Item türleri URL linkleri olarak tanımlanır. Yukarıdaki örnekte şu şekilde verilmiştir ; http://schema.org/Movie
On Yazılım olarak yapısal veri işaretleme konusunun SEO açısından öneminin fazlasıyla farkındayız. Sizde ayrıntılara dikkat eden uzman bir ekip arıyorsanız SEO Hizmeti sayfamızı https://www.onyazilim.com/arama-motoru-optimizasyonu-seo-hizmeti inceleyebilirsiniz.
Evet, şimdi itemprop kullanımından bahsedebiliriz. Sizce Avatar filmi hakkında arama motorlarına başka hangi bilgileri verebiliriz ? Örneğin bahsettiğimiz filmin aktörleri, almış olduğu rating veya yönetmeni gibi konularda da bilgi verebilir miyiz? İşte bu nitelikleri belirtmek için itemprop özelliğini kullanabiliriz. Örneğin filmin yapımcısını tanımlamak için itemprop=”director” kodunu yapımcının ismini içeren bölme ekleyebilriz. (Diyelim ki film hakkında bilgi veren bir siteniz var, bu durumda ekleyebileceğiniz film etiketleri için tıklayınız : http://schema.org/Movie )
<.div itemscope itemtype ="http://schema.org/Movie">
<.h1 itemprop="name">Avatar
<.span>Director: itemprop="director">James Cameron (born August 16, 1954)
<.span itemprop="genre">Science fiction
<.a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer
<./div>
Şunu belirtelim ki itemprop özeliğini sayfada uygun yere yerleştirebilmek için fazladan <.span>... etiketini ekledik. kodları sayfanın tarayıcılar tarafından işlenmesinde bir değişikliğe sebebiyet vermez. O yüzden <.span> kodlarını itemprop özelliği ile beraber kullanılanabilen uygun HTML elementleri olarak değerlendirmek yanlış olmayacaktır.
Artık yapmış olduğumuz eklemeler sayesinde arama motorları sadece http://www.avatarmovie.com ifadesinin bir URL olduğunu değil aynı zamanda, bu filmin bir bilim kurgu filmi, isminin Avatar ve yönetmeninin ise James Cameron olduğunu anlayacaklardır.
Schema Etiket Kullanımı Nasıl Yapılır? Örnekleri Nelerdir?
Makalemizin devamında bazı schema etiketlerinin nasıl kod içerisinde kullanılması gerektiğini açıklamaya çalışacağız. Bazı web siteleri özel bir konu hakkında olabilir. Örneğin, bir kişi hakkında bir site yapabilir ve bu sitede Person türünü kullanabilirsiniz. Yada şirketinizin bir web sayfası vardır ve bu sayfa bir çok çalışana ilişkin bilgiler barındırıyordur. Bu gibi durumlarda her öğeyi ayrı bir URL ile işaretlemeniz gerekir. Biz örneğimizde Person etiketini kullanarak bunu gerçekleştireceğiz. Örnek kod aşağıda olduğu gibidir.
<.div itemscope itemtype="http://schema.org/Person">
<.a href="alice.html" itemprop="url">Alice Jones
<./div>
<.div itemscope itemtype="http://schema.org/Person">
<.a href="bob.html" itemprop="url">Bob Smith
<./div>
Zaman (time) etiketinin kullanılması:
Özellikle zaman ve tarihler makinalar tarafından anlaşılması zor hususlardır. Örneğin 04/01/11 tarihi neyi göstermektedir? 11 Ocak 2004 tarihini mi, yoksa 2011 Nisan ayının ilk gününü mü göstermektedir? işte bu karmaşanın önüne geçmek için time etiketini, datetime niteliği ile birlikte kullanabilirsiniz. datetime niteliği YYYY-MM-DD formatından oluşan bir tarihi ifade etmektedir. Müteakip HTML kod parçası kesin olarak 1 Nisan 2011 tarihini belirtmektedir.
<.time datetime="2011-04-01">04/01/11
Ayrıca, hh:mm veya hh:mm:ss formatlarını kullanarak gün içerisindeki belli bir saatide belirtebilirsiniz. Burada belirteceğiniz saatHTML kodunda “T” ifadesinden sonra yer almalıdır.
<.time datetime="2011-05-08T19:30">May 8, 7:30pm
Şimdiki kod örneğimizde biraz daha konuyu ayrıntılı hale getirip zamanıda beraberinde vermeye çalışalım. Müteakip HTML kodu, 8 Mayıs 2011 tarihinde gerçekleşen konsere ait isim, olay ve tarih bilgisi içermektedir.
<.div itemscope itemtype="http://schema.org/Event">
<.div itemprop="name">Spinal Tap<./div>
<.span itemprop="description">One of the loudest bands ever
reunites for an unforgettable two-day show.<./span>
Event date:
<.time itemprop="startDate" datetime="2011-05-08T19:30">May 8, 7:30pm<./time>
<./div>
Son olarak sürelerde time ve datetime niteliklerine ek olarak kullanılabilir. Süreler “P” (period) ile eklenerek gösterilir. Müteakip kodda bir yemek tarifinin pişme süresi saatin ½ olarak gösterilmektedir.
<.time itemprop="cookTime" datetime="PT1H30M">1 1/2 hrs
WEB Tasarım hizmeti almadan önce tercih edeceğiniz alt yapının yapısal veri işaretleme özelliklerini desteklemesi önemlidir. https://www.onyazilim.com/web-tasarim sayfasını inceleyerek On Yazılım web tasarım hizmeti hakkında bilgi edinebilirsiniz.
Enumarations (Sayılar) kullanımı:
Bazı nitelikler sadece bir kaç değer alabilmektedir. Programcılar bu tür nitelikleri genelde “enumaration” olarak adlandırırlar. Örneğin satış yapan bir mağaza satmakta olduğu ürün ile ilgili durum bilgisi vermek için Offer öğesini kullanmaktadır. Bu durumda availability niteliği sadece şu seçeneklerden birini alabilir ; in stock (stokta), out of stock (stok tükendi), Pre-order (Ön sipariş). Schema.org yapısı gereği bu tür nitelikler, URL kullanılarakta ifade edilebilir.
Aşağıda Offer türü ile işaretlenen satılık bir ürün örneği bulunmaktadır.
<.div itemscope itemtype="http://schema.org/Offer">
<.span itemprop="name">Blend-O-Matic<./span>
<.span itemprop="price">$19.95<./span>
<.span itemprop="availability">Available today!<./span>
<./div>
Aşağıda bulunan HTML kodu ise aynı ürünün link ve href öğeleri kullanılarak belirtilmiş halidir.
<.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"/>Available today!
<./div>
schema.org bir çok özellik için enumarations değerleri sağlamaktadır.
Referans bilgileri kullanımı :
Linkler genellikle elementi kullanılarak belirtilir. Müteakip kod, Catcher in the Rye isimli kitabın “Wikipedia” web sayfasına giden HTML linkini içerektedir.
<.div itemscope itemtype="http://schema.org/Book">
<.span itemprop="name">The Catcher in the Rye<./span>—
by <.span itemprop="author">J.D. Salinger<./span>
Here is the book's itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye">Wikipedia page<./a>.
<./div>
Farkettiğiniz gib itemprop=”url” niteliği başka bir sitede bulunan sayfaya atıf yapmak için kullanılabilir. Örneğimizde bu site Wikipedia’dır. Diğer sitelere bağlantı yaptığınız linkler sayesinde arama motorları sizin web sayfanızın içeriğini daha rahat okuyabilirler. Bununla birlikte bazen açık açık bir link bağlantısı paylaşmak istemeyebilirsiniz. Bu durumda link elementini müteakip kodlarda olduğu gib kullanabilirsiniz.
<.div itemscope itemtype="http://schema.org/Book">
<.span itemprop="name">The Catcher in the Rye<./span>—
<.link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
by <.span itemprop="author">J.D. Salinger<./span>
<./div>
Meta etiket ve content öğesi ile kullanımı :
Bazen web sayfanız işaretlenmeye değecek bilgiler içerebilir fakat bu bilgilerin sayfanızda görülme seklinden dolayı işaretlenmesi pek mümkün olmayabilir. Bilgi bir resim aracılığı ile ifade edilmiş olabilir. Örneğin 5 yıldız üzerinden 4 yıldız alındığını gösteren değerlendirme (rating) çizelgesi gibi. Veya Flash nesne olan bir videonun toplam süresi gibi. Yada net bir şekide ifade edikmek istenmeyen bir nitelik olabilir. Örneğin bir ürün fiyatının para birimi gibi.
Bu gibi durumlarda meta etiketini content ile beraber kullanabilirsiniz. Müteakip HTML kod parçası 5 yıldızlı değerlendirmeden 4 yıldız alındığını göstermektedir.
<.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" />
Based on 25 user ratings
<./div>
Aşağıdaki kod ise değerlendirmenin (rating) işaretlendiği HTML kod parçasdır.
<.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" />
Based on itemprop="ratingCount">25<./span> user ratings
<./div>
<./div>
meta etiketini sadece başka türlü işaretlenme şansı olmayan bilgiler için kullanınız.
Daha fazla bilgi edinmek ve On Yazılım avantajlarından faydalanmak için hemen https://www.onyazilim.com/on-yazilim-iletisim sayfamızdan bize ulaşabilirsiniz.
Kaynaklar:
https://schema.org/docs/gs.html
_1226.jpg)
