Geldik eğitim serimizin en profesyonel, sitenin kaderini belirleyecek olan kapanış dersine: Meta Etiketleri ve SEO Optimizasyonu. Bir temanın tasarımı ne kadar harika olursa olsun, arama motorları (Google) ve sosyal medya platformları (Facebook, X/Twitter) siteyi düzgün okuyamadığı sürece o tema eksiktir. Bu derste şablonumuzun içine dinamik ve saf (pure) metatag yapılarını gömeceğiz.

Blogger XML Dersleri #6: Meta Etiketleri ve Arama Motoru (SEO) Optimizasyonu

Blogger XML serimizin son dersine hoş geldiniz! Buraya kadar bir temanın iskeletini kurmayı, verileri çekmeyi, koşullu ifadelerle sayfaları yönetmeyi ve döngülerle içerikleri listelemeyi öğrendik. Artık çalışan dinamik bir temamız var.

Serinin bu kapanış dersinde ise, temamızı arama motorlarının (Google, Bing) ve sosyal medya botlarının bayılacağı bir SEO canavarına dönüştüreceğiz. Bunu yaparken harici hiçbir eklenti kullanmadan, tamamen saf XML metatag yapılarını kullanacağız.

SEO Meta Etiketleri Nedir?

Meta etiketleri (Metatags), sitenizin kaynak kodlarında <head> ile </head> etiketleri arasında yer alan ve ziyaretçilerin doğrudan görmediği, ancak arama motoru botlarına sayfa hakkında bilgi veren kılavuz kodlardır.

Blogger'da her sayfanın (ana sayfa, yazı sayfası, etiket sayfası) içeriği farklı olduğu için, bu etiketlerin de sayfalara göre dinamik olarak değişmesi şarttır.

Dinamik ve Saf (Pure) XML Meta Bloğu

Aşağıdaki kod bloğu; bir sitenin ihtiyacı olan standart meta etiketlerini, Google bot ayarlarını (Robots metatags) ve Open Graph (Sosyal medya paylaşım) kartlarını tamamen otomatik hale getirir.

Şablonunuzun <head> etiketinin hemen altına bu bloğu yerleştirebilirsiniz:

<head>
<meta charset='utf-8'/>
<meta name='viewport' content='width=device-width, initial-scale=1'/>

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>

<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

<b:if cond='data:blog.pageType == "error_page"'>
<meta content='noindex,nofollow' name='robots'/>
<b:else/>
<meta content='index,follow,max-image-preview:large' name='robots'/>
</b:if>

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='website' property='og:type'/>
</b:if>

<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='https://bloggerarsivim.blogspot.com/logo.png' property='og:image'/>
</b:if>

<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
</b:if>

Kodun Kritik Noktaları ve Mantığı

rel='canonical' Kontrolü: Arama motorlarına o sayfanın orijinal linkini (data:blog.url) bildirir. Sitenize ?m=1 (mobil uyumluluk eki) gibi parametrelerle girilse bile Google bunun aynı sayfa olduğunu anlar ve yinelenen içerik cezasından sizi korur.
Dinamik Açıklama (metaDescription): Sadece panelden yazı yazarken girdiğiniz "Arama Açıklaması" doluysa çalışır. Boş sayfalarda gereksiz description etiketi oluşturmaz.
Görsel Optimizasyonu (og:image): Yazı sayfalarında, makalenizin içindeki ilk resmi otomatik olarak yakalar. Linki birine WhatsApp'tan veya sosyal medyadan gönderdiğinizde, yazının resmi önizleme olarak harika bir şekilde belirir. Yazıda resim yoksa belirlediğiniz sabit logoyu basar.
404 Engelleyici: Hata sayfalarına otomatik olarak noindex,nofollow basarak Google botlarının boş sayfaları tarayarak sitenizin tarama bütçesini (crawl budget) tüketmesini engeller.

Eğitim Serisinin Sonu: Şimdi Sıra Sizde!

Tebrikler! 6 derslik Blogger XML Eğitim Serisi'ni başarıyla tamamladınız. Artık bir Blogger temasının kod alanına girdiğinizde korkmadan, hangi kodun ne işe yaradığını bilerek, tamamen saf (pure) ve optimize şablonlar geliştirebilirsiniz.

Unutmayın; en iyi tema, gereksiz JavaScript ve şişirilmiş eklentilerden uzak, tamamen Blogger'ın kendi XML gücüyle kodlanmış, hafif temadır.