Tempat belajar blogspot

Apa Manfaat Penggunaan Microdata Schema dan Open Graph Protocol ?


Apa itu Microdata Schema dan Open Graph Protocol

Microdata Schema dan Open Graph Protocol adalah sebuah kode penunjang SEO website yang berguna untuk memudahkan mesin pencari dan media sosial memahami makna dari sebuah konten atau isi halaman. Penjelasan untuk Microdata Schema dari schema.org dikatakan halaman web Anda memiliki makna dasar bahwa orang memahami ketika mereka membaca halaman web. Tapi mesin pencari memiliki pemahaman yang terbatas dari apa yang sedang dibahas di halaman tersebut. Dengan menambahkan tag tambahan untuk HTML web halaman-tag Anda yang mengatakan, "Hei mesin pencari, informasi ini menggambarkan film ini spesifik, atau tempat, atau orang, atau video yang" -Anda dapat membantu mesin pencari dan aplikasi lainnya lebih memahami konten Anda dan menampilkannya dalam cara yang relevan berguna. Microdata adalah seperangkat tag, diperkenalkan dengan HTML5, yang memungkinkan Anda untuk melakukan hal ini. (Hasil Google Translete Inggris - Indonesia). Selain Microdata Schema ada juga Open Graph Protocol, Open Graph Protocol berfungsi untuk memudahkan media sosial memahami sebuah halaman situs saat kita membagikan link halaman di media sosial tersebut. Sosial media akan mengetahui mana bagian judul, mana bagian gambar, dan mana bagian deskripsi berdasarkan meta tag open graph yang disisipkan pada bagian halaman HTML sebuah halaman situs.

Contoh penggunaan Microdata Schema

Pada contoh ini akan dibahas menegenai itemscope, itemtype, dan itemprop, perhatikan kode HTML dibawah ini untuk memahami Microdata Schema lebih jelas.

HTML tanpa Microdata Schema

Pada kotak dibawah ini adalah bentuk HTML pada umumnya, bagi pandangan mata kita sebagai manusia membaca isi HTML ini kita bisa mengerti bahwa informasi dalam divisi ini berkaitan dengan film berjudul Avatar namun kemampuan pemahaman tersebut tidak berlaku bagi mesin pencari.
<div>
 <h1>Avatar</h1>
 <span>Director: James Cameron (born August 16, 1954)</span>
 <span>Science fiction</span>
 <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

Penambahan itemscope

Supaya mesin pencari mengetahui adanya sebuah divisi yang perlu di perhatikan, kita perlu menambahkan "itemscope" pada divisi tersebut seperti contoh kode HTML dibawah ini.
<div itemscope="">
  <h1>Avatar</h1>
  <span>Director: James Cameron (born August 16, 1954) </span>
  <span>Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

Penambahan itemtype

Tidak cukup dengan penambahan "itemscope" saja, setelah mesin pencari dapat lebih fokus pada divisi tersebut kita perlu memberitahu tipe divisi tersebut. Sebagai contoh untuk memberitahu divisi ini memiliki konten atau informasi yang berkaitan dengan film / movie, maka kita perlu menambahkan "itemtype="http://schema.org/Movie"" pada divisi tersebut setelah "itemscope" seperti contoh kode HTML dibawah ini.
<div itemscope="" itemtype="http://schema.org/Movie">
  <h1>Avatar</h1>
  <span>Director: James Cameron (born August 16, 1954)</span>
  <span>Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

Penambahan itemprop

Ini adalah tahap pemberian property untuk melengkapi kode penunjang SEO, yaitu penambahan kode "itemprop". Pada contoh dibawah ini berkaitan dengan pembahasan diatas yaitu mengenai informasi movie, pada umumnya kita pasti mengetahui saat mencari informasi seputar movie pasti tidak luput dengan informasi seperti sutradara, genre movie, bahkan aktor - aktor pada movie tersebut. Kita bisa memberikan tanda yang lebih spesifik pada search engine mengenai hal tersebut seperti penambahan "itemprop="name"" pada judul, "itemprop="director"" pada nama sutradara, "itemprop="genre"" pada informasi genre movie dan itemprop="trailer"" pada informasi URL trialer seperti contoh kode dibawah ini.
<div itemscope="" itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

Embedded items

