SEO Header Gambar Blogspot Default Template ~ Tips

Optimasi SEO Blogger perlu dilakukan saat header atau kepala merupakan tempat menaruh judul blog. Baik itu berupa teks ataupun gambar sebagai identitas blog kita. Untuk kualitas terbaik SEO dari template default, judul berupa teks adalah yang terbaik. Namun saat blog memakai gambar header maka terjadilah kesalahan yaitu hilangnya Tag H1 pada header blog tersebut. Untuk mengatasi masalah ini kita perlu mengganti kode header dari khusus teks menjadi kode header khusus gambar. Namun kebalikannya, jika kamu ingin memilih judul baik berupa tulisan maupun gambar penggantiannya cukup mudah dan aman yaitu hanya pada halaman blogger bukan edit HTML lagi. Berikut ulasan dan pengalaman kami mengenai perubahan widget header template bawaan :

A. Alasan hilangnya H1 Tag Header

Pada template bawaan blogspot sudah tertulis seperti berikut :

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.

Artinya adalah setiap gambar tidak dibuat seperti pada gambar aslinya. Jika pengguna (kita) tidak menyusutkan gambar maka lebar header akan diatur otomatis.

Kode teks bawaan dari blogger tersebut mendefinisikan bahwa hanya teks yang berpengaruh pada tag Header bukan gambar. Jadi perlu kita rubah kode header agar H1 tidak hilang pada gambar namun H1 tetap ada pada judul blog dengan tulisan ataupun dengan gambar.

B. Bukti Missing H1 dengan Kualitas SEO

Bukti hilangnya Tag Header H1 dapat kita periksa dengan alat untuk mengetahui kualitas SEO blogger kita. Check me menjelaskan bahwa Tag Header H1 hilang saat judul blog diganti dengan gambar. Namun pada saat judul tidak memakai gambar melainkan teks (tulisan) maka Tag Header H1 dapat muncul atau terdeteksi. Hal ini juga dipakai oleh Google untuk melakukan crawling (usaha penelusuran blog). Bagaimana kualitas SEO bila judul saja hilang, benar bila seo header khusus blogspot pada gambar harus diperbaiki bukan?

Coba masukkan alamat blog kamu pada website SEO tool Checkme.com dan bandingkan hasilnya antara penggunaan judul berupa teks dan gambar.

C. Mengatasi Hilangya Tag Header H1 pada Gambar Header Default Blogspot Template

Masuk ke dasboard blogger.com

Pilih tata letak

http://probolinggo-seo.blogspot.com/

Pilih Edit Header

http://probolinggo-seo.blogspot.com/

Pilih Upload gambar dari PC

Tata letak upload gambar header dari pc

Pilih selain judul dan keterangan

Simpan dan kamu telah selesai

D. Mengganti kode Header lebih SEO Friendly

Setelah kamu mengunggah gambar untuk header tersebut, kode dalam HTML akan terlihat seperti berikut:
<b:widget id='Header1' locked='true' title='Optimasi SEO | Tips SEO Blog | SEO Google Blogger Default (Header)' type='Header'>
<b:includable id='main'>

<b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == "BEHIND"'>
      
      <b:if cond='data:mobile'>
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </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'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        </b:if>
    <b:else/>
      
      <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 + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        
        <b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
          <b:include name='description'/>
        </b:if>
      </div>
    </b:if>
<b:else/>
    
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>
</b:if>
</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'><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:widget>
</b:section>

Untuk lebih SEO kamu tinggal mengganti semua kode tersebut dan kamu rubah dengan kode berikut :
<b:widget id='Header1' locked='true' title='Optimasi SEO | Tips SEO Blog | SEO Google Blogger Default (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 == "REPLACE"'>
     <div id='header-inner'>

     </div>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<a expr:href='data:blog.homepageUrl'><p class='title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "px;" + "_height: " + data:height + "px;" + " background-repeat: no-repeat; margin-top:0px;"' expr:width='data:width'><h1 style='display:none !important;'><b:include name='title'/></h1></p></a></b:if>

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<a expr:href='data:blog.homepageUrl'><p class='title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "px;" + "_height: " + data:height + "px;" + " background-repeat: no-repeat; margin-top:0px;"' expr:width='data:width'/></a></b:if>

<b:else/>

     <div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "px;" + "_height: " + data:height + "px;" + " background-repeat: no-repeat; "' id='header-inner'>

     <div class='titlewrapper'>
         <h1 class='title' expr:href='data:blog.homepageUrl' style='border-width: 0px; font-size:0px;'><b:include name='title'/></h1>
     </div>
        <b:include name='description'/>
    </div>
    </b:if>

<b:else/>

    
    <div id='header-inner'>

      <div class='titlewrapper'>


<b:if cond='data:blog.url == data:blog.homepageUrl'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
</b:if>




<b:if cond='data:blog.url != data:blog.homepageUrl'>
        <h5 class='title'>
          <b:include name='title'/>
        </h5>
</b:if>


      </div>
      <b:include name='description'/>
    </div>
</b:if>

</b:includable>
</b:widget>
</b:section>
*) Ganti warna biru dengan judul blog kamu

Nah, demikianlah postingan belajar seo untuk blogspot kali ini . Barangkali ada tambahan ? atau ada kata kata yang kurang tepat tentang seo untuk optimasi blogspot monggo di komentari ?Kritik dan saran yang membangun saya harapkan demi kedepanya sehingga blog ini dapat dimanfaat kan dan bermanfaat bagi pembaca , Terima kasih

SEO Header Gambar Blogspot Default Template

Tentang Penulis

Redaksi 1

Artikel Terkait