Optimasi Tag Heading pada Judul Artikel Blog - Selain melaakukan optimasi pada keyword dan meta tag, optimasi pada heading judul artikel di blog sobat juga memegaang peranan penting dalam SEO On Page. Hal ini menjadi krusial bagi sebuaah artikel agar bisa optimal dalam SEO On Page karena search engine membaaca struktur heading pada suatu web atau blog, Heading yang paling utaama atau yang disebut H1 menginformasikan kepada search engine tentang informasi utama dari sebuah halaaman.
Optimasi Tag Heading Judul Artikel
Mengapa kita perlu melakukan optimasi tag heading pada judul artikel blog, terutaama blogger atau blogspot? Karena secara default, pada setiap halaaman yang ada di blog dengan engine blogspot menggunaakan heading H1 untuk nama blog, sedaangkan judul artikel "hanya" dikasih porsi sebagai H3. Hal ini bukaanlah suatu masalah jika halaaman yang ditampilkan adalah halaaman utama atau home page, tapi jika halaaman yang ditampilkan adaalah halaman tentang suatu artikel hal ini bisa menjaadi kurang baik untuk optimasi on page kita.
Jadi yang akan kita lakukan untuk optimasi tag heading judul artikel blog adalah:
H1 pada home page adalah judul blog, sedangkan pada halaman artikel atau posting, H1 kita set ke judul tersebut dan merubah judul blog ke H2 supaya tidak terdapat dobel H1 pada heading halaman blog kita.
Ya sudah, langsung saja kita lakukaan modifikasi untuk optimasi tag heading pada judul artikel. Ikuti langkah2 di bawah ini:
- Seperti biasa, login dan menuju ke Rancangan, Edit HTML dan jangaan lupa centang Expand Template Widget. Jangan lupa juga untuk membaack up template sobat untuk jaga2.
- Cari kode berikut pada template sobat :
<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>
Jika sudah ketemu, ganti dengan kode berikut ini:
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<b:if cond='data:blog.pageType != "item"'>
<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> - Langkah di atas sudah merupaakan salah satu point dari optimasi tag heading h1, tetapi itu hanya untuk judul blog. Langkah selaanjutnya, kita akan merubah judul artikel atau posting supaya memakai H1 ketika halaaman artikel tersebut ditampilkan. Cari kode berikut pada template sobat:
<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 kode tersebut dengan kode seperti di bawah ini:
<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' 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>
Sampaai di sini sobat sudah melakukan laangkah-langkah untuk optimasi tag heading pada judul artikel dan bersifat dinamis, tetaapi akan berdampak pada berubaahnya ukuran font judul blog sobat karena judul blog ketika tidak di halaaman utama menggunakan style p seperti yang sudaah di sebutkan di atas.
Untuk itu, sobat perlu melaakukan sedikit modifikasi lagi yaitu dengan cara menaambahkan p style pada css templaate sobat dan harus sama persis dengan style H1 yang ada di template sobat, contohnya seperti ini:
#header h1{elemen/ukuran css title blog kamu}
#header h1 a{Disini elemen/ukuran css title blog kamu}
Maka tambahkan css seperti berikut ini:
P.title {Nah Disini harus sama dengan elemen/ukuran css title H1 blog}
P.title a{Disini juga harus sama dengan H1 a judul blog}
Untuk makin jelaasnya kita coba dengan css berikut ini:
Jika css header kamu seperti ini:
#header h1{font-size:23px;font-weight:700;float:left;width:40%;text-shadow:1px 0 #2B4462;letter-spacing:-1px}
#header h1 a{color:#fff;text-decoration:none}
Maka tambahkan dibaawahnya dengan kode css:
P.title {font-size:23px;font-weight:700;float:left;width:40%;text-shadow:1px 0 #2B4462;letter-spacing:-1px}
P.title a{color:#fff;text-decoration:none}
Kalau sudah selesai, silahkan save :) yang perlu dicatat, jangaan sampai ada dobel H1 pada tiap halaman blog sobat. Untuk cek heading di blog, sobat bisa gunaakan tools di sini
Semoga artikel tentaang optimasi tag heading pada judul artikel blog ini bermanfaat. Bagi pengguna WordPress silahkan baca : tag heading dinamis untuk wordpress. Gimana? sudah dirubah kah setingaan template sobat? Jika kurang paham sobat bisa bertaanya melalui kolom komentar.
.gif)
.gif)
