Schema.org aracına giriş

Çoğu web yöneticisi HTML etiketlerine aşinadır. Genellikle HTML etiketleri, etiket içindeki bilginin tarayıcıda nasıl görüntüleneceğini belirtir. Örneğin, <h1>Avatar</h1> etiketi, "Avatar" dizisinin birinci seviye başlık biçiminde görüntülenmesi gerektiği anlamına gelir. Ancak, HTML etiketi, o dizinin ne anlama geldiği hakkında herhangi bir bilgi vermez: "Avatar" büyük başarı elde eden 3D filme atıfta bulunabilir veya bir profil resmine atıfta bulunabilir. Bu, arama motorlarının bir kullanıcıya ilgili içeriği akıllıca görüntülemesini daha zor hale getirir.

Schema.org, web yöneticilerinin sayfalarını işaretlemek ve büyük arama motorları için anlaşılır hale getirmek için kullanabilecekleri ortak bir kelime dağarcığı sağlar: Yandex, Google ve Yahoo!

Schema.org kelime dağarcığı mikro veri ile kullanılır. Uzun vadeli hedef, desteklenen anlamsal işaretleme biçimlerinin listesini genişletmek olsa da, mikro veri ilk kullanılan biçimdir. Bu kılavuz, web sayfalarınıza işaretler eklemeye başlamanız için mikro veri ve schema.org ile hız kazanmanıza yardımcı olacaktır.

İçeriğinizi mikro veri kullanarak nasıl işaretlersiniz

Neden mikro veri kullanmalısınız?

Web sayfalarınız, insanlar onları okuduğunda anladıkları bir anlam taşır, ancak arama motorları tartışılan konuyu sınırlı bir şekilde anlar. Sayfalarınızın HTML koduna özel etiketler ekleyerek, "Hey, arama motoru, işte bir film (yer, kişi, video klip) tanımı" diyorsunuz. Bu şekilde, arama motorlarına ve diğer uygulamalara içeriğinizi daha iyi anlamalarına ve faydalı, ilgili bir şekilde görüntülemelerine yardımcı olabilirsiniz. Mikro veri, bunu yapmanıza olanak tanıyan HTML5 ile tanıtılan bir etiket kümesidir.

itemscope ve itemtype

Somut bir örnekle başlayalım. "Avatar" filmi hakkında bir sayfanız olduğunu hayal edin, film fragmanına bir bağlantı, yönetmen hakkında bilgi ve benzeri.

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

Öncelikle, sayfanın hangi bölümünün “Avatar” filmini tanımladığını belirtmeniz gerekir. Bunu yapmak için, bu bilgiyi içeren HTML etiketine itemscope özelliğini ekleyin:

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

itemscope ekleyerek, <div>...</div> bloğunda yer alan HTML kodunun bir varlığı tanımladığını belirtmiş oluruz.

Şu ana kadar sadece bir öğenin tartışıldığını belirttik, ancak ne tür bir öğe olduğunu belirtmedik. Öğe türünü, itemscope özelliğinin hemen ardından itemtype özelliğini kullanarak belirtebilirsiniz.

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

Bu, <div> etiketindeki varlığın bir film olduğunu (schema.org tür hiyerarşisinde "Movie" türü) belirtir. Öğe türleri URL olarak sağlanır, bu durumda http://schema.org/Movie.

itemprop

