Setting h1,h2,h3 blogger untuk 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