Tempat belajar blogspot

Cara Memasang Microdata Schema Blogger


Cara Menggunakan Microdata Schema Blogger

Proses pemasangan Microdata Schema sebetulnya tidak terlalu sulit, hanya saja cukup dengan ketelitian dalam penempatan itemscope="", itemtype="", dan itemprop="" pada divisi tertentu untuk memperjelas pada mesin pencari mengenai jenis konten yang terkandung dalam divisi tersebut. Sangat disarankan untuk kita yang ingin menambahkan microdata schema, harus ada pemahaman dasar mengenai prinsip penulisan HTML untuk mengurangi resiko terjadinya error pada sebuah template blogspot. Selain membutuhkan pemahaman dasar HTML, ada juga tool yang sanggup membantu adanya kesalahan atau error pada pemasangan Microdata Schema yaitu Google Structured Data Testing Tool, contoh hasil test halaman blog Perbloggeran bisa lihat dibawah ini.

Perbloggeran Structured Data Testing Tool

Petunjuk pemasangan microdata schema blogspot

Petunjuk dibawah ini bukan satu - satunya kode microdata schema yang bisa digunakan, kode dibawah ini sebatas kode markup yang pernah digunakan oleh penulis artikel ini. Jadi apabila dirasa kode markup microdata schema dibawah ini kurang cocok untuk halaman blogspot yang dimiliki, ada baiknya mencoba langsung membaca petunjuk pemilihan itemtype dan itemprop yang sesuai dengan blogspot masing - masing di schema.org.

Sebelum mencoba memulainya, berikut beberapa poin yang perlu kita perhatikan.
  1. Itemtype Blog.
  2. Itemprop blogPost dan Itemtype BlogPosting.
    1. Itemprop headline.
    2. Itemprop mainEntityOfPage url.
    3. Itemprop datePublished dateModified.
    4. Itemprop articleBody.
    5. Itemprop image dan Itemprop publisher.

INGAT UNTUK MELAKUKAN BACKUP TEMPLATE TERLEBIH DAHULU SEBELUM MELAKUKAN PERUBAHAN.
DWYOR (Do With Your Own Risk), KEGAGALAN ATAU KESALAHAN YANG TERJADI ADALAH TANGGUNG JAWAB MASING - MASING PEMILIK BLOGSPOT.


Itemtype Blog

Tambahkan kode itemscope="" itemtype="https://schema.org/Blog" pada kode HTML
menjadi kode seperti dibawah ini.

<html itemscope="" itemtype="https://schema.org/Blog" ............ >

Itemprop blogPost dan Itemtype BlogPosting

Tambahkan kode itemprop='blogPost' itemscope='itemscope' itemtype='https://schema.org/BlogPosting' pada kode post hentry uncustomized-post-template menjadi kode seperti dibawah ini.

<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='https://schema.org/BlogPosting'>

Kode post hentry uncustomized-post-template mungkin akan ditemukan dua kali dan tuliskan kode itemprop='blogPost' itemscope='itemscope' itemtype='https://schema.org/BlogPosting' di kode post hentry uncustomized-post-template kedua juga.

Itemprop headline

Tambahkan kode itemprop="headline" pada kode post-title entry-title
menjadi <h1 class='post-title entry-title' itemprop='headline'>
Mungkin akan menemukan kode post-title entry-title 2 kali, tambahkan itemprop ini di semua kode tersebut.

Itemprop mainEntityOfPage url

Cari kode class='post-title entry-title' dan untuk kode ini kita akan menemukan dua buah kode dengan class tersebut.

  1. Ganti kode yang berada di dalam kode class='post-title entry-title' dengan kode ini.
    <b:if cond='data:post.link'>
         <a itemprop='mainEntityOfPage url' expr:href='data:post.link'><data:post.title/></a>
    <b:elseif cond='data:post.url and data:blog.url != data:post.url'/>
         <a itemprop='mainEntityOfPage url' expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
         <a itemprop='mainEntityOfPage url' expr:href='data:post.url'><data:post.title/></a>
    </b:if>
  2. Ganti kode yang berada di dalam kode class='post-title entry-title' dengan kode ini.
    <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
          <a itemprop='mainEntityOfPage url' expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
    <b:else/>
          <a itemprop='mainEntityOfPage url' expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
    </b:if>

Itemprop datePublished dateModified

Tambahkan kode itemprop="datePublished dateModified" pada kode class='published' expr:title='data:post.timestampISO8601' menjadi kode seperti dibawah ini.

<abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished dateModified'><data:post.timestamp/></abbr>

Mungkin akan menemukan kode class='published' expr:title='data:post.timestampISO8601' sebanyak dua kali, tambahkan itemprop ini di semua kode tersebut.

Setelah itu jangan lupa mengatur format penulisan tanggal dan jam postingan dengan format tanggal dan jam, mungkin apabila kita hanya memilih penulisan format tanggal tanpa jam akan memunculkan error pada Google Structured Data Testing Tool.

Itemprop articleBody

Tambahkan kode itemprop="articleBody" pada kode class='post-body entry-content' expr:id='"post-body-" + data:post.id' menjadi kode seperti dibawah ini.

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>

Itemprop image dan Itemprop publisher

Pada tahap menambahkan kode Itemprop image dan Itemprop publisher ini terbagi menjadi dua tahap.
  1. Dibawah kode <b:if cond='data:post.thumbnailUrl'>
  2. Dibawah kode <b:if cond='data:post.firstImageUrl'>

