Heading Dinamis (H1 dan H2) pada Blogspot

SEO, trik blog  

Heading merupakan bagian yang sangat penting pada sebuah blog. Bagi search engine seperti google, heading dijadikan pengenal untuk mengidentifikasi sebuah blog berdasarkan title. Pada posting terdahulu, telah dijelaskan mengenai meta tag dinamis yang bisa membuat title dan deskripsi sesuai dengan halaman yang sedang dibuka (inner page). Karena salah satu identitas blog dilihat dari heading, maka diperlukan heading dinamis yang bisa menyesuaikan dengan halaman yang sedang dibuka (inner page).

Heading H1 dan H2 dinamis akan dapat menambah nilai SEO blog kita, karena di setiap halaman blog yang dibuka akan selalu terdapat H1 dan H2 yang menjadi identitas utama halaman tersebut (halaman blog). Oleh karena itu, diperlukan sebuah skenario untuk mengatur agar keberadaan H1 dan H2 pada halaman blog anda lebih tepat. 

OK, kita buat sebuah skenario penyusunan H1 dan H2 yang dinamis dan memiliki posisi yang tepat pada setiap halaman blog. karena heading H1 dan H2 ini menjadi identitas setiap halaman blog, maka H1 dan H2 tersebut digunakan untuk title blog dan post title, sebagaimana skenario penyusunan meta tag dinamis pada postingan terdahulu. Skenario berikut ini menyempurnakan kekurangan atas skenario dari tips-tips yang kebanyakan telah ada, yakni pada halaman archive yang masih menggunakan H2 pada title blog dan H1 pada post title. Kalau H1 ada banyak, maka akan sangat menurunkan nilai SEO dari blog kita.

Pada halaman utama (halaman index) H1 digunakan untuk title blog dan H2 untuk post title. Di halaman single post, H1 digunakan untuk post title dan blog title menggunakan H2 (posisinya dibalik). Untuk melengkapi halaman lain seperti kategori (label) dan archive agar tetap SEO friendly, maka pada dua halaman tersebut H1 ditaruh di title blog dan H2 pada post title. Jadi, penyusunan heading H1 dan H2 bisa dilakukan dengan langkah-langkah sebagai berikut.

• Masuk ke Design (Rancangan) pada blogspot anda dan pilih edit HTML. Backup dulu template nya dengan menekan download full template.
• Centangi Expand Widget Templates
• Cari kode berikut (tekan CTRL + F):

<div id=’header-inner’>
<div class=’titlewrapper’>
<h1 class=’title’>
<b:include name=’title’/>
</h1>
</div>
<b:include name=’description’/>
</div>

• Ganti kode tersebut dengan kode di bawah ini.

<div id='header-inner'>
<div class='blogtitle'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h1 id='blogtitle'><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h2 id='blogtitle'><a expr:href='data:blog.homepageUrl'><data:title/></a></h2>
<b:else/>
<h1 id='blogtitle'><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>
</b:if>
</b:if>
</div>
<b:include name='description'/>
</div>

• Kemudian cari lagi kode berikut dengan cara yang sama seperti sebelumnya.

<a expr:name=’data:post.id’/>
<b:if cond=’data:post.title’>
<H2 class=’post-title entry-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’><data:post.title/></a>
<b:else/>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</H2>
</b:if>

• Ganti kode tersebut dengan kode di bawah ini.

<a expr:name='data:post.id'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.title'>
<h1 class='post-title entry-title' style='font-size:1.3em;'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<b:else/>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
</b:if>
</b:if>

• Simpan template dan selesai.

Dengan penyusunan heading dinamis (H1 dan H2) seperti ini memungkinkan tidak ada H1 lebih dari satu di setiap halaman blog anda, itu artinya dapat meningkatkan skor SEO blog anda. Ane rasa cukup dulu sharing tips untuk blogspot kali ini. Mungkin pada posting selanjutnya ane akan share Heading Dinamis H1 dan H2 pada Wordpress. Kalo ane lupa tolong diingetin ya... :D

Selamat mencoba.