Şablonumuzu yapılandırdık, verileri çekmeyi öğrendik. Şimdi sıra temanın zekasını oluşturmaya, yani kodlarımıza yön vermeye geldi. Sitenin hızını uçuracak ve SEO'yu optimize edecek en önemli derslerden birindeyiz.

Blogger XML Dersleri #4: Koşullu İfadeler (Blogger If-Else Yapısı)

Blogger XML serimizin ilk üç dersinde şablonumuzun iskeletini kurduk ve dinamik verileri nasıl çağıracağımızı öğrendik. Ancak şu an yazdığımız her kod, blogun tüm sayfalarında (ana sayfa, yazı sayfaları, arşivler, 404 hata sayfası) aynen görünür.

Peki, büyük ve ağır bir CSS animasyonunu veya reklam kodunu sadece yazı sayfalarında çalıştırmak; ana sayfada ise hiç yüklemeyerek siteyi hızlandırmak istersek ne yapacağız?

İşte burada devreye Blogger'ın mantıksal zekası, yani Koşullu İfadeler (<b:if>) giriyor!

Blogger'da Mantıksal Koşul Mantığı

Blogger XML şablonlarında standart programlama dillerindeki (Python, PHP, JavaScript) if-else mantığı kullanılır. Tarayıcı kodu yukarıdan aşağıya doğru okurken bir koşula denk gelirse, o koşulun doğru olup olmadığını kontrol eder. Doğruysa içindeki kodları çalıştırır, değilse pas geçer.

Temel şablon yapısı şu şekildedir:

<b:if cond='KOŞUL_BURAYA_YAZILIR'>
<b:else/>
</b:if>

Not: Eğer alternatif bir durum yoksa <b:else/> kısmını kullanmak zorunlu değildir, sadece <b:if> ve </b:if> kullanabilirsiniz.

En Çok Kullanılan Sayfa Koşulları

Blogger sunucuları, o an hangi sayfada olduğumuzu data:blog.pageType ve data:blog.url gibi etiketlerle bilir. Biz de bu verileri kullanarak muazzam bir sayfa kontrolü sağlarız.

İşte temanızı kodlarken elinizin altında bulunması gereken en kritik koşul listesi:

1. Sadece Ana Sayfada (Homepage) Çalıştır

Blogunuzun sadece ana sayfasında görünmesini istediğiniz bir manşet (slider) veya özel bir Bento Grid düzeni varsa bu koşulu kullanırsınız:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
</b:if>

2. Sadece Yazı (Post/Item) Sayfalarında Çalıştır

Yazıların içine ekleyeceğiniz reklamlar, yorum alanları, yazı içi yazı tipleri veya paylaşım butonları gibi ögeleri sadece makale sayfalarında yüklemek için:

<b:if cond='data:blog.pageType == "item"'>
</b:if>

3. Sadece Sabit Sayfalarda (Page) Çalıştır

"Hakkımızda", "İletişim" gibi panelden oluşturduğunuz sabit sayfalara özel CSS kuralları veya iletişim formları entegre etmek için:

<b:if cond='data:blog.pageType == "static_page"'>
</b:if>

4. Sadece 404 Hata (Error) Sayfasında Çalıştır

Ziyaretçi sitenizde kırık veya yanlış bir linke tıkladığında karşısına çıkacak özel, animasyonlu bir 404 tasarımını tetiklemek için:

<b:if cond='data:blog.pageType == "error_page"'>
</b:if>

Uygulama: Gelişmiş SEO Başlık (Title) Optimizasyonu

Gelin öğrendiklerimizi gerçek ve profesyonel bir örnekle taçlandıralım. Standart Blogger temalarında tarayıcı sekmesindeki başlık her sayfada aynıdır veya kötü optimize edilmiştir.

Aşağıdaki saf (pure) XML kodunu şablonunuzun <head> alanındaki eski <title> etiketiyle değiştirerek arama motorlarının (SEO) bayılacağı dinamik bir başlık yapısı kurabilirsiniz:

<title>
<b:if cond='data:blog.pageType == "index"'>
<data:blog.title/> | Dijital İçerik ve Blogger Arşivi
<b:bcontent/>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
404: Sayfa Bulunamadı! | <data:blog.title/>
<b:else/>
<data:blog.pageName/> | <data:blog.title/>
</b:if>
</b:if>
</title>

Kod Analizi:

Sistem ilk olarak ana sayfada olup olmadığımıza bakıyor (index), eğer ana sayfadaysak blog adının yanına belirlediğimiz özel SEO sloganını basıyor.
Eğer ana sayfada değilsek else kısmına geçiyor ve bu kez sayfanın bir 404 hatası olup olmadığını denetliyor.
O da değilse, en nihayetinde bir makale sayfasında olduğumuzu anlayıp tarayıcı sekmesine Makale Başlığı | Blog Adı kombinasyonunu getiriyor.

4. Dersin Özeti ve Ödev

Bu derste Blogger temalarının yönetim mimarisine akıl ve mantık kattık. Gereksiz kodların alakasız sayfalarda yüklenmesini engelleyerek site hızımızı (Pagespeed) nasıl optimize edebileceğimizi ve SEO'yu nasıl güçlendireceğimizi gördük.

Bu dersin ödevi: Kendi test temanızda sadece 404 sayfasında (error_page) görünecek büyük bir kırmızı <h1>Üzgünüz, Sayfa Bulunamadı!</h1> uyarısı tasarlayın ve var olmayan bir linke (Örn: blogadiniz.blogspot.com/404deneme) giderek koşulun çalışıp çalışmadığını test edin!

Bir sonraki dersimizde, yazılarınızı arka arkaya listelemenizi, etiketleri ve popüler yayınları bir döngüye sokmanızı sağlayan dinamik Ders 5: Döngüler ve Esneklik – <b:loop> ile Listeleme konusuna geçiyoruz.

Koşul etiketleriyle ilgili yapamadığınız senaryoları yorumlarda belirtin, birlikte kodlayalım! kosullu,ifadeler,if-else