header blog valid rich snippet

header blog valid rich snippet

Kali ini Opic Blog akan membahas tentang header blog yang lebih valid di rich snippet, mungkin postingan yang kemaren tentang kerangka template schema.org / webmaster saya rasa belum sempurna kali ini saya akan menyempurnakan nya biar blog kita lebih ramah di google search engine (SE). gambar di atas adalah bukti hasil penyempurnaan pada bagian header di mata rich snippet. klik gambar untuk memperjalas gambar dan Inilah langkah langkah nya.
sepenggal kode html header di bawah ini sering kita jumpai pada template bawaan blogger maupun template hasi editan perhatikan baik baik html nya:
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<b:include name='title'/>
</a>
</h1>
</div>
<b:include name='description'/>
</div>
Di sini saya hanya menyelipkan sedikit markup itemprop untuk bisa memunculkan di rich snippet tool. bila header blog sobat seperti di atas dan pengen valid di rich senippet silahkan ganti dengan kode html di bawah ini
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<a class='title' expr:href='data:blog.homepageUrl' itemprop='url'>
<b:include name='title'/></a>
</h1>
</div>
<b:include name='description'/>
</div>
Untuk lebih membuktikan silahkan sebelum penggantian alangkah lebih baik cek dulu di rich snippet tool. biar tahu sebelum dan sesudah penggantian kode html tersebut. Semoga saja dengan blog yang valid, blog kita di sayang sama mbah google.
Seperti biasa saya tunggu saran dan kritik nya... terima kasih...

32 komentar

  1. akhirya baru bisa pertamax mas taufik :-d :-d :-d
    soal Valid memang harus mas thanks for sharing mas ftaufik :-d

    BalasHapus
  2. Perlu dicek juga nih blog saya :) makasih sharingnya...

    BalasHapus
  3. penjelasannya sangat lengkap.. thanks mas :-d :-d

    BalasHapus
    Balasan
    1. terima kasih mas, saya hanya pengen yang simpel2 aja :-d

      Hapus
  4. Apakah dari maksud ini?

    Sepertinya saya harus lebih banyak belajar dari mas taufik :)

    BalasHapus
  5. Pertama-tama Saya Ucapkan Terimah Kasih Banyak Kepada Mas Opic Telah Meminjamkan Logonya,Sekarang Mas Sudah Bisa Menggunakan Kembali Logo Tersebut :D :-d

    BalasHapus
    Balasan
    1. sebelum dan sesudah nya saya ucapkan terima kasih mas heakal :D :-d

      Hapus
  6. maaf mas kalau punya saya kaya gini, biar valid di rich senippet, gimana apa perlu di ubah atau ditambah :
    <!--No header image -->
    <div id='header-inner'>
    <div class='titlewrapper'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <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>

    BalasHapus
  7. coba mas alex ganti dulu dengan kode html yang di atas, kalau masih belum valid coba ganti dengan yang di bawah ini
    <!--No header image -->
    <div id='header-inner'>
    <div class='titlewrapper'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <h1 class='title'>
    <a class='title' expr:href='data:blog.homepageUrl' itemprop='url'>
    <b:include name='title'/></a>
    </h1>
    <b:else/>
    <p class='title'>
    <b:include name='title'/>
    </p>
    </b:if>
    </div>
    <b:include name='description'/>
    </div>

    BalasHapus
  8. Sekarang sudah diganti headernya :D

    BalasHapus
  9. wah keren nih sudah lama tak oprek template :D makasih gan

    BalasHapus
  10. alhamdulillah milik ane dah valid Mas :-d

    BalasHapus
  11. tapi kang, kalo di html5 gak valid "The itemprop attribute was specified, but the element is not a property of any item."

    BalasHapus
    Balasan
    1. Ini sampel schema header yang valid:

      <header itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
      <h1>
      <a href='#' itemprop='url'>
      <span itemprop='name'>Nama/Judul Web</span>
      </a>
      </h1>
      <p itemprop='description'>Deskripsi/slogan web.</p>
      </header>

      Hapus
    2. terima kasih mas taufik sudah ikut membantu saya dalam menjawab pertanyaan :-d

      Hapus
  12. kurang paham tp berusaha tuk memahami.., salam kenal *smile

    BalasHapus
  13. Balasan
    1. wah mantap nih, master design ada disini :)

      Hapus
    2. murid yang baik pasti di kunjungin oleh gurunya ^_^ hehehe

      Hapus
  14. perlu di coba nih.. makasih mas Karim :)

    BalasHapus
  15. mas...saya dapet masalah nih... setiap kali saya mau bagikan postingan di google +, malah keluar pesan "Post anda tidak dibagikan. Coba lagi." itu setiap kali mau saya bagikan tidak bisa sama sekali malah keluar pesan gitu, saya coba lagi, sama saja gk bisa saya bagikan, tolong kasi solusinya mas !!!!
    screentshotnya kyk gini mas :
    https://lh3.googleusercontent.com/-8SQvzOjx3tw/UqM-uy2IOTI/AAAAAAAACL4/cdRoe-8683M/s613/Untitled.jpg

    BalasHapus
    Balasan
    1. pengaturan ini sudah belum?
      http://3.bp.blogspot.com/-cBnN019_Y90/UqW_GfwhLqI/AAAAAAAAAvA/ggTNjTTW_CQ/s1600/komentar.jpg
      di dalam pengaturan tersebut ada 3 pilihan

      Hapus

Terima kasih atas kunjungan nya dan Gunakan tag seperlunya

Tag kode pendek <i rel="code">KODE ANDA</i>
Tag kode panjang <i rel="pre">KODE PANJANG ANDA</i>
Tag gambar <i rel="image">URL GAMBAR</i>
Tag judul <b rel="h3">JUDUL ANDA DI SINI...</b>
Tag huruf tebal <b>TEKS ANDA DI SINI...</b>
Tag huruf miring <i>TEKS ANDA DI SINI...</i>

Konversi Code