Jika kita perhatikan pada HTML Header blogger ada banyak isyarat yang terpasang yang gunanya untuk menampilkan title blog, ada yang menggunakan gambar ada juga yang menggunakan teks. Dari isyarat kode yang terpasang tersebut kita dapat dengan mudah mengupload logo atau gambar melalui tata letak. Nah permasalahan akan timbul dikala kita menggunakan gambar pada title blog adalah sering tidak terdeteksi tag H1 pada blog, tentunya hal ini akan sangat kuat pada SEO Blog tersebut.
Banyak saran yang aku dapatkan dari sobat-sobat di forum maupun komunitas SEO untuk mengatasi tidak terdeteksinya tag H1, ada yang menyarankan pribadi melalui Edit HTML dan memang berhasil namun akan timbul juga duduk perkara jikalau blog tersebut menggunakan manipulasi title tag menyerupai teladan template Maskolis, jikalau menggunakan cara upload gambar title melalui Edit HTML akan terdeteksi double tag H1 dan sekali lagi hal ini akan sangat kuat pada SEO Blog tersebut.
Terkait dengan duduk perkara diatas di postingan kali ini kita akan sama-sama berguru mengatasi hal tersebut adalah dengan Trik Menyingkat HTML Header Blogger menjadi lebih simple dan tidak terdeteksi double tag H1, jadi dikala sahabat mengganti title tag menggunakan gambar akan lebih mudah dan simple.
Bagi sahabat yang mau mencobanya mari kita simak bersama Cara Menyingkat HTML Header Blogger.
Langkah Pertama
Biasanya menyerupai ini isyarat kode yang terpasang pada header Blogger ada banyak isyarat HTML.
Bagaimana sahabat lumayan banyak kan ?
Untuk menyingkatnya diharapkan Trik, silahkan sahabat ganti isyarat diatas menggunakan isyarat berikut ini :
Perhatikan isyarat yang gres saja diganti jadi lebih singkat dan simple dan secara otomatis akan mengurangi size pada HTML di Blog tersebut dan isyarat diatas aku tambahkan juga isyarat struktur schema.org pada header.
Langkah Ke Dua
Jika sahabat ingin menggunakan logo atau gambar sebagai title blog silahkan sahabat ganti isyarat <data:title/> lokasinya berada di bawah isyarat <b:includable id='title'> nah silahkan ganti menggunakan isyarat gambar logo blog sahabat yang akan menjadi menyerupai dibawah ini.
Perhatikan isyarat diatas untuk Height dan Widht silahkan sahabat sesuaikan saja dengan ukuran yang di inginkan, dan tamat selamat mencoba.
<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 == "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> Bagaimana sahabat lumayan banyak kan ?
Untuk menyingkatnya diharapkan Trik, silahkan sahabat ganti isyarat diatas menggunakan isyarat 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 != "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> Perhatikan isyarat yang gres saja diganti jadi lebih singkat dan simple dan secara otomatis akan mengurangi size pada HTML di Blog tersebut dan isyarat diatas aku tambahkan juga isyarat struktur schema.org pada header.
Langkah Ke Dua
Jika sahabat ingin menggunakan logo atau gambar sebagai title blog silahkan sahabat ganti isyarat <data:title/> lokasinya berada di bawah isyarat <b:includable id='title'> nah silahkan ganti menggunakan isyarat gambar logo blog sahabat yang akan menjadi menyerupai 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 isyarat diatas untuk Height dan Widht silahkan sahabat sesuaikan saja dengan ukuran yang di inginkan, dan tamat selamat mencoba.
Comments