Cara Membuat dan Penggunaan H1-H2-H3 dalam SEO
August 09, 2019
Add Comment
H1 | H2 | H3 adalah sebuah code HTM yang berfungsi untuk mengubah tulisan. Tag Heading biasa di gunakan untuk membuat judul pada sebuah artikel atau dokument. Spesifikasi Tag Heading mempunyai berbagai tingkatan yang biasa di sebut H1, H2, H3, H4, H5 dan H6 yang masing masing mempunyai fungsi yang berbeda. Dalam melakukan Optmasi SEO Onpage, Tag Heading juga merupakan faktor penting yang harus di perhatikan. Namun banyak orang yang belum tahu Pengertian Dan Fungsi Tag Heading. Mereka biasanya hanya terfokus pada penulisan ertikel saja dan hanya memakai template yang tidak SEO Friendly. Kenapa sering di abaikan...? karena letak Tag Heading berada pada code htlm template blog bukan berada pada halaman entri baru yaitu mode html.
Baca Juga
Fungsi Penggunaan H1 | H2 | H3
Pengertian atau Fungsi Tag <h1> - <h6> Dalam Suatu Blog, sebenarnya merupakan Elemen Terpenting dalam Cara Optimalisasi On-Page SEO
Mari kita Cari tahu Sebernya Apa sih Fungsi | <h1> | <h2> | <h3> | <h4> | <h5> | <h6> Dalam Blog, kog ada sampai 6 segala
Kupas Tuntas Fungsi Heading | <h1> | <h2> | <h3> | <h4> | <h5> | <h6> Dalam Blog
1. Fungsi <h1> :
Tag <h1> ini digunakan Untuk Nama Blog ( jika anda sedang membuka homepage ) tapi Judul Blog idealnya harus berganti menjadi <h2> ( jika anda sedang membuka postingan )
2. Fungsi <h2> :
Tag <h2> digunakan Untuk menulis Judul Artikel ( jika anda sedang berada di homepage ) dan Judul Artikel yang baik harusnya memakai <h1> ( dengan catatan Anda sedang berada pada halaman posting )
3. Fungsi <h3> :
Tag <h3> digunakan untuk menuliskan Sub-Judul atau penjelasan dari Judul Posting yang Anda buat
Cara Membuat H1 | H2 | H3 di Blogspot
Pada umunya, Template Standar hanya menggunakan Tag h1 untuk Judul Blog di home page dan judul blog di postingan. sudah pasti tidak SEO banget lah, hehe. Agar web atau blog kita lebih dinamis dan SEO friendly untuk Home page Tag H1 tetap sebagai judul blog sedangkan Tag H1 di halaman postingan, Makas kita ubah menjadi Tag H1 untuk Judul postingan.
Untuk Cara Membuat Dynamic Tag Heading H1 H2 H3 ikuti langkah-langkah sebagai berikut:
1. Masuk ke www.blogger.com
2. Pilih rancangan - HTML - Jangan lupa Centang Expand Widget.
3. Cari kode berikut dengan menggunakan ctrl+f agar mudah dalam
mencarinya:
<div id=’header-inner’>
<div class=’titlewrapper’>
<h1 class=’title’>
<b:include name=’title’/>
</h1>
</div>
<b:include name=’description’/>
</div>
4. Lalu Ganti kode yang di atas 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>
5. Lalu Cari lagi kode seperti di bawah 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>
6. Ganti kode diatas dengan kode di bawah 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>
7. Carilah kode seperti dibawah ini pada template anda :
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2> </b:if>
8. Silahkan anda ganti tag h2 menjadi h3
9. Tergantung pada widget anda di homepage anda, apabila widget anda ada 5 buah, ya ubah yang 5 buah widget anda di homepage untuk menjadikan tag h2 menjadi h3
10. Klik Simpan.
........................................................................
Peringatan !
Khusus untuk Pengeditan CSS ini sesuaikan dengan CSS di template masing-masing. Karena masing-masing Template berbeda. Silahkan ikuti dan amati Perubahan pada CSS Template seperti di bawah ini.
1. Cari CSS bagian Header seperti berikut:
#header{
width:980px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtdQ-o0gk1JKR6u4ZEpqtZfZ88E6NMxmMHI69Y2EL5JveBOOt4ndmD5LO_ZtUcMrdzt8D6TgC8BjtLIMKfCUI1b8pRKjapuoyw-luldPU4T3Q8FAVfvMHGaFMY8z9opIiwpHkACt9_Seo/s1600/header2.jpg) no-repeat;
color:#000099;height:120px;
text-align:left}
#header h1{
margin:0;
padding:50px 20px 5px 15px;
line-height:1.2em;
text-align:left;
font:normal bold 200%'Trebuchet MS',Verdana,Arial,Sans-serif;
color:#00000}
2. Lakukan Penyesuaian Kode dengan cara Menambahkan Kode berikut tepat di bawahnya:
#header h1{
margin:0;
padding:50px 20px 5px 15px;
line-height:1.2em;
text-align:left;
font:normal bold 200%'Trebuchet MS',Verdana,Arial,Sans-serif;
color:#00000}
#header h2 {
margin:0;
padding:50px 20px 5px 15px;
line-height:1.2em;
text-align:left;
font:normal bold 200%'Trebuchet MS',Verdana,Arial,Sans-serif;
color:#00000}
3. Sehingga menjadi seperti berikut:
#header{
width:980px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtdQ-o0gk1JKR6u4ZEpqtZfZ88E6NMxmMHI69Y2EL5JveBOOt4ndmD5LO_ZtUcMrdzt8D6TgC8BjtLIMKfCUI1b8pRKjapuoyw-luldPU4T3Q8FAVfvMHGaFMY8z9opIiwpHkACt9_Seo/s1600/header2.jpg) no-repeat;
color:#000099;height:120px;
text-align:left}
#header h1{
margin:0;
padding:50px 20px 5px 15px;
line-height:1.2em;
text-align:left;
font:normal bold 200%'Trebuchet MS',Verdana,Arial,Sans-serif;
color:#00000}
#header h1{
margin:0;
padding:50px 20px 5px 15px;
line-height:1.2em;
text-align:left;
font:normal bold 200%'Trebuchet MS',Verdana,Arial,Sans-serif;
color:#00000}
4. Simpan.
5. Selesai.
Demikianlah Cara Membuat Dynamic Tag Heading H1 H2 H3 diatas sudah saya terapkan di template ini dan Berhasil. untuk Mengecek Berhasil atau tidaknya apa yang telah kita coba terapkan ini, anda bisa mencar H and ALT Tag Checker di google atau SEO Quaqe addons).
Sekian...........
