Cara supaya tag H1 tidak hilang saat header blog menggunakan gambar

Terkadang beberapa perubahan terus dilakukan oleh para pemilik situs agar tampilan situs yang mereka kelola bisa terlihat lebih cantik dan menarik. Pada artikel yang lain saya telah membahas mengenai cara menggunakan gambar atau logo pada header blog dimana hal tersebutpun banyak digunakan oleh para pemilik situs dalam memodifikasi tampilan situs atau blog yang mereka miliki.

Akan tetapi ada yang perlu digaris bawahi ketika anda memutuskan untuk mengganti header blog dengan logo atau gambar,karena setelah anda melakukan perubahan tersebut maka tag H1 (header atau judul blog) biasanya akan menghilang pada beberapa halaman atau bisa juga terjadi pada semua halaman artikel.

Tag H1 pada sebuah situs merupakan komponen penting sebagai salah satu syarat agar sebuah situs dapat terindeks oleh google bot sekaligus memiliki pengaruh besar terhadap peningkatan nilai SEO blog tersebut. Bagi para blogger senior yang mungkin sudah ahli dibidang ilmu koding tentu akan dengan mudah mengatasi masalah tersebut agar tag H1 bisa tetap terbaca oleh mesin pencari.

Sementara bagi kita yang masih junior serta masih sangat awam dengan dunia perkodingan tentu akan merasa kesulitan,akan tetapi tidak perlu khawatir karena para senior yang baik hati telah membagikan cara untuk mengatasinya sehingga kita bisa mengikutinya melalui cara-cara tersebut.

Silahkan masuk ke akun blogger kalian kemudian pilih menu tema lalu klik edit html.

Selanjutnya cari kode script seperti di bawah 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 + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>

Jika sudah ketemu selanjutnya ganti dengan kode script di bawah ini

<!--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>

Setelah diganti,langkah berikutnya adalah mencari kode </head> kemudian letakan script di bawah ini di atas kode </head>

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

Langkah terakhir adalah klik simpan.

Demikianlah tutorial cara atasi tag h1 yang hilang saat header blog menggunakan gambar,silahkan ikuti langkah-langkah di atas agar situs anda serta semua artikelnya dapat terindeks dengan benar oleh google bot.