Header Blog Valid Schema.Org dan HTML5

Kali ini kita akan buat tutorial cara membuat header blog valid schema.org dan HTML5 :D . Selain valid schema.org dan HTML5 header blog ini juga sangat bagus dan SEO.

Berikut ini cara pemasangan Header Blog Valid Schema.Org dan HTML5 :

1. 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='Author (Header)' type='Header'>
.............
</b:widget>

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

<b:widget id='Header1' locked='true' title='Author (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>

3. Selesai :D

Sekarang tinggal cek di Structured Data Testing Tool. Bagaimana hasilnya? Kalau stuktur templatenya sudah memakai struktur yang disarankan oleh google pasti lebih bagus. Struktur header ini sangat disarankan karena bagus untuk memudahkan robot google menjelajahi blog kita.