TAG H1 HILANG PADA SAAT UJI BLOG DI WEBMASTER PENCARIAN BING

Ini pengalaman, jika tag h1 hilang artinya problem yang cukup serius untuk SEO blog karena hampir semua blogger kawakan tahu peranan h1 dalam blog itu penting bagi SEO blogger. Walaupun SEO juga bukan segalanya yang membuat sebuah blog bisa sukses. Namun pada saat pengujian blog di tool webmaster Bing problem ini juga dimunculkan dengan peringatan kira kira berbunyi "tidak ditemukan h1 blogger yang sangat penting untuk menunjang SEO"

Penyebab "menghilangnya" h1 adalah karena header dipasangi logo berupa gambar ketimbang judul tulisan terdiri dari huruf, juga adalah karena para robot txt tidak bisa membaca gambar, mereka hanya membaca text. Cara mengatasinya dengan cara paling mudah adalah dengan  mencari kode mirip mirip dibawah ini dengan masuk ke opsi setting dasbor blogger >Tema>edit HTML:

<!--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 + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
Cari dengan cara menekan ctrl+F pada keyboard lalu pastekan <div id= 'header-inner'> tekan enter. Jika sudah ketemu hapus semua dan ganti dengan kode dibawah:

<!--Show the image only-->
<div id='header-inner'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<h1>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
</h1>
<b:else/>
<p>
<a expr:href='data:blog.homepageUrl' style='display: block'>

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
</p>
</b:if>

Dan untuk menghilangkan margin pada dari tag h1 akibat perubahan tadi dan juga tag p supaya image header bisa sesuai di header bisa di adjust besar dan kecilnya, maka tambahkan saja kode css dibawah ini dan letakan tepat di atas atau sebelum tag </head>

<style>
#header-inner h1, #header-inner p {
margin:0!important;
}
#header-inner img {
width:100%;
height:auto;
}
</style>

Jika kita merasa tampilan image pada header blog menjadi sangat lebar dan besar dengan   width:100%;         maka kita bisa merobah ukuran 100% menjadi 50%  atau 30% sesuai dengan kebutuhan blog. Misalnya pada blog ini saya menerapkan aturan atau ukuran width: auto;

Lihat contoh di bawah

<style>
#header-inner h1, #header-inner p {
margin:0!important;
}
#header-inner img {
width:auto;
height:auto;
}
</style>

 Tentu saja banyak cara untuk mengembalikan tag h1 agar kembali tampil dan berfungsi. Itu hanya salah satu cara.