header super valid rich snippet ala DTE

header super valid rich snippet ala DTE, Opic Blog
header super valid rich snippet ala DTE

Kali ini saya masih tetap membahas seputar header yang valid di rich snippet yang telah di rekomendasikan oleh schema.org. mungkin postingan ini akan mempersingkat saya dalam menjawab 17 pertanyaan via email yang isi nya sama yaitu tentang cara memasang header yang sangat valid di rich snippet yang telah di berikan oleh mas taufik nurrohman lewat komentar di header blog valid rich snippet

Di bawah ini adalah sample html yang mas taufik nurrohman sarankan:
<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>
Untuk pemasangannya sendiri saya tambahkan class atau id yang ada di template biar tampilan header tidak acak acakan dan tertata rapi seperti semula, di sini opic blog menggunakan class / id site-haeder
<header class='site-header' id='site-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>
Saya pribadi langsung mengganti seluruh html Header yang ada di dalam template dengan html HEADER di atas karena menurut saya ada poin plus dari penggantian HEADER di atas yaitu blog jadi lebih ringan
  • 1. html header yang sangat panjang di ganti dengan kode html header yang sangat sedikit, ukuran templtae pun jadi mengecil yang pastinya loading blog jadi lebih ringan 
  • 2. sangat valid di rich snippet 
Setiap ada kelebihan pasti ada kekurangan nya, dengan penggantian html header di atas, pada layout kolom header jadi menghilang dengan menghilangnya kolom header dari layout menurut saya tidak berdampak apa apa terhadap blog, karena apa...? coba cek di berbagai tool tentang chek tag H1 masih terdeteki dengan sempurana keberadaan H1 (header)

Berbagai cara untuk memvalidkan blog kita dalam hal ini ke validan header di mata rich snippet... tapi inilah cara saya.... Semoga saja pembahasan di atas menambah wawasan kita tenteng header yang valid
terima kasih buat mas taufik nurrohman atas sample header nya

21 komentar

  1. Hmmm bisa juga mas Taufik, header default blogger emang banyak kodenya.

    BalasHapus
    Balasan
    1. Mas karena saya menggunakan template dari Maskolis yang menggunakan manipulasi h1 title blog, jadi saya tidak mengganti keseluruhan kode header namun hanya menghapus kode yang tidak dibutuhkan, jadi seperti ini

      <b:includable id='main'>

      <div id='header-inner'>
      <div class='titlewrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
      <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>
      </div>
      </b:includable>
      <b:includable id='title'>
      <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <data:title/>
      <b:else/>
      <a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><data:title/></span></a>
      </b:if>

      </b:includable>


      Silahkan koreksinya mas :D

      Hapus
    2. Untuk menghindari double h1 di postingan

      Hapus
    3. saya sudah praktekan... bagus juga kreasinya mas andy, tentunya mas andy tau sendiri kalau header bawaan blog terlalu banyak kode yang tidak perlu dan akan memberat kan loading, di sini inti nya kita sama yaitu bikin header valid di rich snippet dengan tidak mengurangi performa blog dan tidak ada error pada bagian header.
      terima kasih atas diskusi nya mas :-d dengan begini (khusus nya saya pribadi ) menambah wawasan kita tentang edit template pada header :-bd

      Hapus
  2. penuh kreasi mas karim.. cocok sekali buat yang buru valid2an dan loading ringan hehehe :)

    BalasHapus
  3. wah ada juga ya ternyata yang super valid..
    mendingan kita makai yang ini ketimbang yang lain :-d

    BalasHapus
  4. hehehe akhirnya tonjokan kmaren karena gak valid html5 di bahas total nih, sip nuhun

    BalasHapus
  5. Wah,Ternyata Masih Ada Yang Super Valid yah :p :-d lanjutkan mas :D

    BalasHapus
  6. oalah makasih gan udah share

    BalasHapus
  7. Akhirnya saya mulai paham dengan CSS
    makasih yah Mas

    BalasHapus
  8. wah keren nih mas, makasih yah ^_^
    - salam damai

    BalasHapus
  9. Waduuuh, Bermanfaat sekali Artikelnya Mas..

    Salam kenal :D

    BalasHapus
  10. Kurang ngerti yang beginian :p

    Ditunggu artikel selanjutnya..

    BalasHapus
  11. saya ingin tanya ni bang, kalau merubah header sedemikian rupanya tuh apa gak imbas yang kurang baik ke elemen blog lain, atau juga pengaruh di mesin telusur gitu..?
    maklum bang, bener-bener newbie saya ni.

    BalasHapus
    Balasan
    1. aman aman saja mas, kalau masalah newbie saya juga sama ko mas di sini kita sama sama belajar

      Hapus
  12. Alhamdulillah mbah nomor 3D 228 yang mbah berikan td ternyata tembus saya menang 37 JUTA dan sy tdk rugi mengirim maharnya 350.000 MBAH, jadi saya sekarang sudah bisa bayar utang-utang saya Sebagian lg MBAH. jika ada kawan-kawan sering kalah main togel dan mau menang kayak saya hubungi mbah RUWUH di n0mor 082 347 737 757 dijamin 100% POSITIF tembus saya sudah buktikan sendiri. silahkan anda juga BUKTIKAN kunjungi www.prediksitogelsgp4d.blogspot.com/

    BalasHapus

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