Pada bagian embedded items ini kita bisa menambahkan itemtype dari sebuah itemprop untuk memperjelas lebih dalam dari sebuah property. Ini contoh yang berkaitan dengan contoh - contoh di atas, yaitu itemprop="director" adalah sebuah property dengan itemtype person. Kita bisa langsung menambahkan kode itemscope="" itemtype="http://schema.org/Person" setelah itemprop="director" kemudian kita bisa memberi itemprop="name" pada James Cameron dan itemprop="birthDate" pada tanggal lahir James Cameron seperti contoh kode dibawah ini.
<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <div itemprop="director" itemscope itemtype="http://schema.org/Person">
  Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954</span>)
  </div>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

Baca juga : Cara Membuat Google Structured Data Testing Tanpa Error

Contoh penggunaan Open Graph

Open Graph hampir sama fungsi utamanya seperti Microdata Schema, hanya saja berbeda cara pemasangannya dan lebih tepatnya posisi penempatan kode yang berbeda. Penggunaan Open Graph dengan memberikan meta tag open graph yang membuat media sosial sanggup mengerti makna susunan informasi pada halaman itu. Berikut kode meta tag Open Graph yang umum dipakai.
<meta property="og:url"         content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type"        content="article" />
<meta property="og:title"       content="When Great Minds Don’t Think Alike" />
<meta property="og:description" content="How much does culture influence creative thinking?" />
<meta property="og:image"       content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

Bisa dilihat susunan penulisan meta tag Open Graph di atas tidak terlalu rumit, cukup dengan memberi meta property="og:......" content="......."
Berikut beberapa penjelasan berkaitan dengan meta tag Open Graph
  • og:url berfungsi untuk memberi sumber URL pada konten yang kita bagikan di media sosial.
  • og:type berfungsi untuk memberitahu jenis konten yang kita bagikan di media sosial.
  • og:title berfungsi untuk menampilkan judul konten yang kita bagikan di media sosial.
  • og:description berfungsi untuk menampilkan deskripsi dari konten yang kita bagikan di media sosial.
  • og:image berfungsi untuk menampilkan gambar thumbnail dari konten yang kita bagikan di media soisal.

Baca juga : Pemasangan Open Graph Khusus Blogspot

Kesimpulan

Trik yang saya bahas diatas termasuk trik opsional atau dengan kata lain tidak wajib diterapkan. Perlu diketahui tanpa trik diatas sebenarnya halaman blogspot kita masih tetap bisa dibuka atau bahkan dicari oleh calon pembaca.

Lantas lebih baik memberi markup data seperti diatas atau tidak?
Menurut saya pribadi kalau kita menggunakan template pihak ketiga atau dari bawaan Blogger dirasa kurang optimal dalam hal markup data, maka tidak salah kita mencoba mempelajari penggunaan markup data schema dan open graph protocol untuk sosial media juga.

Sampai disini dulu informasi artikel seputar Microdata Schema dan Open Graph Protocol, semoga dari artikel ini kita pemilik blogger dapat membangun struktur HTML yang lebih ramah dengan search engine dan media sosial guna meningkatkan SEO halaman blogspot kita.
Terima kasih

Artikel ini ditulis oleh :
Perbloggeran

11 comments:

  1. Ohh jadi gitu yaa arti-arti kode yang ada dalam template , terimakasih mas atas infonya

    ReplyDelete
  2. ini bisa naikin trafic engga gan ?

    ReplyDelete
    Replies
    1. Hmm dengan penggunaan microdata schema dan open graph tidak bisa secara langsung menaikkan traffic gan..

      Microdata scheme membantu memperjelas ke robot mesin pencari mengenai konten yang ada di halaman kita..

      Sedangkan opengraph memiliki fungsi untuk membantu menampilkan informasi konten pada saat kita membagikan link konten di sosial media (seperti di facebook)

      Delete
  3. Rumit ya kode2 di template tpi klau udh paham ya gampang

    ReplyDelete
    Replies
    1. Betul gan saya sendiri pribadi juga mengakui kalau belajar kode HTML, CSS, JavaScript dan kode - kode lain yang berkaitan dengan web developing juga merasa berat kalau tidak di dukung dengan semangat belajar yang kuat gan..

      Delete
  4. ini bisa diterapkan di wodpress engga gan?

    ReplyDelete
    Replies
    1. Penggunaan schema dan opengraph sebetulnya bisa untuk wordpress juga gan..

      Setahu saya aja template wordpress standar pun sudah mendukung opengraph, sedangkan untuk schema saya masih belum tahu namun plugin SEO untuk wordpress sepertinya juga menyediakan gan..

      Delete
  5. info bagus. mau saya praktekin gan

    ReplyDelete

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...

Popular Posts