Sebelum Mengoptimasi heading, ada baik nya kita simak dulu sekilas pengertian tentang tag heading.
Pengertian dan Fungsi
Dalam Suatu Blog, Tah h1 - h6 merupakan elemen terpenting untuk optimalisasi On-Page SEO. Di bawah ini ada sedikit penjelasan yang kurang lebih nya harap dimakslumi.
- Fungsi <h1> :
- Fungsi <h2> :
- Fungsi <h3> :
- Fungsi <h4> :
- Fungsi <h5> dan <h6> :
Optimasi h1
Heading sebua web amatlah berperan penting dalam seo on page. Pada artikel kali ini, sesuai judul saya hanya memfokuskan pada pembahasan pada pengoptimasian Tag H1. Saya sedikit menjelaskan tentang cara mengubah pengaturan atau settingan bawaan dari template blog. Ada pun cara optimasi H1 pada judul posting adalah seperti ini :
- Login ke blogger,
- pilih rancangan,
- edit HTML,
- centang expand template widget
- untuk keamanan, harap back up template anda terlebih dahulu.
- Cari kode berikut : gunakan Ctrl+f untuk mempermudah pencarian
<div id="header-inner">
<div class="titlewrapper">
<h1 class="title">
<b:include name="title">
</b:include></h1></div>
<b:include name="description">
</b:include>
</div>
hapus semuanya dan gantikan dengan kode di bawah ini.
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<b:if cond='data:blog.url = = data:blog.homepageUrl'>
<H1 class='title'>
<b:include name='title'/>
</H1>
<b:else/>
<p class='title'>
<b:include name='title'/>
</p>
</b:if>
</div>
<b:include name='description'/>
</div>
- Selanjutnya, merubah H1 pada judul posting.
<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'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Jika sudah ketemu, ganti dengan kode dibawah ini:
<b:if cond='data:blog.url = = data:blog.homepageUrl'>
<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'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<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' 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>
- Selesai. untuk sementara, template nya sudah seo friendly dalam hal tag heading h1,h2...h6 saja. #belum kelar amat.
Bagi blog yang memakai gambar sebagai header blog, maka cara ini belum sempurna karena tulisan judul blog sobat akan berbeda ketika di home page dan bukan home page. Sedikit penambahan kode lagi untuk mengatasi masalah ini.
cari kode berikut :
.Header h1
{
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left)
$(header.shadow.offset.top)
$(header.shadow.spread)
rgba(0, 0, 0, .2);
}
Tiap template mungkin berbeda-beda, jadi inti nya cari kode yang mirip dengan kode di atas. Untuk keterangan untuk H1 pada judul blog, tambahkan display: none sehingga menjadi
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left)
$(header.shadow.offset.top)
$(header.shadow.spread)
rgba(0, 0, 0, .2);
display: none;
}
Maksud dari modifikasi ini adalah agar h1 tetap ada tetapi berbauar alias kasat mata, karena jika menggunakan header gambar maka kita tidak dapat memasukkan h1 pada judul blog.
- Selanjutnya kita pergi ke kode yang menyatakan bahwa kita memakai gambar sebagai header, kode nya seperti ini :
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement=="BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
kita tambahkan pengecekan apakah dia di home page atau tidak, jika ya maka judul blog harus di rubah ke h1. Berikut langkah nya..
<!--Show the image only-->
<div id='header-inner'>
<b:if cond='data:blog.url = = data:blog.homepageUrl'>
<h1>Goresan Online</h1>
</b:if>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
Dengan begitu, h1 pada judul blog saat di home page tetap terdeteksi oleh search engine, sedangkan kode yang di modif pada saat tidak memakai image (ketika merubah judul blog ke H1 ketika di home page) sudah tidak berlaku lagi. Selain itu Optimasi Tag Heading H1 Pada Judul Artikel Blog yang sobat lakukan juga SEO Friendly. Kalau sudah beres coba sobat cek disini.
