Cara Mudah Mengatasi Tag H1 Hilang Ketika Menggunakan Image Untuk Header Blog

Cara Mudah Mengatasi Tag H1 Hilang Ketika Menggunakan Image Untuk Header Blog

Bola Hero Gawai

Cara Mudah Mengatasi Tag H1 Hilang Ketika Menggunakan Image Untuk Header Blog

Cara Mudah Mengatasi Tag H1 Hilang Ketika Menggunakan Image Untuk Header Blog
Salah satu cara mempercantik tampilan blog yaitu dengan menggunakan image untuk header blog. Hal ini bisa di lakukan pada template default Blogger dan pada beberapa template custom yang masih menggunakan kode <header/> default Blogger.

Namun sayang, dengan menggunakan image untuk header blog, maka tag H1 menjadi hilang. Sementara keberadaan tag H1 sangat dibutuhkan untuk menunjang seo blog. Sebagai contohnya seperti gambar di bawah ini, tag H1 menghilang dari header blog setelah menggunakan image untuk header blog.

Tag H1 Hilang Ketika Menggunakan Image Untuk Header Blog

Bagi yang sudah bisa koding, tentu hal ini sangat mudah diatasi, namun bagaimana bagi yang belum mahir koding?

Dan tag header yang direkomendasikan sampai saat ini yaitu menggunakan tag header yang dinamis, artinya di halaman postingan menggunakan judul postingan untuk tag H1 sementara di halaman selain halaman postingan menggunakan judul blog untuk tag H1. Sementara untuk tag H2, H3, dan seterusnya bebas digunakan untuk element lainnya dan bisa lebih dari satu.

Silahkan pelajari cara membuat header dinamis dari postingan Maskolis, hampir semua blog sekarang menggunakan tag header dinamis dari Maskolis tersebut.

Nah agar tag H1 tidak menghilang saat menggunakan image untuk header blog dan menjadi dinamis (menjadi tag H1 di halaman utama dan berubah menjadi tag p di halaman postingan, sehingga tag H1 tidak menjadi 2 buah di halaman postingan), ada cara mudah untuk mengatasinya.

Mengatasi Tag H1 Hilang Ketika Menggunakan Image Untuk Header Blog

Mengatasi Tag H1 Hilang Ketika Menggunakan Image Untuk Header Blog

Agar menjadi seperti gambar di atas, kita hanya perlu melakukan satu langkah mudah. Silahkan cari kode seperti di bawah ini di 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>

Kemudian silahkan ganti dengan kode 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>

Kemudian tambahkan CSS di bawah ini untuk menghilangkan margin dari tag H1 dan tag p agar image header pas di header. Silahkan simpan di atas kode </head>


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

Setelah itu save edit HTML, lalu silahkan upload image untuk header blog melalui gadget header di Tata Letak kemudian klik edit dan pilih option Instead of title and description.

Sebenarnya saya sudah memposting beberapa cara untuk mengatasi tag H1 yang hilang ini, coba saja ketikan Header Blog di kotak pencarian di blog ini. Namun postingan ini yang paling mudah dilakukan.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

25 Comments Add Comment

Ini nih penyakit saya kang..hahaa..terima kasih Kang sdh posting..hahahyyy

Balas

Sama-sama mas, silahkan dicoba....

Balas

ikut nyimak kang Adhy

Balas

kang, punten mau nanya, yang css header inner h1 penempatannya dimana yah? punten kirang ngartos saya teh, hehe..

Balas

Pakai css di atas aja kang, simpen di luhureun </head>

Balas

Silahkan kang :)

Balas

Owh di atas ternyata udah dijelasin yaa, punten tadi gak kelihatan... hehe.. haturnuhun nya kang...

Balas

dik adhy ,, ada email kk kirim ,, coba di cek ,,

Balas

Kalau saya mah jarang ngebetulin kang karena menurut saya mah sudah normal begitu kang ahi hi hi.

Balas

Maaf Kang Adhy mau tanya, saya pakai template kompi males, dan saya juga pasang ambar di header, apakah juga harus diganti dengan kode seperti diatas mas untuk mengatasi h1

Balas

Untuk Kompi Males tidak menggunakan kode header default blogger, jadi harus diset manual dengan css mengganti background header dengan image. background:url(........) no-repeat top left;

Balas

Sudah dicek :)

Balas

Bener2 menambah wawasan belajar disini

Balas

Kang, punten mohon di cek lagi yah upami sempet, udah betul atau belum setingan HTML blog saya.. htr nuhun.

Balas

Ok mas, makasih banget jawabannya.
Ada sedikit yang ingin saya sampaikan, saya pakai kompi males yang v3, terus bagian

Sampai style, saya ganti dengan kompi males V5, sejak saat itu traffic langsung naik drastis mas, apa emang ada pengaruhnya ya?

Balas

Maksud saya dari head, sampai style mas.

Balas

Iya ada perubahan di bagian head yang berpengaruh di serp, bisa dilihat dari stats untuk pengunjung terbesar dari Google ya...

Balas

Iya mas, belajar bersama :)

Balas

Beberapa template baru sudah menerapkan ini saya liat kang

Balas

terima kasih kang :)

Balas

nah saya pernah mengalaminya kang, namun saya hanya memasang tag h1 manual tanpa kondisi, karna saya ga akan ganti ganti lagi tag nya jd ya sudah saya pasang manual h1 nya :D

Balas

mas adhy kalau ditambahkan markup h1 seperti ini kira2 efek bedanya gimana dengan seperti yang dipost ini ?

<div id='header-inner'>
<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>

Balas

Jika templatenya menggunakan title tag dnamis, maka akan menjadi double H1 di postingan.
Tag H1 yang bagus sebaiknya H1 di halaman index adalah judul blog sedangkan H1 di halaman postingan adalah judul postingan.

Balas

oh ya nanti tak coba pelajari, makasih mas pencerahannya :D

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×