Home » » Cara mengatur Tags h1, h2, h3 Blog Dengan Benar agar SEO friendly

Cara mengatur Tags h1, h2, h3 Blog Dengan Benar agar SEO friendly

Cara mengatur Tags h1, h2, h3 Blog Dengan Benar agar SEO friendly - kali ini haris715 akan posting tentang menyetting template blog agar SEO friendly, seperti blog haris715 nilai SEOnya 91% lumayankan meskipun tidak mencapai 100%,

 

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 dibawah 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 haris715  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 wasalm haris715
Description: Cara mengatur Tags h1, h2, h3 Blog Dengan Benar agar SEO friendly
Rating: 4.5
Reviewer: haris rati
ItemReviewed: Cara mengatur Tags h1, h2, h3 Blog Dengan Benar agar SEO friendly

6 komentar:

  1. Thanks sudah berbagi kawan sangat bermanfaat.

    ReplyDelete
    Replies
    1. sama - sama bro senang bisa membantu
      terima kasih sudah berkunjung :)

      Delete
  2. Thanks ya infonya sangat bermanfaat blogwalking ya :>)

    ReplyDelete
  3. Wah keren gan skor seo saya jadi meningkat walaupun hanya 70%

    ReplyDelete
  4. terima kasih atas tutorialnya mas sangat membantu, (h)
    seo blogku sudah menigkat ne,

    ReplyDelete
  5. bgus ni cara ngatur tags biar lebih seo lagi
    nice share gan :))

    ReplyDelete
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Mohon Berkomentarlan dengan baik sesuai dengan tema / isi posting di atas
Serta tidak mengandung PORNO,SARA,KATA2 KASAR DAN JOROK
Terima kasih atas perhatianya :)