Setting h1, h2, h3 Blog Dengan Benar Versi D-Copy Blog

Tweet

Setting h1, h2 dan h3 Blog Dengan Benar Versi D-Copy Blog - D-Copy Blog | Hai sobat Blogger, kali ini kita akan membahas bagaimana menyetting dengan benar ala D-Copy Blog. Saya jamin dengan mengikuti settingan ala D-Copy Blog ini blog Anda akan menjadi benar-benar SEO dan akan saya berikan buktinya.

Dan gambar disamping ini adalah score SEO D-Copy Blog yang dicek otomatis oleh chkme.com : /100%.

UPDATE :
Pastikan untuk Anda berkonsentrasi terlebih dahulu dalam melakukan penyettingan ini, Anda tidak akan mengerti tanpa pikiran yang memandu Anda.

Langkah :

1. Terlebih cek template Anda di http://www.checkme.com
2. Sesudah itu cek bagian :
   > Images: 100 images and ... missing descriptions
   > Images: 100 images and ... missing titles
3. Lalu jika bagian image (gambar/thumnail) Anda missing description dan titles maka buat gambar tersebut menjadi HTML dibawah ini, biasanya itu ada pada gambar pada postingan, sidebar dan bagian HTML :

<img title="Title Yang Anda Inginkan" src="URL Gambar" alt="Deskripsi Gambar Yang Anda Inginkan" />

Catatan :

• Pastikan semua sudah memiliki title dan alt (deskripsi) pada seluruh gambar
• Pastikan pada seluruh gambar postingan dikasih title dan alt, caranya adalah kita anggap Anda sudah berada dalam keadaan proses membuat postingan, lalu klik gambar dalam proses membuat postingan tersebut lalu maka akan muncuk otomatis menu-menu dibawah gambar, lalu klik "properties" dan berikan title dan alt.

    4.  Lalu masuk pada menu edit HTML, jangan lupa centang Expand Template Widget

    5.  Cari kode yang mirip dengan kode dibawah ini :

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

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

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

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

    7.  Cari kode yang mirip dengan kode dibawah ini :

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

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

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

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

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

    10.  Ganti h3 menjadi h2, biasanya HTML diatas ada 2, ganti ke2 HTML tersebut.
    11.  Lalu pada bagian blog Anda, cari seluruh HTML sidebar blog Anda :

Misalkan pada sidebar D-Copy Blog pada bagian widget sidebar "INFO & BLOGROLL" maka pada bagian edit HTML, HTMLnya seperti dibawah ini :

<b:widget id='HTML35' locked='false' title='Info &amp;amp; Blogroll' 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>

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

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

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

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

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

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

   17.  Cari lagi HTML dibawah ini :

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

   18.  Ganti HTML diatas dengan HTML dibawah ini :

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

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

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

   21.  Cari CSS dibawah ini :

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

   22.  Hapus h2 pada CSS diatas.

Sudah lelah? Tapi Anda sudah selesai. Dan silahkan Save Template Anda dan cek sekali lagi di http://www.checkme.com

Yang harus Anda ingat :

• h1 adalah header blog
• h2 adalah postingan
• h3 adalah sidebar
• dan, jika Anda membuat widget baru maka jangan lupa untuk mengubah h2 widget tersebut menjadi h3, seperti pada langkah 10 diatas.

Terima kasih, semoga bermanfaat.