Cari kode <b:if cond='data:post.thumbnailUrl'>, kemudian tambahkan kode dibawah ini

<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
    <meta expr:content='data:post.thumbnailUrl' itemprop='url'/>
    <meta content='500' itemprop='width'/>
    <meta content='500' itemprop='height'/>
</div>
</b:if>
<div itemprop='publisher' itemscope='' itemtype='https://schema.org/Organization'>
    <div itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<meta content='ISI URL LOGO SENDIRI' itemprop='url'/>
<meta content='500' itemprop='width'/>
<meta content='500' itemprop='height'/>
    </div>
    <meta expr:content='data:blog.title' itemprop='name'/>
</div>

Cari kode <b:if cond='data:post.firstImageUrl'>, kemudian tambahkan kode dibawah ini

<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
    <meta expr:content='data:post.thumbnailUrl' itemprop='url'/>
    <meta content='500' itemprop='width'/>
    <meta content='500' itemprop='height'/>
</div>
</b:if>
<div itemprop='publisher' itemscope='' itemtype='https://schema.org/Organization'>
    <div itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<meta content='ISI URL LOGO SENDIRI' itemprop='url'/>
<meta content='500' itemprop='width'/>
<meta content='500' itemprop='height'/>
    </div>
    <meta expr:content='data:blog.title' itemprop='name'/>
</div>

Pada tulisan ISI URL LOGO SENDIRI yang berwarna merah tersebut, direkomendasikan untuk secara manual di isi dengan URL favicon masing - masing.

Kesimpulan

Trik penambahan microdata schema sebetulnya tidak bisa dijadikan tolak ukur sebuah kesuksesan halaman blogspot menduduki halaman pertama pada sebuah halaman mesin pencari, namun dengan penggunaan microdata schema akan sangat membantu proses kerja robot mesin pencari mengenali lebih detil jenis konten yang terdapat pada halaman blogspot kita seperti yang dijelaskan pada artikel sebelumnya Microdata Schema dan Open Graph Protocol Penunjang SEO Blogger. Proses untuk menaikkan sebuah halaman blogspot untuk bisa menduduki halaman pertama, tidak lepas juga dari peran media sosial sebagai tempat untuk membagikan konten blogspot kita. Sampai disini dulu artikel mengenai Cara Memasang Microdata Schema Blogger, semoga artikel ini bisa membantu kita para blogger untuk melakukan optimalisasi template website.
Terima kasih

Artikel ini ditulis oleh :
Perbloggeran

26 comments:

  1. nice artikel sob
    sya yg gak tau..jd lbh tau nih..

    ReplyDelete
  2. Ane masih bingung gan, ini fungsinya buat optimasi SEO aja ya?

    ReplyDelete
    Replies
    1. Iya gan untuk optimalisasi SEO gan, supaya robot Google lebih mudah memengerti isi dari halaman web atau blog kita dengan bantuan microdata schema gan..

      Delete
  3. top cer gan, ane lagi coba2 pasang logo template nih, ternyata ada cara dengan ulasan lengkap nya disini.... :)

    ReplyDelete
    Replies
    1. di salah satu langkah tutorial pemasangan microdata schema di atas ada tulisan "ISI URL LOGO SENDIRI" namun ini logo tidak muncul pada halaman web atau blog ya gan, ini kode yang dimaksud untuk membantu robot mesin pencari mengetahui Logo halaman agan dengan bantuan kode microdata schema gan..

      Delete
  4. Replies
    1. Bisa gan langsung praktek, ingat backup template terlebih dahulu ya gan..

      Delete
  5. Nice info gan, agak binggung masih pemula hehe

    ReplyDelete
  6. Thanks sob . Nambah wawasan nih :D

    ReplyDelete
  7. langsung ane coba gan, thanks infonya

    ReplyDelete
  8. Thanks gan bermanfaat sekali, lumayan dapet ilmu tambahan :D

    ReplyDelete
  9. sangat bermanfaat gan.. nambah wawasan saya nih

    ReplyDelete
  10. Baru tahu saya mengenai Microdata schema blogger, boleh dicoba karena saya mulai paham

    ReplyDelete
  11. izin mempraktekkan ilmunya hu

    ReplyDelete
  12. masih blm mau nambah widget hehe

    ReplyDelete
    Replies
    1. Hmm.. ini tutorial mengenai "Cara Memasang Microdata Schema Blogger" bukan untuk menambah widget sich gan hehe..

      Delete
  13. Ternyata harus belajar banyak lagi masalah coding, sangat membantu mas untuk memahami microdata schema di bog ane

    ReplyDelete
    Replies
    1. Iya gan sama - sama saya juga masih banyak belajar gan, sebetulnya memahami blogspot itu kompleks juga gan..
      Pelan - pelan tapi pasti dan harus mencoba praktek gan..

      Delete

1. Berkomentarlah dengan sopan.
2. Berdiskusilah dengan bijak.
3. Dilarang SPAM.
4. Dilarang SARA.
5. Dilarang menuliskan tautan link.

Featured Post

Apa itu CSS Syntax dan Selector

CSS ( Cascading Style Sheet ) sudah dijelaskan mengenai pengertian CSS pada artikel sebelumnya Apa itu CSS , namun pada artikel yang sekara...