Eyl.26

Semantic Web – Microdata

Microdata’ların, itemscope, itemtype ve itemprop attribute’leri ile tanımlandığını ve bunların da birer değer aldığından önceki makalelerimizde bahsetmiştik. Peki, bu değerler ne anlama gelir?

itemscope

Microformats2’de kök element içinde kullanmış olduğumuz class tanımı ile aynıdır. Yalnız itemscope yalın bir attribute’dür, herhangi bir değer almaz. Sadece kök element olduğunu belirtir. itemtype ile birlikte kullanılır.

<div itemscope … >
</div>

itemtype

Kök element içinde itemscope tanımlanırken, o kök bloğun içeriğinin ne olduğunu da belirtmemiz gerekir. Ne olduğunu da aşağıda yer alan referans adreste yer alan içerikte görebilirsiniz.

http://schema.org/docs/full.html

Mesela bir oyun içerikli web sayfanız var ve yeni çıkan oyunları tanıtıyorsunuz. Oyunu tanıttığınız makalenin kök bloğunu şu şekilde tanımlamanız gerekir.

<div itemscope itemtype=”http://schema.org/VideoGame” >
</div>

Biraz tuhaf gelmiş olabilir, ancak itemtype’ın değerleri birer şemadır ve bu şema referansı da schema.org adresinden alınır. Örneğimizde video oyun makalesini tanımlamak için VideoGame türü seçildi.

Daha fazla itemtype’ı görmek için sayfayı ziyaret edin ve her biri için yapılmış olan örnekleri de inceleyin.

Mesela oyunun ismini yazalım. İsim için name olarak itemtype’ı kullanabiliriz.

<div itemscope itemtype=”http://schema.org/VideoGame” >
    <h1 itemtype=”name”>Need for Speed 8</h1>
</div>

itemprop

Kök element bloğu içinde yer alan alt elementleri tanımlamak için kullanılır. Her birinin semantic anlamda ne tür bilgi içerdiğini belirtmek için kullanılır.

Kök, yani itemscope için seçtiğiniz türün linkine girdiğinizde (scheme.org’da), açılan sayfada ne gibi itemprop’lar kullanacağınızı açıklamaları ile birlikte bulabilirsiniz. Mesela yine VideoGame için aşağıdaki şekilde görüldüğü gibi uzunca bir liste ile karşılaşacaksınız.

Örnek Uygulama

Şimdi, microdata’nın microformats’tan farkını ve nasıl kullanıldığını örneklerle inceleyelim…

• Article

Makale tanımlamak için kullanılan Microdata türüdür. İlk olarak normal HTML5 ile kodlayalım.

Normal HTML ile:

<div>
  <h1>Semantic Web Nedir?</h1>
  <h4><em>Yazar : Uğur GELİŞKEN</em></h4>
  <p>Yazılan etiketler bir anlam kazanmalı. Böylelikle arama motorları veya diğer başka bir site ile etkileşim sırasında, web sayfasındaki içeriği ne anlama geldiği anlaşılabilir olsun. </p>
  <small>Yayınlanma Tarihi : 12.05.1931</small>
  <br>
  <small>Bu içerik 70 defa yorumlandı.</small>
</div>

Şimdi de Microdata ile birlikte kodlayalım.

Semantic HTML ile:

<div itemscope itemtype="http://schema.org/Article" >
  <h1 itemprop="name" >Semantic Web Nedir?</h1>
  <h4><em>Yazar : <span itemprop="author" >Uğur GELİŞKEN</span></em></h4>
  <p itemprop="articleBody" >Yazılan etiketler bir anlam kazanmalı. Böylelikle arama motorları veya diğer başka bir site ile etkileşim sırasında, web sayfasındaki içeriği ne anlama geldiği anlaşılabilir olsun.</p>
  <small >Yayınlanma Tarihi : <span itemprop="datePublished" > 12.05.1931</span></small>
  <br>
  <small>Bu içerik <span itemprop="commentCount" >70</span> defa yorumlandı.</small>
</div>

Kök div içinde itemscope ve itemtype’ı tanımladık. Bir makale olduğu için Article türünü seçtik. İç kısımda da bazı metinleri span ile satır kaydırmadan etiket içine alıp itemprop’larını tanımladık.

Makalenin ismi: HTML5 ve HTML5 API’leri – name
Makalenin yazarı: Uğur GELİŞKEN – author
Makalenin içeriği: Bilişim – articleBody
Makalenin dağıtım tarihi: Türkçe – datePublished
Makalenin kaç defa yorumlandığı: 2017 – commentCount

• Book

Kitap tanımlamak için kullanılan Microdata türüdür. İlk olarak normal HTML5 ile kodlayalım.

Normal HTML ile:

<div>
  <p>
    <strong>HTML5 ve HTML5 API'leri </strong> isimli kitap Bilişim alanında Türkçe olarak Uğur GELİŞKEN tarafından yazıldı (2017)
  </p>
  <p>
    Yazarın daha önceki kitapları:
  </p>
  <ul>
    <li>Web Tasarımı ve Web Programlama</li>
    <li>Bootstrap 4 ve Responsive Tasarım Teknikleri</li>
    <li>Mobil Oyun Tasarımı ve Programlama</li>
  </ul>
</div>

Semantic HTML ile:

<div itemscope itemtype="http://schema.org/Book" >
  <p>
    <link itemprop="about" href="https://ugurgelisken.com/portfolio/html5-kitap/">
    <strong itemprop="name" >HTML5 ve HTML5 API'leri </strong> isimli kitap <span itemprop="genre" >Bilişim</span> alanında <meta itemprop="inLanguage" content="tr"/> Türkçe olarak <span itemprop="author" itemscope itemtype="http://schema.org/Person" >
    Uğur GELİŞKEN</span> tarafından yazıldı (<span itemprop="copyrightYear" > 2017 </span>)
  </p>
  <p>
    Yazarın daha önceki kitapları:
  </p>
  <ul>
    <li itemprop="hasPart" >Web Tasarımı ve Web Programlama</li>
    <li itemprop="hasPart" >Bootstrap 4 ve Responsive Tasarım Teknikleri</li>
    <li itemprop="hasPart" >Mobil Oyun Tasarımı ve Programlama</li>
  </ul>
</div>

Burada dikkatinizi çektiyse 2 adet itemScope kullandık. Birincisi, asıl kök olan Book’u temsil ediyor ve div içinde kullandık. İkinci olan da kitabın yazarını belirtmek için Person’dur.

Tek satır cümlede satır atlamaları yapmamak için span etiketinden faydalanarak istediğimiz anlamsal içeriklere itemtype değerlerini girdik.

Kitabın ismi: HTML5 ve HTML5 API’leri – name
Kitabın yazarı: Uğur GELİŞKEN – author
Kitabın türü: Bilişim – genre
Kitabın dili: Türkçe – inLanguage ()
Kitabın basım yılı: 2017 -copyrightYear
Diğer benzer kitaplar: Web Tasarımı ve Web Programlama, Bootstrap 4 ve Responsive Tasarım Teknikleri, Mobil Oyun Tasarımı ve Programlama – haspart

Ek olarak kitabın ilgili sayfasını belirtmek için şöyle bir etiketini araya sıkıştırdık.

<link itemprop="about" href="https://ugurgelisken.com/portfolio/html5-kitap/">
İçeriği paylaş:
  • facebook
  • twitter

Leave a comment

Yorum