Cara mengatur SEO Heading Tag h1 h2 h3 Blog atau Website - Artikel ini merupakan lanjutan dari artikel Struktur SEO heading tag h1 h2 h3 Blogger. Seperti yang kita ketahui pengaturan struktur tag heading pada template blogger merupakan salah satu dari sekian banyak faktor yang berpengaruh pada SEO. Akan tetapi mungkin karena saya sendiri masih belajar, dari banyak tutorial di internet setelah diterapkan ternyata tidak berfungsi sama sekali, hal ini karena struktur dan kode HTML template blogger itu variatif.
Blogwalking sana-sini tanya para master tidak ada tanggapan akhirnya setelah memaksakan diri mempelajari beberapa template alhamdulillah berhasil juga. Dan ini sudah saya uji coba pada beberapa template. Wah sorry sob prakatanya kelamaan, tapi sebelum mengedit template ane sarankan sebaiknya memahami editing CSS terlebih dahulu walaupun dasar karena modifikasi tag heading ini akan merubah ukuran font judul posting, header dan deskripsi blog. Jangan lupa back up dulu template sebelumnya untuk keamanan.
1. Langkah pertama, merubah tag head Judul Blog menjadi h1 pada homepage dan h3 pada halaman posting.
Cari kode :
<div class='titlewrapper'
dst..dst..
dst..
</div>
Ganti semua kode di atas dengan kode ini :
<div class='titlewrapper' style='background: transparent'>
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/></h1>
<b:else/>
<h3 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/></h3>
</b:if>
</div>
Pada beberapa template biasanya terdapat lebih dari 1 kode <div class='titlewrapper' , ganti semuanya dengan kode di atas!
2. Merubah tag head Deskripsi Blog menjadi h2 :
Cari kode :
<div class='descriptionwrapper'>
dst...dst..
dst...
</div>
Ganti menjadi :
<div class='descriptionwrapper'>
<h2 class='description'><span><data:description/></span></h2>
</div>
Seperti pada langkah no. 1 jika terdapat lebih dari 1 kode <div class='descriptionwrapper'> ganti semuanya dengan kode di atas!
3. Merubah tag head posting menjadi h3 pada homepage, dan menjadi h1 pada halaman posting (single post)
a. Merubah tag heading posting menjadi h3 pada homepage :
Cari kode :
<div class='post hentry uncustomized-post-template' , pada 4 atau 5 baris di bawah kode ini akan sobat temukan kode seperti ini :
<h? class='post-title entry-title' itemprop='name'>
dst...dst...dst...
dst...dst...
dst...
</h?>
Ganti tag headnya menjadi h3, kalau sudah h3 tidak perlu dirubah.
b. Merubah tag head posting menjadi h1 pada halaman posting (single post)
Cari kode merah tebal yang beberapa baris di atasnya ada kode berwarna hijau seperti di bawah ini:
<b:includable id='post' var='post'>
kode bla...bla...bla...
kode bla...bla...bla...
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
kode bla...bla...bla...
kode bla...bla...bla...
</h3>
</b:if>
<div class='post-header'>
Lalu ganti semua kode yang berwarna merah dengan kode di bawah ini :
<a expr:name='data:post.id'/>
<b:if cond='data:blog.pageType != "item"'>
<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>
<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>
4. Preview lalu save template.
Penting :
Seperti yang sudah saya sebutkan di atas setelah berhasil dirubah maka ukuran font Judul Blog, Deskripsi, dan Judul Posting Blog sobat akan berubah. Sengaja saya tidak menyertakan editing CSS nya karena syntax CSS setiap template berbeda-beda, tapi sekedar chloe saja sobat bisa atur nilainya pada elemen h1{ h2{ dan h3{
Untuk menguji hasil perubahan tadi bisa sobat buka melalui browser mozilla firefox, buka blog sobat >> klik kanan >> Inspeksi Elemen. Untuk menguji tingkat SEO bisa di chkme.com. Atau juga sobat bisa menggunakan add-ons seperti Seoquake. Semoga berhasil, semangat dan salam blogger....
Demikian Cara mengatur SEO Heading Tag h1 h2 h3 Blog atau Website .....
Blogwalking sana-sini tanya para master tidak ada tanggapan akhirnya setelah memaksakan diri mempelajari beberapa template alhamdulillah berhasil juga. Dan ini sudah saya uji coba pada beberapa template. Wah sorry sob prakatanya kelamaan, tapi sebelum mengedit template ane sarankan sebaiknya memahami editing CSS terlebih dahulu walaupun dasar karena modifikasi tag heading ini akan merubah ukuran font judul posting, header dan deskripsi blog. Jangan lupa back up dulu template sebelumnya untuk keamanan.
1. Langkah pertama, merubah tag head Judul Blog menjadi h1 pada homepage dan h3 pada halaman posting.
Cari kode :
<div class='titlewrapper'
dst..dst..
dst..
</div>
Ganti semua kode di atas dengan kode ini :
<div class='titlewrapper' style='background: transparent'>
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/></h1>
<b:else/>
<h3 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/></h3>
</b:if>
</div>
Pada beberapa template biasanya terdapat lebih dari 1 kode <div class='titlewrapper' , ganti semuanya dengan kode di atas!
2. Merubah tag head Deskripsi Blog menjadi h2 :
Cari kode :
<div class='descriptionwrapper'>
dst...dst..
dst...
</div>
Ganti menjadi :
<div class='descriptionwrapper'>
<h2 class='description'><span><data:description/></span></h2>
</div>
Seperti pada langkah no. 1 jika terdapat lebih dari 1 kode <div class='descriptionwrapper'> ganti semuanya dengan kode di atas!
3. Merubah tag head posting menjadi h3 pada homepage, dan menjadi h1 pada halaman posting (single post)
a. Merubah tag heading posting menjadi h3 pada homepage :
Cari kode :
<div class='post hentry uncustomized-post-template' , pada 4 atau 5 baris di bawah kode ini akan sobat temukan kode seperti ini :
<h? class='post-title entry-title' itemprop='name'>
dst...dst...dst...
dst...dst...
dst...
</h?>
Ganti tag headnya menjadi h3, kalau sudah h3 tidak perlu dirubah.
b. Merubah tag head posting menjadi h1 pada halaman posting (single post)
Cari kode merah tebal yang beberapa baris di atasnya ada kode berwarna hijau seperti di bawah ini:
<b:includable id='post' var='post'>
kode bla...bla...bla...
kode bla...bla...bla...
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
kode bla...bla...bla...
kode bla...bla...bla...
</h3>
</b:if>
<div class='post-header'>
Lalu ganti semua kode yang berwarna merah dengan kode di bawah ini :
<a expr:name='data:post.id'/>
<b:if cond='data:blog.pageType != "item"'>
<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>
<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>
4. Preview lalu save template.
Penting :
Seperti yang sudah saya sebutkan di atas setelah berhasil dirubah maka ukuran font Judul Blog, Deskripsi, dan Judul Posting Blog sobat akan berubah. Sengaja saya tidak menyertakan editing CSS nya karena syntax CSS setiap template berbeda-beda, tapi sekedar chloe saja sobat bisa atur nilainya pada elemen h1{ h2{ dan h3{
Untuk menguji hasil perubahan tadi bisa sobat buka melalui browser mozilla firefox, buka blog sobat >> klik kanan >> Inspeksi Elemen. Untuk menguji tingkat SEO bisa di chkme.com. Atau juga sobat bisa menggunakan add-ons seperti Seoquake. Semoga berhasil, semangat dan salam blogger....
Demikian Cara mengatur SEO Heading Tag h1 h2 h3 Blog atau Website .....
