Tem.20

Semantic Web – Microformats ve Microformats2

Bir önceki makalemiz olan Semantic Web – Microformats2 ve Microdata‘ten devam ediyoruz.

hCalendar (Organizasyon)

Öncelikle düz bir şekilde HTML kodumuzu yazalım…

<p>2017 HTML5 Semineri Başlıyor! 01.07.2017 tarihinde 205. sınıfta ( Marmara Üniversitesi / İSTANBUL ).</p>

Gördüğünüz gibi basitçe bir etkinlikten bahsediliyor. Etkinliğin ismi, tarihi ve nerede olacağı belirtilmiş. Bize anlamlı geliyor ama bir arama motoru için anlamı var mı, pek yok. Şimdi anlamlı hale getirelim.

<span class="vevent">
 <span class="summary">2017 HTML5 Semineri Başlıyor!</span>
 <span class="dtstart">01.07.2017</span> tarihinde 205. sınıfta <span class="location">( Marmara Üniversitesi / İSTANBUL )</span>.
</span>

Evet, basitçe tek bir satırda yazmak varken işimizi zorlaştırdık ve her bir bilgiyi parçalara ayırdık. Ayırdığımız bilgileri de class ile tanımladık.

İlk olarak bir kök span oluşturduk ve class’ına vevent verdik (Tuhaftır, vcalendar olmasını beklerdim ama vevent olarak yapmışlar. Sebebi de microdata2’de vCalendar’ın vEvents olarak yeniden isimlendirilmesidir. Referansları inceleyince detayları göreceksiniz). Böylece bu kök içinde yer alan özelliklerin de bir etkinliğe ait olacağı belirtiliyor.

Her bir içerik de yine ayrı yerine h1, p gibi etiketler de kullanabilirsiniz.

Özet bilgisi summary ile belirtiliyor. Başlangıç tarihi de dtstart ile belirtiliyor. Yer de location ile belirtilmiş. Arama motoru bu içeriğe baktığında etkinliğin adını, başlama tarihini ve yerini anında algılayabilecektir.

Tanımlayabileceğiniz ekstra mikro formatları, referans listesinden göre bilirsiniz. Mesela vEvents için aşağıdaki sayfaya girip listeyi inceleyebilirsiniz;

http://microformats.org/profile/hcalendar

hCard (İnsan, Etkinlik ve Lokasyon)

hCard, microformats2’de h-card olarak ele alınır.

İlk olarak bir insan bilgisi tanımlayalım. Örneğimizde bir kişinin ismi olsun ve isme tıklanınca web sayfasına gitsin.

<a href="http://www.ugurgelisken.com">Uğur GELİŞKEN</a>

Oldukça basit bir link komutu… Biz bunu anlıyoruz, ancak arama motorları bunun bir kişiye ait web sayfasını olduğunu nasıl anlayacak? Hemen anlatalım.

<a class=”h-card” href="http://www.ugurgelisken.com">Uğur GELİŞKEN</a>

İşte bu kadar basit! Google veya başka bir arama motoru bu linki gördüğünde hemen Uğur GELİŞKEN adlı kişiye ait web sayfasına giden link olduğunu bilebilecek.

Bir de etkinlik tanımlayalım… Bunu da v-event ile tanımlayacağız.

<div class="h-event">
  <h4 class="p-name">HTML5 Etkinliği</h4>
  <p> 
    <time class="dt-start" datetime="01-07-2017 12:00">1 Temmuz 2017, saat 12:00'den</time>
    <time class="dt-end" datetime="01-07-2017 17:00">saat 17:00'ye kadar</time>
    <span class="p-location">205 A Blok'ta.</span>
  </p>
  <p class="p-summary">HTML5'in genel yapısı ve API kullanımları anlatılacak. Eğitmen Uğur GELİŞKEN</p>
  <p>Detaylar <span class="u-url">www.ugurgelisken.com/html5-etkinliği/</span> adresinde yer almaktadır.</p>
</div>

Yine aynı mantıkla bir kök elementimiz var ve bunda h-event tanımlanıyor. p-name ile etkinliğin ismi, dt-start ile başlama tarihi, dt-end bitiş tarihi, p-location ile nerede olacağı, p-summary ile etkinliğin özeti, u-url ile de etkinlik ile ilgili bir web sayfasını tanımlamış olduk. Bir arama motoru bundan başka ne isteyebilir ki daha?

Son olarak bir de adres tanımlama örneği yapalım. Bunun için h-geo kullanacağız. Mesela aşağıdaki gibi bir koordinat sistemini tanımladığımızı düşünelim.

<p class="h-geo">
  <span class="p-latitude">57.811</span>,
  <span class="p-longitude">9.376</span>
</p>

Lokasyon bilgisini tanımlarken Latitude ve Longitude, yani enlem ve boylam değerleri verilir. Bunları da p-latitude ve p-longitude ile tanımladık.

Veya düzgünce bir adres tanımı yapalım. Bunu da adr ile yapacağız. Yalnız dikkat edin, global olan adres tanımı ile bizim yerel adres tanımımız birbirine uymamaktadır. Mesela “mahalle” diye bir şeyi tanımlayamıyoruz.

<div class="adr">
 <div class="street-address">Yerebatan Caddesi No: 1000/B</div>
 <div class="extended-address">Elit Han</div>
 <span class="locality">İstanbul</span>,
 <span class="region">Sultanahmet</span>
 <span class="postal-code">81410</span>
 <div class="country-name">Türkiye</div>
</div>

Medya ve Metinlerde Microformats2

Öncelikle bir resim üzerinden örnek yapalım.

<div class="hmedia">
  <a rel="enclosure" type="image/jpeg" href="https://goo.gl/Vtii46" >
    <img class="photo" alt="Shanks" 
     src="https://goo.gl/Vtii46" style="width:50px;height:auto" />
  </a>
    <span class="fn">Shanks fotoğraf</span>, 
   <span class="contributor vcard">
       <a class="url fn" href="http://www....com/">One Piece Funs</a> 
      (<a class="url" href="http://www....com/xxx">XYZ Kişisi</a>)
    </span>
</div>

Burada biraz fazla mikro format kullandık, inceleyelim…

Dikkat edin, burada sadece tek bir kök element içinde microformats kullanmadık. Bir adet kök div var ve bu hmedia ile tanımlanmış. Bunun içinde de hem resim hem de resmin içeriği ile ilgili iki adet daha kök var. İlk kök a etiketi ile oluşturuluyor ve class ismi olarak enclosure, yani kapsayıcı ismi veriliyor, böylece onun bir kapsam olduğu belirtiliyor. İçindeki img etiketine de photo ismi veriliyor. Böylece medya türü belirtilmiş oluyor. Bunun dışında ses ve video için de tanımlamalar yapılabilir, referansı inceleyin. Ek olarak alt etiketini de kullandık ki, bu da SEO açısından resmi tanımlayan en önemli özelliklerden biridir.

Ardından bir adet span ile oluşturulmuş. Bunda da class ismine fn verilmiş. fn ile tanımlayıcı anlamında resmin tanımı oluşturuluyor. İkinci kapsayıcı da yine bir span. Bu kapsam da contributor vcard ile tanımlanıyor, yani içeriği sağlayanlar hakkında bilgiler olacak bu grup içinde. Tanım içinde yer alan ile bu içeriğin sağlayıcısının nerden geldiği url fn ile belirtiliyor. Yine kim tarafından da içeriğin sağlandığı url ile tanımlanabilir.

Leave a comment

Yorum