Lebih SEO Friendly dengan Dynamic Heading Blogspot

Lebih SEO Friendly dengan Dynamic Heading Blogspot - Serach engine google sangat menyukai blog yang penerapan struktur heading tag h1 sampai h6 yang tersusun dengan baik dimana <h1> menggunakan judul blog <h2> dengan judul post dan <h3> bisa di isi dengan sidebar.

Pada dasarnya di template default blogger struktur tag nya menggunakan <h1> dengan judul blog,<h2> sidebar dan <h3> untuk judul posting, dan untuk hal SEO Pamungkas penerapan struktur itu kurang baik dimana judul post yang lebih penting di tempatkan di tag h3 dan sebaliknya sidebar yang tidak begitu penting di terapkan di h2 dan untuk mengoptimalkannya saya sudah jelaskan di artikel sebelumnya di cara mengatur heading tag h1 sampai h3.

Menggunakan Dynamic Heading

Sobat blogger namun pada kesempatan kali ini saya akan menerapkan tag heading dinamis atau dynamic heading dimana tag h1 akan di gunakan untuk judul posting di halaman single post,namun pada halaman home page h1 akan berubah menjadi judul blog, sehingga dalam penerapannnya saat di halaman hompage <h1> Judul Blog <h1> dan <h2> Judul Post <h2> namun saat di halaman posting tag <h1> akan menjadi judul posting yang di maksudkan untuk mempertajam SEO blog dimana search engine akan merayapi judul post lebih awal dan bisa teroptimasi dengan baik.

Sebelum melakukan tutorial silahkan backup template anda terlebih dahulu.

Cara Membuat Dynamic Heading 

1. Buka akun blogger anda
2. Pilih menu template > Edit HTML.
3. Lalu silahkan anda cari kode di bawah ini

<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>

4. Ganti kode tersebut dengan kode dibawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>

5. Selanjutnya anda cari kode di bawah ini

<h1 class='title'>
<b:include name='title'/>
</h1>

6. Ganti kode tersebut dengan kode di bawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<h1 class='title'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title'>
<b:include name='title'/>
</p>
</b:if>

7. Cari lagi kode di bawah ini.

<b:if cond='data:post.title'>
<h3 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>
</h3>
</b:if>

8. Ganti kode tersebut dengan kode di bawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<b:else/>
<h1 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>
</h1>
</b:if>

9. Untuk kode CSS nya, cari kode di bawah ini

.post h3 {bla..bla...bla...}
.post h3 a, .post h3 a:visited {bla...bla...bla..}
.post h3 a:hover {bla...bla...bla..}

10. Selanjutnya, ganti kode tersebut dengan kode di bawah ini, atau anda bisa menyesuaikannya sendiri agar tampilan blog anda tidak berubah,yang perlu di perhatikan adalah perubahan .post h3 menjadi .post h1 dan post h2

.post h1, .post h2 {margin:.25em 0 0;padding:0 0 4px;font-size:140%;font-weight:normal;line-height:1.4em;color:$titlecolor;}
.post h1 a, .post h1 a:visited, .post h1 strong,  .post h2 a, .post h2 a:visited, .post h2 strong {display:block;text-decoration:none;color:$titlecolor;font-weight:normal;}
.post h1 strong, .post h1 a:hover, .post h2 strong, .post h2 a:hover {color:$textcolor;}

Update : untuk step 9-10, biasanya ini hanya ada pada template default blogger, dan untuk template hasil download biasanya menggunakan .post h2 , namun sebenarnya jika pada template tidak mengalami perubahan tampilan, lebih baik step ini di lewati , atau anda bisa menyesuaikannya sendiri. 

11. Sekarang cari kode di bawah ini.

#header h1 {bla...bla...bla..}

12. Ganti kode tersebut dengan kode dibawah ini.

#header h1, #header p {margin:5px 5px 0;padding:15px 20px .25em;line-height:1.2em;text-transform:uppercase;letter-spacing:.2em;font: $pagetitlefont;}

13. Selanjutnya silahkan save template anda.

Dengan tutorial di atas maka dengan begitu anda sudah menggunakan dynamic heading atau tag heading dinamis..