schema.org

Az önce öğrendiğim ve öğrenmekte çok geç kaldığımı farkettiğim bir site: schema.org

En basit ifadeyle, arama motorlarının içeriklerimizi daha iyi okuyup ve daha iyi anlamlandırmasını sağlamaya çalışan kuralları belirliyor. Bu kuralları başta Google olmak üzere Bing, Yahoo, Yandex gibi büyük arama motorları geliştiriyor. schema.org da belirlenen etiketleri kullanarak, arama motorlarının işini kolaylaştırabiliriz. İşin güzel yanı HTML etiketleri yazmadan bir farkının olmaması.

<h1>Avatar</h1> Bu ifade tarayıcımız için “Avatar” isimli bi başlık demek. Ama bu başlık “Avatar”ın 3 boyutlu bir bilim kurgu filmi olduğuna dair bilgi içermemekte. Bu yüzden arama motorları kullanıcıya mantıklı ve detaylı bilgiler sunarken zorlanıyor.

örnek olarak web sayfanızda bir video olduğunu düşünelim. bu video ile ilgili sadece video ismi ve yanındaki benzer yazdığınız kelimeler indexlenecektir. arama sonuçları bunlara dayanarak yapılacaktır.

şimdi bu video örneğinizde, video içerisinde neler var, hangi oyuncular yer alıyorlar, hangi yılda yayınlandı, biçimleri konusunda bilgileri, resimleri vesaire gibi bilgileri verdiğinizde, arama motorları bu bilgileri işleyerek arama sonuçlarının üstlerinde yer almasını sağlayacak ve video hakkında verdiğiniz görselleri önizleme halinde gösterecek, haricen verdiğiniz oyuncu bilgisi, yılı gibi bilgileri özet halinde sunacaktır. –eksisozluk

schema.org daki dökümantasyon ile etiketleri nasıl kullanabileceğinizi ayrıntılı şekilde öğrenebiliriz. schema.org daki basit bir örneği paylaşıyorum:

Elimizde  Avatar filmine ait bazı bilgilerin olduğu web sayfamız olsun. Yönetmen, filmin türü ve fragman bilgileri mevcut.

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

İlk olarak Avatar hakkında bilgi verdiğimizi arama motoruna anlatmaya çalışarak başlayalım. Bunun için Avatar hakkında bilgi verdiğimiz alanı belirtiyoruz:

<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 bu <div>...</div> ler arasında belirli bir şey hakkında bilgi verdiğimizi açıkladık. Bu “şey” in aslında bir “film” olduğunu açıklayabiliriz.

<div itemscope itemtype="http://schema.org/Movie">
  <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>

Böylece burada bir film hakkında bilgi sunduğumuzu anlatmış olduk. Biraz daha bilgilerimizi detaylandırabiliriz. Filmin adını, yönetmenini, türünü ve bu filme ait bir fragmanın olduğunu açıklayalım:

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

itemprop özelliği ile sunduğumuz bilgiyi daha da zenginleştirebiliyoruz. Tabii ki itempropu kullanırken verdiğimiz değerleri http://schema.org/Movie den seçiyoruz. Artık Avatar filmi ve onun yönetmeni, türü, fragmanı bilgilerini sunduğumuzu arama motorları çok daha rahat anlayabilirler. Aslında fark ettiyseniz burada yönetmen hakkında da ekstra bilgi sunuyoruz: doğum tarihi ve yönetmenin adı gibi. Daha doğrusu burada “kişi” hakkında bilgi sunuyoruz.

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name"&g;Avatar</h1>
  <div itemprop="director" itemscope itemtype="http://schema.org/Person">
  Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span>
  </div>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

“Kişi” hakkında bilgi sunacağımızı açıklamak için itemscope ile başlayıp hemen ardından itemtype özelliğinin değerini http://schema.org/Person olarak belirledik. Daha http://schema.org/Person a ait itemprop değerleri ile bilgimizi anlamlandırdık.