Struktur H1, H2, H3 Yang Baik dan Benar Untuk Blogspot

3
Struktur H1, H2, H3, dst yang baik dan benar. Menurut para pakar SEO template yang baik akan sangat membantu dalam hal SEO. Saya sendiri belum pantas menelaskan masalah template ini, karna saya hanya seorang pemula. Tapi mengutip dari para pakar SEO ada sedikit banyak yang harus kita garis bawahi di antaranya adalah Struktur H1, H2, H3 yang baik dan benar.

Dari berbagai sumber pakar SEO menurut mereka struktur tag H1, H2, H3 pada template sebaiknya TAG H1 nya hanya 1, tidak diulang-ulang beberapa kali,misal TAG H1 nya berada pada Judul blog maka pada Judul postingan blog lebih baiknya menggunakan TAG H2.Tag H2 boleh diulang beberapa kali sama dengan TAG H3 dan seterusnya. Jika judul blog sudah menggunakan H1 dan judul postingan pada H2 maka struktur kode template anda akan teratur dan berurutan dimulai dari angka 1 dst. Dengan begitu maka sudah sesuai dengan peraturan dari robot search engine yang biasa mengindeks nya dengan urutan yang berurutan.

Maka selanjutnya bagaimana membuat template blogspot kita memenuhi sttruktur tag H1 H2 H3 yang baik dan benar. Berikut ini adalah cara membuat template blogspot SEO dengan langkah-langkah dibawah ini:

langkahnya adalah menuju ke dasboard blogspot
Pilih layout/tata letak - Edit HTML - centang pada Expand Widget Templates (gunakan CTRL+F pada keyboard, Untuk mempermudah pencarian kode yang akan di rubah)

1. Rubah Judul Post Dengan Tag H2

Temukan kode dibawah ini:

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

Ganti dengan kode dibawah ini:

<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. Rubah Judul Utama Blog ( Bukan Artikel)

Cari kode dibawah ini:

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

Rubah / ganti menjadi :

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

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

Ganti menjadi:

<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. Rubah kode CSS agar sesuai

Cari kode dibawah ini:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

Rubah Menjadi:

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

Selanjutnya cari:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

Ganti dengan:

#header h1, #header p {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

Berikutnya cari:

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

Ganti dengan (hapus H2.date-header):

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

Yang terakhir cari kode:

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

Ganti dengan :

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

Kemudian simpan perubahan template dengan klik tombol save. selamat mencoba, semoga sukses.
Semoga Artikel yang saia posting di blog ini bermanfaat,terima kasih..
Share :

Komentar Facebook:

3 Komentar Blog:

Terima Kasih Semua Atas Kunjungannya..
Sempatkan meninggalkan Kata-kata yah,,karena ini berarti untuk blogku. Salam Blogging.

Entri Populer