Membuat Tag Heading H1 dan H2 SEO Friendly – Heading merupakan elemen sangat penting
yang menjadi tanda pengenal bagi sebuah blog berdasarkan title atau judul.
Pengaturan tag heading agar menjadi seo friendly di blogspot mutlak diperlukan agar blog terindeks dengan baik di search engine
dan mendapatkan posisi SERP yang baik pula. Nah berhubung saya baru ganti
template, akhirnya dapat kerjaan baru lagi ngoprek tag heading
Tonk-Tonk Blog ini. Namun kali ini
saya mencoba menerapkan tag heading dinamis dimana pada saat berada di homepage
maka title blog akan diindeks sebagai H1 dan judul artikel diindeks sebagai H2.
Kemudian apabila kita membuka halaman posting (single post) maka secara
otomatis judul artikel berubah menjadi H1. Konsep perubahan yang otomatis seperti
inilah yang disebut dengan
tag heading
dinamis seo friendly. Ada banyak sekali memang model
penataan tag
heading H1 dan H2 ini yang mungkin pernah anda baca di blog-blog lain. Tapi
pada dasarnya tujuan akhir tetap sama yaitu jangan sampai terjadi ada banyak H1
saat kita membuka halaman blog atau halaman posting. Seperti apa
penataan tag heading dinamis yang seo
friendly ini, ikuti langkah-langkah dibawah ini :
Tips
Membuat Tag Heading Dinamis SEO Friendly
1.
Login ke dashboard blogger anda.
2.
Pilih Rancangan > Edit HTML, centang Expand
widget template.
3.
Jangan lupa backup dulu template anda sebelum
melakukan perubahan.
4.
Cari kode seperti dibawah ini :
<div id=’header-inner’>
<div class=’titlewrapper’>
<h1 class=’title’>
<b:include name=’title’/>
</h1>
</div>
<b:include name=’description’/>
</div>
5.
Kemudian ganti dengan kode berikut ini :
<div id='header-inner'>
<div class='blogtitle'>
<b:if cond='data:blog.url ==
data:blog.homepageUrl'>
<h1
id='blogtitle'><a
expr:href='data:blog.homepageUrl'><data:title/></a></h1>
<b:else/>
<b:if cond='data:blog.pageType ==
"item"'>
<h2
id='blogtitle'><a
expr:href='data:blog.homepageUrl'><data:title/></a></h2>
<b:else/>
<h1
id='blogtitle'><a
expr:href='data:blog.homepageUrl'><data:title/></a></h1>
</b:if>
</b:if>
</div>
<b:include
name='description'/>
</div>
6.
Selanjutnya cari lagi kode seperti dibawah ini :
<a expr:name=’data:post.id’/>
<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>
7.
Dan ganti dengan kode berikut ini :
<a
expr:name='data:post.id'/>
<b:if cond='data:blog.url ==
data:blog.homepageUrl'>
<b:if
cond='data:post.title'>
<h2 class='post-title
entry-title'>
<b:if
cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'
expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType ==
"item"'>
<b:if
cond='data:post.title'>
<h1 class='post-title entry-title'
style='font-size:1.3em;'>
<b:if
cond='data:post.link'>
<a expr:href='data:post.link'
expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'
expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<b:else/>
<b:if
cond='data:post.title'>
<h2 class='post-title
entry-title'>
<b:if
cond='data:post.link'>
<a expr:href='data:post.link'
expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'
expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
</b:if>
</b:if>
8.
Save/Simpan template anda.
Menanggapi komentar beberapa sahabat yang meminta supaya diberikan
tutorial tambahan untuk editing bagian CSS template, maka saya tanggapi
dengan memberikan tutorial edit CSS seperti yang saya lakukan. Meskipun
pada template yang saya gunakan sekarang tidak ada kendala dengan
perubahan tag heading tanpa mengedit bagian CSS, namun saya sangat
berterima kasih atas masukan sobat blogger, karena SEMESTINYA memang ada
perubahan yang harus dilakukan terutama untuk bagian CSS post H1 dan
H2.
Dibawah ini adalah kode CSS awal khusus pengaturan bagian .post :
.post {
margin:.5em 0 0.5em;
border-bottom:1px solid $bordercolor;
padding-bottom:0.5em;
}
.post h3 {
margin:2px 0 0px 0;
font-size:131%;
font-weight:bold;
line-height:1.3em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:bold;
}
.post h3 strong, .post h3 a:hover {
color:$textcolor;text-decoration:underline;
}
.post-body { font:normal 13px Arial;
margin:8px 0 .75em;
line-height:1.6em;
}
.post-body blockquote {
line-height:1.3em;
}
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:none;
letter-spacing:.01em;
font: $postfooterfont;
line-height: 1.4em;
}
Perhatikan perubahan yang saya lakukan pada bagian CSS dibawah ini yaitu ada penambahan khusus untuk kode
.post h1 dan
.post h2. Sedangkan kode h3 pada template sudah saya rubah menjadi tag heading widget.
.post{
border-bottom:1px solid #f2f2f2;
padding-bottom:.5em;margin:.5em 0
}
.post h1,.post h2{font:normal 12px Arial;
font-weight:700;line-height:1.3em;
color:#333;margin:2px 0 0
}
.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:#333;font-weight:700
}
.post h1 strong,.post h1 a:hover,.post h2 strong,.post h2 a:hover{
color:#222;text-decoration:underline
}
.post-body{
font:normal 12px Arial;
line-height:1.6em;margin:8px 0 .75em
}
.post-body blockquote{
line-height:1.3em
}
.post-footer{
color:#444;text-transform:none;
letter-spacing:.01em;font:normal 11px Arial, sans-serif;
line-height:1.4em;margin:.75em 0
}
Untuk mengubah tag heading h2 menjadi h3 (widget) silahkan sobat baca lagi di
Cara Pengaturan Tag Heading yang sudah pernah saya posting sebelumnya. Semoga dengan
Tips Membuat Tag Heading Dinamis SEO Friendly ini dapat membantu meningkatkan nilai skor SEO blog anda. Selamat
mencoba..!!
0 Comments