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
Pilih Edit Header
Pilih Upload gambar 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"'>
<!--
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'>
<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/>
<!--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 + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' 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'>
<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/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<!-- :[ HOMEPAGE TITLE TANPA SEBARANG HEADER GAMBAR ]:-->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</b:if>
<!-- [ END HOMEPAGE TITLE TANPA SEBARANG HEADER GAMBAR ]-->
<!-- :[ POST & PAGE TITLE TANPA SEBARANG HEADER GAMBAR ]:-->
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<h5 class='title'>
<b:include name='title'/>
</h5>
</b:if>
<!-- [ POST & PAGE TITLE TANPA SEBARANG HEADER GAMBAR ]-->
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>
*) Ganti
warna biru dengan judul blog kamu
Simpan dan kamu telah selesai membuat seo header gambar blogspot pada blogger default template. Akhir kata salam sukses berblogging!
Selamat datang kembali sahabat :). Kita akirnya bisa bertemu kembali pada postingan degan judul baru Tutorial Cara Membuat Website Pemula, Terus terang ini bukan postingan baru sih karna saya juga perna menulis nya di tips-trik-terbaru dengan judul Cara Membuat Website. Lalu saya niat aja untuk menulisnya ulang disini supaya blog ini lebih terisi dan siapa tau saja keywordnya masuk Serp pencarian alias cepat terindex google dan mempertemukan pemirsa baru diblog ini. cckckckc #Licik ;). Biar gak bosan dengan tutorialnya *cara membuat website, maka saya tambahkan sedikit gambar lucu :D. Yah begitula caranya biar belajar bikin websitenya lebi serius dan tidak terasa menegangkan "eeeehheee".
