Setting h1,h2,h3 blogger untuk SEO Friendly

Setting h1 h2 h3 blogger SEO Friendly
Postingan kali ini saya terinspirasi dari bang Alam Perwira yang bilang kalo blog ini Seo Score nya masih kurang, dan saat saya respond komentar itu lalu saya coba check sendiri pada Seo Score Toolbar , dan ternyata memang benar template blog ini masih ada kesalahan pada edit heading. setelah saya coba dengan beberapa tag conditional meskipun berulang kali gagal dan akhirnya menemukan juga tag conditional yang tepat. masalah heading h1,h2 dan h3 tersebut ternyata berhasil. untuk penjelasan heading tersebut pernah saya bahas di Test SEO .
cara setting pada template yang pernah saya lakukan .

1. Setting Heading Post Title.
pada edit template/html lalu centang expand lalu cari code seperti di bawah .
<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>
Atau singkatnya
<h3 class='post-title entry-title'>
Lalu ganti semua code tersebut dengan code di bawah.
<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>
2. Setting Blog Title (Judul Blog)
pada edit template/html lalu centang expand lalu cari code seperti di bawah .
<h1 class='title' style='background: transparent; border-width: 0px'>
    <b:include name='title'/>
</h1>
Catatan : biasanya code tersebut ada dua. ganti keduanya
Lalu ganti dengan code di bawah :
<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>
Selanjutnya cari code berikut .
<h1 class='title'>
<b:include name='title'/>
</h1>
ganti dengan semuanya dengan code di bawah :
<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>
3. Edit Date Header (tanggal head)
pada edit template/html lalu centang expand lalu cari code yang mirip seperti di bawah .
<h2 class='date-header'><data:post.dateHeader/></h2>
perhatikan saja code yang seperti ini.
<h2 class='date-header'>
karena akan berbeda-beda ada yang h4 atau h3..
jika ketemu.
lalu ganti dengan code di bawah :
<div class='date-header'><data:post.dateHeader/></div>
catatan: di atas hanya mengganti tag <h2> dengan </div> .
4. Edit CSS.
karena tag h1,h2,h3 sudah di edit ulang maka kita harus mengganti cssnya.
untuk mengganti css tiap template kemungkinan akan berbeda namun sebagai awalan kalian cari css yang mirip saja dengan css di bawah pada template anda.
CSS Post Title
.post h3 {..............}
.post h3 a, .post h3 a:visited, .post h3 strong {.............}
.post h3 strong, .post h3 a:hover {................}
jika sudah ketemu. maka ganti css dengan css di bawah ini
.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;
}
Lalu cari css header h1 . atau lengkapnya yang mirip seperti css di bawah :
CSS Header
#header h1 {
    margin: 5px 5px 0;
    padding: 15px 20px .25em;
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: .2em;
    font: $pagetitlefont;
}
Lalu ganti css tersebut dengan css di bawah 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;
}
CSS Date Header
Cari yang mirip seperti ini
h2.date-header {
    margin: 1.5em 0 .5em;
}
hapus tag h2 atau ganti dengan css di bawah :
.date-header {
    margin: 1.5em 0 .5em;
}
Terakhir simpan template anda. dan lihat hasilnya pada SEO Score Toolbar.
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.

sebagai keamanan sebaiknya anda donwload/simpan template sebelum melakukan settingan di atas. sebagai jaga-jaga saja
Semoga artikel ini bisa bermanfaat buat anda terima kasih atas kunjungannya, saya tidak sabar menunggu untuk memulai diskusi dari anda.
post by : under-88.blogspot.com

14 comments:

  1. yeah, template yg saya pakai sudah bener bro. Tak jd rombakk hihi :Q

    ReplyDelete
    Replies
    1. ok seep boz.. :-bd gak usah di rombak lagi kalo udah benar.. ntr malah pusing lagi dech kaya blog ane.. hehehehe @@,

      Delete
  2. mantap sekali sob tutornya

    ReplyDelete
  3. metode ini dulu diperkenalkan sama om choen, sayang banget sekarang beliau udah gak aktif di blogspot

    ReplyDelete
    Replies
    1. iia.. metode ini sudah banyak di bicarakan..dengan metode ini kita bisa mengenal maksud dan tujuannya...

      Delete
  4. kang saya kan udah terapin ini, tapi pas saya periksa di seoanalyzer masih ada "Terlalu banyak tag h2 dan h3".
    nah gmana?
    trus klo cara validin di w3c caranya gmana? misal yg tidak validnya ratusan nah apakah bisa langsung divalidkan semua sekaligus??

    maaf kepanjanga :p

    ReplyDelete
  5. Gimana klau langkah pertama sesuai yg dijelaskan, kodenya ada 2.

    Tolong Penjelasannya Master \m/. :D

    ReplyDelete
  6. punyA Ane dh IkutIn semuA sArAn AgAn, dAn hAsIlnyA kAcAu...gmn gAn???
    skrng Ane blkIn lg, tp Judul blog di home mA postIngAn Jore gAn gmn nIch tolong bntuAnnyA
    concept191.blogspot.com

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. info bagus nih mas, tp sy masih bingung soalnya kodenya gk ada di template sy, gimana tuh ya...blog sy di MEDIA INFO (http://mediainfomitra.blogspot.com/2012/08/cara-meningkatkan-peringkat-blog-di.html)

    ReplyDelete
  9. thanks gan wajib d coba nich.
    thanks dah di share.
    http://renunganharian4all.blogspot.com/

    ReplyDelete
  10. nice info.....terima kasih banyak \o/

    ReplyDelete
  11. I really like the way you describe this blog it is awesome. Typing test tool will reveal your test scores and typing speed. To test your typing speed check out my site typingspeedtest.

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top