Cara Memperbaiki Tags H1, H2, H3 Blog Agar SEO Friendly

Hai sobat kali ini saya akan posting tentang memperbaiki template blog agar lebih SEO friendly dan agar lebih cepat tertelusur dihalaman utama penulusran blogspot dengan cara Cara Memperbaiki Tags H1, H2, H3 Blog Agar SEO Friendly Nah jadi tunggu apa lagi blog kalian Agar di paling atas dipenulusuran Google hehe oke simak tutorial di bawah ini yooo~
 

Memperbaiki Tags H1,H2,H3 Agar SEO Friendly

Sebelum lanjut ke pembahasan memperbaiki susunan tag heading pada template, ada baiknya anda mengetahui apa itu tag H1, H2 & H3 dan tempat seharusnya agar lebih memudahkan pemahaman anda.

1. <h1> title atau judul blog </h1>
2. <h2> judul postingan atau artikel </h2>
3. <h3> judul widget blogger </h3>

Setelah mengetahui fungsi dan penjelasan tersebut di atas, sekarang mari kita lanjut ke tahap selanjutnya yakni memperbaiki struktur tag H1 sampai H3.

• Login ke blogger
• Template » Edit HTML » Expand Template Widget
• Untuk mencegah terjadinya kesalahan pada saat memperbaiki struktur tag, saya sarankan untuk membackup template anda terlebih dahulu
• Lalu masuk pada menu edit HTML
• Cari kode yang mirip dengan kode dibawaedh ini :

#header {
--------
-----------
}

• Buat CSS diatas dan tambah h1/ganti menjadi seperti dibawah ini :
  

#header h1{
---------
----------
}

Catatan : Jika sudah ada CSS diatas  maka jangan lakukan langkah diatas.

• Cari kode yang mirip dengan kode dibawah ini :

 #sidebar h3{
---------
-------------
}

• Lalu salin kode diatas dan buat h3 menjadi h3, maka akan menjadi seperti ini jadinya :

#sidebar h2{
---------
-------------
}


#sidebar h3{
---------
-------------
}

• Cari kode yang mirip dengan kode dibawah ini :
  
  

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

• Ganti h3 menjadi h2, biasanya HTML diatas ada 2, ganti ke2 HTML tersebut.
• Lalu pada bagian blog Anda, cari seluruh HTML sidebar blog Anda :
• Misalkan pada sidebar ini  Blog pada bagian widget sidebar "RANDOM POST" maka pada bagian edit HTML, HTMLnya seperti dibawah ini :
  

<b:widget id='HTML3' locked='false' title='Random post' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
</b:widget>

• Maka ubah h2 menjadi h3, ingat... ubah seluruh bagian widget sidebar Anda.
• Cari lagi HTML dibawah ini :
  

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

• Biasanya kode diatas ada 2, ganti kedua-duanya 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>

• Lagi... dan lagi Anda jangan bosan dulu, cari lagi kode dibawah ini :

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

• Ganti seluruh HTML diatas dengan HTML dibawah 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>

• Cari lagi HTML dibawah ini :

<h2 class='date-header'><data:post.dateHeader/></h2>

• Ganti HTML diatas dengan HTML dibawah ini :

<div class='date-header'><data:post.dateHeader/></div>

• Cari lagi kode dibawah ini, awas jangan sampai salah, karena ada yang mirip :

      <!--Show the image only-->
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' 
expr:id='data:widget.instanceId + &quot;_headerimg&quot;' 
expr:src='data:sourceUrl' expr:width='data:width' style='display: block'
 />
        </a>
        <!--Show the description-->

• Ganti HTML diatas dengan HTML dibawah ini :

      <!--Show the image only-->
      <div id='header-inner'>
       <h1>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' 
expr:id='data:widget.instanceId + &quot;_headerimg&quot;' 
expr:src='data:sourceUrl' expr:width='data:width' style='display: block'
 title='Go To Home'/>
        </a></h1>
        <!--Show the description-->

• Cari CSS dibawah ini :

 h2.date-header {
    margin: 1.5em 0 .5em;
}

•  Dan yang terakhir Hapus h2 pada CSS diatas.
  
  Demikianla artikel tentang cara mengatur tags h1,h2 dan h3 pada template blog agar SEO friendly Semoga bermanfaat bagi sobat semua, jika ada yang sobat tanyakan sampaikan lewat kolom komentar di bawah wasalam