Cara Membuat Dynamic Heading Agar Blog SEO Friendly

Cara Membuat Dynamic Heading Agar Blog Lebih SEO, Sobat blogger, Dengan mengoptimalkan tag heading yang tersusun dengan baik dalam sudut pandang seo dapat membantu search engine blog lebih maksimal dalam mengindex blog dan menyusun posisi serp blog pada halaman hasil pencarian di search engine.


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 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

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 h2a: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  {anggtlp.blogspot.com}

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.