» » » Cara Menyingkat Kode HTML Header Pada Blog

Cara Menyingkat Kode HTML Header Pada Blog

Add Comment ,

Jika kita perhatikan pada HTML Header blogger ada banyak kode yang terpasang guna untuk menampilkan title blog, ada yang menggunakan gambar ada juga yang menggunakan teks. Dari kode kode yang terpasang tersebut kita dapat dengan mudah mengupload logo atau gambar melalui tata letak. Namun aka menimbulkan masalah saat kita menggunakan gambar pada title blog. Masalah tersebut adalah tag H1 pada blog sering tidak terdeteksi dan tentunya sangat berpengaruh pada SEO Blog kita.

Setelah blogging keberbagai blog maupun webset teman=teman, banyak saran yang saya dapatkan dari sobat-sobat di forum maupun komunitas SEO cara untuk mengatasi masalah tidak terdeteksinya tag H1, ada yang menyarankan langsung melalui Edit HTML dan memang berhasil namun akan timbul juga masalah jika blog tersebut menggunakan manipulasi title tag seperti contoh template Maskolis, jika menggunakan cara upload gambar title melalui Edit HTML akan terdeteksi double tag H1 dan sekali lagi hal ini akan sangat berpengaruh pada SEO Blog tersebut.

Terkait dengan masalah diatas di postingan kali ini kita akan sama-sama belajar mengatasi hal tersebut yaitu dengan Trik Menyingkat HTML Header Blogger menjadi lebih simple dan tidak terdeteksi double tag H1, jadi saat sobat mengganti title tag menggunakan gambar akan lebih mudah dan simple. Lalu bagaimana cara merubah dan cara memasangnya. mari simak tutorial dibawah ini.

Tutorial Cara Menyingkat HTML Header Blogger. 


1. Buka dan lihat kode kode yang terpasang pada header blog ada banyak kode HTML.
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Dibalik SEO (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 == &quot;BEHIND&quot;'>
      <!--
      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 != &quot;item&quot;'>
<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='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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 + &quot;_headerimg&quot;' expr:src='data:sourceUrl' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
<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 != &quot;item&quot;'>
<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>

Bagaimana kodenya lumayan banyak kan ?
Untuk menyingkatnya diperlukan Trik, silahkan sobat ganti kode diatas menggunakan kode berikut ini :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Dibalik SEO (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 != &quot;item&quot;'>
<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>

Perhatikan kode yang baru saja diganti jadi lebih singkat dan simple. Secara otomatis akan mengurangi size pada HTML di Blog tersebut dan kode diatas saya tambahkan juga kode struktur schema.org pada header.

2. Jika sobat ingin menggunakan logo atau gambar sebagai title blog silahkan sobat ganti kode <data:title/> lokasinya berada di bawah kode <b:includable id='title'> nah silahkan ganti menggunakan kode gambar logo blog sobat yang akan menjadi seperti dibawah 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='Dibalik SEO' 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='Dibalik SEO' width='260'/></span></a>
</b:if>
</b:includable>

Perhatikan kode diatas untuk Height dan Widht silahkan sobat sesuaikan saja dengan ukuran yang di inginkan dan selesai. Selamat mencoba dan semoga Sukses.

0 Response to "Cara Menyingkat Kode HTML Header Pada Blog"

Langganan: Posting Komentar (Atom)