Mengedit Tag Heading H1 dan H2 Agar Seo Friendly

Berikut dibawah ini tutorial edit Tag Heading H1 dan H2 pada template blog agar lebih seo friendly.

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.

Terakhir simpan template anda. Untuk settingan css yang perlu di perhatikan hanya class dan id nya saja, jika mengerti edit css maka anda bisa merubahnya dengan style anda sendiri.