Mengedit Tag Heading H1 dan H2 Agar Seo Friendly

Ahmad Fawzan Rohman Senin, Juli 16, 2012

Berikut dibawah ini tutorial edit Tag Heading H1 dan H2 pada template blog agar lebih seo friendly.

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 != "item"'> <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 != "item"'> <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 != "item"'> <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 Template.

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