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.

Baca: Mengenal SEO Khusus Blogger Pemula

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.

Baca: 3 Elemen Penting dalam SEO

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.

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.

Baca Juga: Cara Memasang Meta Tag SEO Friendly Valid HTML5 Terbaru

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.