Cara Menyingkat HTML Header Blogger

Jika kita perhatikan pada HTML Header blogger ada banyak kode yang terpasang yang gunanya 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. Nah permasalahan akan timbul saat kita menggunakan gambar pada title blog yaitu sering tidak terdeteksi tag H1 pada blog, tentunya hal ini akan sangat berpengaruh pada SEO Blog tersebut.

Banyak saran yang saya dapatkan dari sobat-sobat di forum maupun komunitas SEO untuk mengatasi 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.

Bagi sobat yang mau mencobanya mari kita simak bersama Cara Menyingkat HTML Header Blogger. 

Langkah Pertama

Biasanya seperti ini kode kode yang terpasang pada header Blogger 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 sobat 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 dan secara otomatis akan mengurangi size pada HTML di Blog tersebut dan kode diatas saya tambahkan juga kode struktur schema.org pada header.


Langkah Ke Dua
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.