Cara Pasang Header Blog Valid Html5 dan Schemaorg


oOo
Informasi: Waktu yang Anda Butuhkan untuk Membaca Tulisan Ini Sekitar:

Cara Pasang Header Blog Valid Html5 dan Schemaorg

Cara Pasang Header Blog yang Valid HTML5 dan SchemaOrg

Hai sahabat Blogger,Apa kabar hari ini? saya do'akan kita semua dalam keadaan sehat ya. Pada kesempatan kali ini Saya akan membagikan Cara Pasang Header Blog yang Valid HTML5 dan SchemaOrg. Dengan berbagai update algoritma Mesin Pencari seperti Google pada saaat ini kita sangat perlu untuk memakai template blog yang valid dengan HTML versi terbaru, yaitu HTML5, selain itu kita juga harus memastikan blog kita Responsive, Mobile Friendly dan Valid HTML5 serta Schema.Org.


Perlunya Memasang Header yang Valid 

Kita juga perlu memasang Header Blog yang valid HTML5 dan juga valid Schema.Org yang berguna untuk mendongkrak SEO blog kita di Mesin Pencari seperti Google, Bing, Yahoo dan lain - lain. Untuk dapat kita ketahui bersama bahwa update algoritma Google ini akan berpengaruh pada index robot Googl, hal ini memungkinkan blog yang selama ini memiliki postingan pada halaman pertama akan turun, bahkan jatuh drastisperingkatnya dimesin pencari apabila blog tersebut tidak mengupdate template dan shema pada blognya.

Hal yang sebaliknya juga bisa terjadi pada blog, apakah blog baru atau lama yang telah menggunakan template blog valid HTML5 dan Schema.Org. apabila blog kita memang sesuai dengan ketentuan algoritma terbaru mesin pencari (Google) maka akan sangat mungkin postingan blog kita naik ke halaman pertama hasil pencarian.


Oleh karena hal yang demikian melakukan update template agar sesuai dengan algoritama mesin pencari memang sangat perlu kita lakukan agar blog kita tidak jatuh dan kehilangan banyak pengunjung dari mesin pencari. bagi anda sahabat blogger yang sudah memiliki template blog seperti saya sebutkan diatas, maka postingan ini hanya akan menjadi informasi, namun bagi sahabat blogger yang masih memakai template lama, saya sarankan untuk mengganti template dengan yang terbaru.

Jika Anda Menyukai Template Lama Anda

"Saya sangat menyukai template blog saya saat ini, apakah ada solusinya?", tentu ada, hal yang perlu anda lakukan adalah mengupdate elemen pada blog anda agar valid HTML dan Schema.Org. Salah satu elemen penting yang harus segera anda update adalah Header Blog. Header Blog itu ibarat mahkota blog, apabila mahkota tersebut sudah mulai rapuh, maka perlu diganti dengan mahkota baru agar kerajaan(blog) tetap anggun dan menawan.

Apakah anda ingin memperbaharui mahkota blog anda? ini dia caranya:

1. Login ke Blogger Anda, Klik ke Menu Template, klik Edit HTML. Silakan cari kode di bawah ini atau yang mirip seperti kode dibawah. Jika masih kesulitan silakan pilih menu Lompat ke Widget > Pilih Header1.
<b:widget id='Header1' locked='true' title='CaraNgeblog.club (Header)' type='Header'>
...
</b:widget>

2. Lalu ganti kode yang diatas dengan kode dibawah ini.

<b:widget id='Header1' locked='true' title='CaraNgeblog.club (Header)' type='Header'>
      <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'>
              <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='&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'>
              <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'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
            <div style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='description'/></div>
          </b:if>
        </b:if>
        <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' expr:title='data:title' itemprop='image' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
          <b:if cond='data:blog.pageType != &quot;item&quot;'>
            <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
               <h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
                <div style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='description'/></div>
            </b:if>
          </b:if>
        </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;'>
          <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
             <h1 class='title'><b:include name='title'/></h1>
           <b:else/>
             <h1 class='title'><b:include name='title'/></h1>
           </b:if>
        <b:else/>
          <h2 class='title'><b:include name='title'/></h2>
        </b:if>
        <b:include name='description'/>
      </div>
    </div>
  </b:if>
</b:includable>
      <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description' itemprop='description'><span><data:description/></span></p>
  </div>
</b:includable>
      <b:includable id='title'>
    <a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='name'><data:title/></span></a>
</b:includable>
    </b:widget>
Note: Ganti CaraNgeblog.club dengan Judul atau Nama Blog Anda.

3. Simpan Template.

Sekarang tinggal Anda cek di [https://developers.google.com/structured-data/testing-tool/]. Jika Sudah seperti gambar dibawah ini, berarti anda sudah berhasil memasang Header Blog yang Valid HTML5 dan tentunya Schema.Org.
Cara Pasang Header Blog Valid Html5 dan Schemaorg
Itulah Cara Memasang Header Blog yang Valid dengan HTML5 Terbaru dan Schema.Org, semoga informasi yang saya bagikan bermanfaat untuk kita bersama, jangan sungkan untuk bertanya bila ada kendala, saya akan membalas komentar anda sesegera mungkin.


Kata - kata Motivasi Setiap Postingan. Spesial untuk Pengunjung SETIA CaraNgeblog.club
Akan tiba saatnya kita akan berhenti mencintai seseorang… bukan karena seseorang itu berhenti mencintai kita melainkan… kita menyadari bahwa orang itu akan lebih berbahagia apabila kita melepaskannya.-Anonim

Terima kasih telah membaca artikel ini, semoga informasi yang kami bagikan bermanfaat untuk kita semua, silakan tinggalkan komentar, pertanyaan, kritik dan saran untuk kami di kotak komentar.

Sebuah Media Online yang Hadir di Tengah-tengah Masyarakat Indonesia untuk Berbagi Informasi yang Bermanfaat.

12 Komentar

waw...kabar baru ni. ijin comot skripnya kang.

mau ane terapin tapi ane backup dulu takut knapa2 blognya
salam kenal dari simbalisme.blogspot.com

salam kenal mas aditya..
Silahkan dicoba terapkan ,semoga sukses :)

salam kenal kang

almagroby.blogspot.com

Sungkem dulu sama sifu auliya :D

terimakasi mas ilmunya tak save dulu,. salam kenal ^

saya masih murid, beli jadi sifu, heehe

Salam kenal juga mas rizki .. :)
Langsung terapkan, hehe

saya mau ngrampok scripnya mas. makasih ya

Silahkan tulis komentar Anda sesuai topik artikel, mohon jangan Spam, dan jangan Promosi.
Kami akan merespon komentar Anda sesegera mungkin :)
EmoticonEmoticon