1.Gün – WPHeader WPSideBar WPFooter işaretleme

Konuya bildiğiniz üzere şeklinde başlamak isterdim ama Türkçe sitelerden Schema.org sitesinin şemaları hakkında tam anlamıyla doğru bilgilerin verildiği site sayısı sanırım parmak sayısını geçmez. Bilenleriniz mutlaka vardır elbette. Bilmeyenler de sürekli araştırır durur ve sadece nedir, ne işe yarar gibi konularla karşılaşır ve neyi nasıl kullanacağı hakkında pek bir bilgi bulamıyor maalesef. Bu günden itibaren adım adım siteyi schema.org şemalarına uygun bir şekilde optimize etmeyi anlatmaya başlayacağım. Sitemizi sürekli takip edenler de yeni eklemiş olduğum rich snippet (zengin snippet) kategorisinide görmüşlerdir mutlaka. Bundan önce iki tane konu açmıştık ve bundan sonra da bir WordPress tabanlı sitenin tamamının nasıl bu şemalara uygun şekilde döşeneceği hakkında bilgiler vereceğim. İlk defa bu konunun ne olduğuna değindiğim için biraz daha açıklama yaptıktan sonra Wp sitenin önemli bölümlerinin işaretlenmesi hakkındaki konuyu anlatmaya başlayacağım.

Hepimiz için en önemli olan arama motoru Google’dir ve hepimiz sitelerimizi Google’ye göre optimize ederiz. Başlıca var olan 3 tane veri işaretleme formatları bulunuyor. Schema.org, Microformats.org  ve tesadüfe bak ismini unuttum (buldum data-vocabulary.org)  🙂 P diye birşeyle başlıyordu. Neyse zaten o kadar da önemli değil. Çünkü Google artık sadece Schema.org sitesinin işaretleme formatlarını kabul ediyor. Bu işaretlemeler web siteyi arama motorlarına daha yakışıklı göstermeye yarayan ve Google’nin pagerank belirlemede kullandığı 200+ sinyalden de birisidir. Ayrıca Google botları sitenizi taradığı zaman hangi bölümün neye yaradığını da tespit edebiliyor. Bir zamanlar aklıma takılmayan bir konu da değildi hani. Nasıl olur da robotlar sidebarı, yorum bölümünü, makale gövdesini birbirinden ayırabiliyor diye. Bu günden itibaren anlatacağımız konuları siz de sitenize uyarlayınca  robotlar sitenizi daha iyi tanıyabilecek.

WordPress sistemini kullanan kişiler sidebar, header ve  footer bölümlerine daha doğrusu bu kelimelere oldukça aşinadırlar. Buradaki yazımızda bu bölümlerin işaretlenmesi hakkında basit bilgiler vereceğiz. Son bir kaç gündür sürekli olarak temada bu bölümleri ve benzerlerini işaretleyip duruyor hatta bozduğum zamanlar bile oluyordu. Yapmış olduğunuz değişiklikleri yapısal veri test aracını kullanarak görebilirsiniz. Büyük çoğunluk WordPress kullandığından bu işaretlemeleri de bu sistemi kullanan kişilere göre anlatacağım.

Bu işaretlemeyi daha dün denerken Google kaydetmiş ve sonucunu da kaydetmiş bile. Her şeyi aşama aşama anlatmak için temayı baştan sona sıfırladım tekrardan ve bu günden itibaren birlikte bu bölümleri işaretlemeye başlayacağız.

İşaretlemede kullanacağımız kodlar:

itemscope="itemscope" itemtype="http://schema.org/WPHeader"
itemscope="itemscope" itemtype="http://schema.org/WPSideBar"
itemscope="itemscope" itemtype="http://schema.org/WPFooter"

Css ile sınıflandırmayı veya çerçeve isimlerini az çok bilirsiniz. Blog sisteminizin ekran bölümlerinde aşağıdaki sınıflar kullanılır. Ben kendi temamdan kodları aldığım için sizinkinizde class, id şeklinde ve id de class şeklinde olabilir. Aşağıdaki kodlara dikkat ederseniz iki tanesinin id olarak bir tanesinin de class olarak belirlenmiş olduğunu görebilirsiniz.

1. Header için : <header id=”header”>
2. Sidebar için : <div class=”sidebar”>
3. Footer için : <footer id=”footer”>

Sıra geldi bu bölümleri temamızda bulup gerekli kodları yerleştirmekte. Yönetim paneli > Görünüm > Düzenleyici > Üst Kısım (header.php) sayfasını seçerek <header kodunu bulun ve içine aşağıdaki kodu yerleştirin.

itemscope="itemscope" itemtype="http://schema.org/WPHeader"

Benim kullandığım temanın <header bölümü aşağıdaki gibi görünüyor:

<header id="header">

Kodları yerleştirdikten sonraki hali :

<header id="header" itemscope="itemscope" itemtype="http://schema.org/WPHeader">

Değişiklikleri kaydedin ve bir sonraki sayfa olan Yan Menü (sidebar.php) sayfasını düzenlemek için açın. Bendeki sidebar bölümü aşağıdaki gibi.  Siz “sidebar şeklinde aratırsanız bulabilirsiniz doğru bölümü. Bazılarında <aside şeklinde de başlayabilir. Her tasarımcı kendine göre kodlar ekler.

<div class="sidebar s1">

Eklenecek olan kod:

itemscope="itemscope" itemtype="http://schema.org/WPSideBar"

Kodları yerleştirdikten sonraki hali:

<div class="sidebar s1" itemscope="itemscope" itemtype="http://schema.org/WPSideBar">

Bunu da aynı şekilde kaydettikten sonra değişiklikleri kaydedin ve bir sonraki sayfa olan Alt Kısım (footer.php) saıyfasını düzenlemek için seçin. Sayfada <footer  veya  “footer kodlarını arayıp bulun. Bendeki footer bölümü aşağıdaki gibidir.

<footer id="footer">

Eklenecek olan kod:

itemscope="itemscope" itemtype="http://schema.org/WPFooter"

Kodları yerleştirdikten sonraki hali:

<footer id="footer" itemscope="itemscope" itemtype="http://schema.org/WPFooter">

Bu bölümü de işaretledikten sonra değişiklikleri kaydedin. Yapmış olduğunuz değişiklikler zamanla yapılandırılmış veri sayfasında listelenecektir.