“Avatar” hakkında arama motorlarına hangi tür ek bilgiler sağlayabilirsiniz? Filmler, oyuncular, yönetmen ve derecelendirmeler gibi ilginç özelliklere sahiptir. Öğe özelliklerini etiketlemek için itemprop özelliğini kullanın. Örneğin, film yönetmenini belirtmek için yönetmenin adını içeren HTML etiketine itemprop="director" özelliğini ekleyin. (İşaretleyebileceğiniz film özelliklerinin tam listesi http://schema.org/Movie adresinde mevcuttur.)

<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">Bilim Kurgu</span>
    <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Fragman</a>
</div>

<span>...</span> etiketini, itemprop özelliğini sayfadaki ilgili metne bağlamak için eklediğimizi unutmayın. <span> etiketi, tarayıcıda sayfa görüntüsünü etkilemez, dolayısıyla itemprop ile kullanımı kolaydır.

Artık arama motorları sadece http://www.avatarmovie.com’un bir URL olduğunu değil, aynı zamanda James Cameron tarafından yönetilen "Avatar" bilim kurgu filminin fragmanının URL’si olduğunu da anlıyor.

Gömülü öğeler

Bazen bir öğe özelliğinin değeri, kendi özellik kümesine sahip başka bir öğe olabilir. Örneğin, film yönetmenini, name ve birthDate özelliklerine sahip Kişi türünde bir öğe olarak işaretleyebilirsiniz. Bir özelliğin değeri olarak bir öğeyi belirtmek için, itemprop sonrasında itemscope özelliğini ekleyin.

<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">Bilim Kurgu</span>
    <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Fragman</a>
</div>

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

Schema.org türleri ve özellikleri

Mikroveri kullanarak içeriğinizi nasıl işaretleyeceğiniz bölümünde bahsedilen Film ve Kişi türlerine ek olarak, schema.org her biri kendi özellik kümesine sahip çeşitli diğer öğe türlerini tanımlar.

En geniş öğe türü Thing olup, dört özelliği vardır: name, description, url ve image. Daha spesifik türler, daha geniş türlerle özellikleri paylaşır. Örneğin, Place Thing’in daha spesifik bir türüdür ve LocalBusiness Place’in daha spesifik bir türüdür. Daha spesifik öğeler, ebeveynlerinin özelliklerini devralır. (Aslında, bir LocalBusiness, Place’in daha spesifik bir türü ve Organization’ın daha spesifik bir türüdür, dolayısıyla her iki ebeveyn türünden de özellikleri devralır.)

İşte yaygın olarak kullanılan öğe türlerinden bir küme:

• CreativeWork, Book, Movie, MusicRecording, Recipe, TVSeries...

• Gömülü metin dışı nesneler: AudioObject (ses), ImageObject (görüntü), VideoObject (video)

• Etkinlik

• Kuruluş

• Kişi

• Place, LocalBusiness, Restaurant...

• Product, Offer, AggregateOffer

Tek bir sayfada öğe türlerinin tam listesine de bakın.

Beklenen türler, metin ve URL’ler

Web sayfalarınıza schema.org işaretlemeleri eklerken aklınızda bulundurmanız gereken birkaç öneri:

• Daha fazla, daha iyidir — gizli metin hariç. Ne kadar çok içeriği işaretlerseniz, o kadar iyi. Ancak, genel bir kural olarak, yalnızca kullanıcılar tarafından görülebilen içeriği işaretlemelisiniz, gizli <div> etiketlerinin veya diğer gizli sayfa öğelerinin içeriğini değil.

• Beklenen türler veya metin. Schema.org türlerini incelerken, birçok özelliğin sözde beklenen türlere sahip olduğunu fark edeceksiniz. Bu, özelliğin değerinin kendisinin gömülü bir öğe olabileceği anlamına gelir (bkz. Gömülü öğeler bölümü). Ancak bu bir gereklilik değildir — sadece normal metin veya bir URL eklemek de uygundur.

  Ek olarak, beklenen tür yerine bir alt tür kullanılabilir. Örneğin, beklenen tür Place ise, bir LocalBusiness gömmek de uygundur.

• url özelliğini kullanma. Bazı sayfalar tek bir varlığı tanımlamaya adanmıştır. Örneğin, bir kişiye ait bir web sayfanız olabilir ve bunu Kişi öğe türü ile işaretleyebilirsiniz. Diğerleri bir öğe koleksiyonuna sahiptir. Örneğin, şirket siteniz her kişi için bir profil sayfasına bağlantı içeren bir çalışan listesi sayfasına sahip olabilir. Bu tür birden fazla öğe içeren sayfalar için, her öğeyi ayrı ayrı işaretlemeli (bu durumda bir dizi Kişi) ve her öğe için ilgili sayfaya bağlantıya url özelliğini eklemelisiniz, şöyle:

  <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>
  

İşaretlemelerinizi test etme

Web tarayıcısının web sayfası düzeninizdeki değişiklikleri test etmek için önemli olduğu ve bir kod derleyicisinin yazdığınız kodu test etmek için önemli olduğu gibi, schema.org işaretlemelerinizi de test etmelisiniz. İşaretlemelerinizi test etmek ve hataları belirlemek için kullanabileceğiniz çevrimiçi birkaç araç vardır: Yandex tarafından Structured Data Validator, Google tarafından Rich Snippets Testing Tool, Structured Data Linter.

Gelişmiş konu: makine tarafından anlaşılabilir bilgi sürümleri

Birçok sayfa yalnızca itemscope, itemtype ve itemprop öznitelikleri (Mikroveri kullanarak içeriğinizi nasıl işaretleyeceğiniz bölümünde açıklanmıştır) ve schema.org türleri ve özellikleri (Schema.org sözlüğünü kullanma bölümünde açıklanmıştır) kullanılarak işaretlenebilir.

Ancak, bazen bir öğe özelliğini ek açıklama olmadan robotun anlaması zor olabilir. Bu bölüm, sayfalarınızı işaretlerken makine tarafından anlaşılabilir bilgi sürümlerini nasıl sağlayabileceğinizi açıklar.

Tarih, saat ve süre: <time> etiketi ve datetimeözniteliğini kullanın

Tarih ve saatlerin robotlar tarafından anlaşılması zor olabilir. Örneğin, “04/01/11” tarihi Ocak 11, 2004, Ocak 4, 2011, veya Nisan 1, 2011 mi? Bir tarihi belirsiz hale getirmek için datetime etiketi ile datetime özelliğini kullanın. datetime özelliğinin değeri, tarihin YYYY-AA-GG biçiminde olmasıdır. Aşağıdaki HTML kodu, tarihi Nisan 1, 2011 olarak açıkça belirtir:

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

Günün saati, ss:dd veya ss:dd:ss biçiminde, T ön eki ile ayarlanır. Saat, tarihin yanına belirtilebilir:

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

İşte 8 Mayıs 2011’de gerçekleşecek bir konseri tanımlayan bazı HTML. Etkinlik işaretlemesi, etkinliğin adını, bir açıklamayı ve etkinliğin tarihini içerir.

<div itemscope itemtype="http://schema.org/Event">
    <div itemprop="name">Spinal Tap</div>
    <span itemprop="description">Tüm zamanların en gürültülü gruplarından biri, unutulmaz bir iki günlük gösteri için yeniden bir araya gelecek.</span> Konser gerçekleşecek
    <time itemprop="startDate" datetime="2011-05-08T19:30">8 Mayıs’ta saat 19:30</time>
</div> 

Süreyi benzer şekilde, <time> etiketi ile datetime özelliğini kullanarak belirtebilirsiniz. Süre, P harfi ile ("dönem" anlamına gelir) ön eklendirilir. İşte 1,5 saatlik bir yemek pişirme süresini nasıl belirtebileceğiniz:

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

``Hsaat sayısını belirtmek için kullanılır veM dakika sayısını belirtmek için kullanılır.

Tarih, saat ve süre standartları, ISO 8601 tarih/saat standardı tarafından belirlenmiştir.

Numaralandırmalar ve kanonik referanslar: link etiketi ile hrefözelliğini kullanın

• Numaralandırmalar

  Bazı özellikler yalnızca sınırlı bir dizi olası değeri alabilir. Programcılar genellikle bunlara "numaralandırmalar" der. Örneğin, bir çevrimiçi mağaza, bir ürün teklifinin ayrıntılarını belirtmek için Offer öğe türünü kullanabilir. availability özelliği genellikle yalnızca birkaç olası değerden birine sahip olabilir: Stokta, Stokta yok, Ön sipariş gibi. Bir numaralandırma için olası değerler, schema.org varlık türlerine benzer şekilde URL’de belirtilebilir.

  İşte Offer türü ve ilgili özelliklerle işaretlenmiş bir satış öğesi:

  <div itemscope itemtype="http://schema.org/Offer">
      <span itemprop="name">Blend-O-Matic</span> <span itemprop="price">19,95 $</span>
      <span itemprop="availability">Şimdi çıktı!</span>
  </div> 
  

  Ve işte <link> ve href ile işaretlenmiş aynı teklif, bu da olası availability değerlerinden birini açıkça belirtmenizi sağlar:

  <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"/>Şimdi çıktı!
  </div>
  

  Schema.org, genellikle bir özellik için sınırlı sayıda tipik değer olduğunda, bir avuç özellik için numaralandırmalar sağlar. Bu durumda, availability için olası değerler ItemAvailability içinde listelenmiştir.

• Kanonik referanslar

  Bağlantılar genellikle <a> etiketi ile oluşturulur. Örneğin, “The Catcher in the Rye” kitabı hakkında Wikipedia sayfasına aşağıdaki bağlantı:

  <div itemscope itemtype="http://schema.org/Book">
      <span itemprop="name">The Catcher in the Rye</span> Yazar
      <span itemprop="author">J.D. Salinger</span>
      <a itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye">Wikipedia Sayfası</a>
  </div> 
  

  Gördüğünüz gibi, itemprop="url", aynı öğeyi tanımlayan başka bir sitedeki (bu durumda Wikipedia) bir sayfaya bağlantı belirtmek için kullanılabilir. Üçüncü taraf sitelere bağlantılar, arama motorlarının web sayfanızda tanımladığınız öğeyi daha iyi anlamalarına yardımcı olabilir.

  Kullanıcılara görünür bir bağlantı eklemek istemiyorsanız, aşağıda gösterildiği gibi <link> etiketini kullanın:

  <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" /> Yazar <span itemprop="author">J.D. Salinger</span>
  </div> 
  

Eksik veya örtük bilgi: <meta> etiketini contentözelliği ile kullanın

Bazen önemli bilgiler, sayfada göründüğü şekliyle işaretlenemez. Bilgi bir resimde (örneğin, 5 üzerinden 4 puanı temsil eden bir resim) veya bir Flash nesnesinde (örneğin, bir video klibin süresi) iletilebilir ya da sayfada açıkça belirtilmemiş olabilir (örneğin, bir fiyatın para birimi).

Bu durumlarda, <meta> etiketini content özelliği ile kullanabilirsiniz. Aşağıdaki örnekte resim 5 üzerinden 4 puanı 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" /> 25 değerlendirme
</div> 

İşte derecelendirme bilgisi işaretlenmiş haliyle örnek tekrar.

<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> değerlendirme
    </div>
</div>

Bu teknik dikkatli kullanılmalıdır. Bilgilerin başka bir şekilde işaretlenemediği durumlarda yalnızca <meta> etiketini content özelliği ile kullanın.

schema.org’u genişletme

Çoğu site ve organizasyonun schema.org’u genişletmek için bir nedeni olmayacaktır. Ancak, schema.org mevcut türlere ek özellikler veya alt türler belirtme yeteneği sunar. Bunu yapmakla ilgileniyorsanız, schema.org genişletme mekanizması hakkında daha fazla bilgi edinin.