Header Blog Valid Schema.Org dan HTML5

Header Blog Valid Schema.Org dan HTML5

Makin kesini semakin jarang buat artikel tentang tutorial blog, mumpung Saya ada waktu maka kali Saya 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.

Bagaimana cara pemasangannya ? silakan ikuti cara yang akan Saya paparkan berikut ini :
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='Kang Mousir (Header)' type='Header'>
...
</b:widget>
2. Lalu ganti kode yang diatas dengan kode dibawah ini.
<b:widget id='Header1' locked='true' title='Kang Mousir (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 Anda cek di https://developers.google.com/structured-data/testing-tool/. Bagaimana hasilnya keren bukan, apalagi kalau stuktur templatenya sudah memakai struktur yang disarankan oleh google pasti lebih keren seperti template buatan Saya Sang SEO :). Nih hasilnya

Header Blog Valid Schema.Org dan HTML5

Struktur header ini sangat disarankan karena bagus untuk memudahkan robot google menjelajahi blog kita. Itulah tutorial singkat yang dapat Saya berikan, semoga bermanfaat ya :D

Artikel Terkait

Komentar

Anak Nelayan
Makasih kang, saya puas banget dengan template sang seo :-d
Si Geeniuss
Sang Seo emang keren kang, dan pemiliknya juga baik hati lagi, Bagi yang belum pake sang seo saya sarankan memakainya. :) Nanti saya ikut promosikan deh hehehee
Dede Mahmud
Kang tolongin dong saya ada masalah dengan template blogspot. Baru-baru ini saya mengedit templet blogspot malah jadi berantakan, setelah saya perhatikan ternyata ada yang aneh dimana dalam template asli yang saya unduh ada 3 kata "data:post.body" tapi setelah disimpan di template blogspot hanya bisa tersimpan 2 data:post.body tersebut. Saya coba dengan blog yang lain ternyata sama semua malah jadi berantakan... :D apa yang salah ya?
Putra Adam
nyimak kang .. saya ambil pertamax :D
Azarine Yusriyah
kang mousir jarang update sibuk dengan Blog yang lainya x..?? itu yang diatas ada tulisan "Mobokio (Header)" di isi Nama blog ya kang...
Elang Al Farez
Kalau Untuk Site Navigation buat valid html5 bagaimana ya caranya?
PonselFavorit Indonesia
apakah hanya langsung mengganti kode html itu kang? bagaimana dengan kode cssnya, apakah tidak perlu diganti karena setiap blog memiliki kode css yang berbeda
Fitra Rahim
Makasih kang sangat berguna untuk blog saya
Hadi Ismail
Mau tanya kang mousir kok layout tata letak iklan saya di header atas yang berukuran 729 pixel x 90 pixel jadi hilang ya setelah saya pasang mohon bantuannya kang adienote[.]com

Terima Kasih
Kips Bandung
Tutorial yang bagus, bagus untuk SEO dan pastinya semakin tinggi kualitas blognya.
Salam!
yusuf ryandi
Ga ngerti ini buat apaan, tapi ikutin akang aja aaah.. Biar tambah SEO templatenya hehehe :D
Icah Banjarmasin
Assallammualaikum Kang..rasanya lama sekali saya ga ngesot ke rumah abang..nahhh ini Tips yang sangat bagus sekali..PERTAMAX..ahhahayy
Zul fikar
kang boleh jelasin fungsi script ini
http://pastebin.com/raw.php?i=5pfwZX8V
yg ada di templet agan dibawah <head>
terima kasih
faiz ihsan
Wah keren sekali kang, langsung ke TKP nih buat praktekin :D
faiz ihsan
Wah keren sekali kang, langsung ke TKP nih buat praktekin :D
Akram Shafwan
wah saya kagak ngeri, maklum blogger newbie. hehe
cak darwis
manteb mas bro buat yg hobi komputer mah ini gampang
Dion Angelus
emang keren tempalte ini gan, ane suka juga..mantap
Ikhsanudin din
Wah banyak nian kodenya. masih bingung
ade rizky
saya masih bingung kang,,
maklum masih newbie :D
terimakasih infonya,, saya akan coba pelajari perlahan :)
Reky Wiryanto Bongso
manfaat header blog valid schema.org dan html5 apa yah kang?
Kadek Krisma scout
makasi bro kunjungi juga download software gratis kadekkrisma.blogspot.com
Ibrahim M.Pd.I
Sukurnya punya saya selamat tu mas, :D
zulfi izzulhaq
artikel yang sungguh menarik,
Settingers Blog
Keren kang, artikelnya sangat membantu buat yang mau mempercantik tampilan blog tanpa ragu akan ke seoanya

Silakan berkomentar sesuai dengan topik. Jangan menyisipkan link pada komentar dan jangan sampai komentar Anda masuk komentar SPAM.

Jangan salahkan Saya bila komentar Anda dihapus !

Batal