Ketika Search Engine Spider datang mengunjungi blog kita, untuk pertama kalinya yang dicrawler adalah H1. Kenapa harus H1? karena H1 adalah Judul atau Tanda Pengenal yang paling utama bagi Search Engine. maka dari itu disini akan membagas bagai mana cara membuat Dynamic Tag Heading.
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’>4. Lalu Ganti kode yang di atas dengan kode berikut ini :
<div class=’titlewrapper’>
<h1 class=’title’>
<b:include name=’title’/>
</h1>
</div>
<b:include name=’description’/>
</div>
<div id='header-inner'>5. Lalu Cari lagi kode seperti di bawah ini :
<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>
<a expr:name=’data:post.id’/>6. Ganti kode diatas dengan kode di bawah ini :
<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>
<a expr:name='data:post.id'/>7. Carilah kode seperti dibawah ini pada template anda :
<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>
<!-- only display title if it's non-empty -->8. Silahkan anda ganti tag h2 menjadi h3
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2> </b:if>
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.
Sampai di sini sebenarnya penerapan Cara Membuat Dynamic Tag Heading H1 H2 H3 sudah
berhasil, ini akan menjadikan judul blog di halaman posting berubah. Hal ini di sebabkan karena pengaruh dari Tag H2 yang sudah berubah menjadi
Tag H1, maka CSSnya tidak sesuai. Nah oleh karena itu kita butuh cara
lagi untuk menyesuaikannya. Tinggal mengedit pada bagian CSSnya. Ikuti
langkah-langkahnya berikut:
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/AVvXsEg7I-8Wz6enVIBqd_u1iy4WciVP5QAMQBxtwlYnhD0vd4Gt4P96hial8C_gRR1OV0k5UWvBLw5YeDesXbBqKamgRgdWOS2v_aff3XOHjxufVjl6op5T5DjSkhhBNFDP84kpqsS_mpMVbOk/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/AVvXsEg7I-8Wz6enVIBqd_u1iy4WciVP5QAMQBxtwlYnhD0vd4Gt4P96hial8C_gRR1OV0k5UWvBLw5YeDesXbBqKamgRgdWOS2v_aff3XOHjxufVjl6op5T5DjSkhhBNFDP84kpqsS_mpMVbOk/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{4. Simpan.
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}
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).
