Ditulis oleh: Ditulis pada: 2/18/2014
Seperti kita ketahui bahwa kode HTML header blogger memiliki begitu banyak kode untuk memunculkan title blog baik dengan teks maupun gambar. Dengan kode-kode tersebut kita bisa mengupload gambar atau logo blog dari tata letak. Namun jika kita menggunakan gambar sebagai title blog dengan ini, akan muncul masalah baru yaitu tidak terdetek tag h1 pada blog yang tentunya ini akan berdampak kurang baik terhadap seo blog itu sendiri.
Banyak yang menyarankan untuk mengatasi tidak terdeteknya h1 akibat title blog yang menggunakan gambar yang diupload melalui tata letak untuk menambahkan tag h1 langsung pada gambarnya melalui edit HTML. Namun jika blognya menggunakan manipulasi title tag seperti template-template Maskolis, maka akan muncul masalah baru lagi yaitu terdeteknya double h1 di postingan. Dan ini juga akan berakibat kurang baik terhadap seo blog.
Pada waktu yang lalu saya sudah pernah membahas masalah ini, silahkan Anda simak pada postingan-postingan berikut:
- Memanipulasi Title Blog Dengan Gambar Agar Terdetek H1
- Membuat Logo Blog Bisa Diklik Dan H1 Tetap Terdetek
Nah kali ini saya akan share sebuah trik untuk menyingkat HTML Header Blogger menjadi lebih simple dan juga bisa menggunakan gambar atau logo namun tetap terdetek h1 dan tidak akan menjadi double h1 di postingan. Sehingga mengganti title blog dengan gambar menjadi lebih mudah dan simple.
Sebagaimana kita ketahui bahwa header Blogger memiliki begitu banyak kode HTML seperti di bawah ini.
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Johny Ajaib (Header)' type='Header'>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>
<!--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>
</b:if>
</b:includable>
</b:widget>
</b:section>
Lumayan banyak kan kode HTML di atas?
Nah untuk menyingkatnya silahkan ganti kode di atas seluruhnya dengan kode di bawah ini:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='KOMPI AJAIB (Header)' type='Header'>
<b:includable id='main'>
<div id='header-inner'>
<div class='titlewrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<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>
</div>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><data:title/></span></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
Menjadi lebih singkat bukan? Tentunya ini akan mengurangi size HTML blog kita. Di sini juga saya menambahkan struktur schema.org pada headernya.
Nah jika Anda ingin menggunakan gambar atau logo sebagai title blog, silahkan ganti kode <data:title/> ini (ada 2 buah) yang ada di bawah kode <b:includable id='title'> ganti dua-duanya dengan kode gambar logo blog Anda menjadi seperti di bawah ini.
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<img alt='title-blog' height='60' src='URL LOGO BLOG' title='Kompi Ajaib' width='260'/>
<b:else/>
<a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><img alt='title-blog' expr:title='data:title' height='60' src='URL LOGO BLOG' title='Kompi Ajaib' width='260'/></span></a>
</b:if>
</b:includable>
Untuk height dan width silahkan sesuaikan dengan height dan weight gambar logo blog Anda dan untuk title-nya silahkan ganti dengan nama blog Anda.
Selesai....
Bagaimana? Mudah bukan? Selamat mencoba dan semoga bermanfaat.
UPDATE
Ternyata untuk mengganti title blog dengan gambar seperti di atas, menjadi error juga pada tag H1 homepage blog karena berupa gambar. Untuk mengatasinya agar title blog bisa diganti dengan gambar logo blog silahkan simak pada postingan Perbaikan Logo Blog Pada Header Blog