Memasang Open Graph di Blogger

Open Graph? Apakah itu?

Open Graph adalah sebuah protokol yang digunakan untuk memperkaya informasi di media sosial.

Oo gitu. Lalu mengapa kita memasang Open Graph di blog kita?

Open Graph berguna untuk mengambil data blog dan menampilkannya di media sosial dengan tampilan yang kaya informasi.
Misal, demi mendapatkan lebih banyak pengunjung ke blog, kita posting tautan ke artikel blog di media sosial seperti Facebook, Telegram, dan sejenisnya. Dengan Open Graph, tautan ini tidak hanya teks semata, melainkan juga berisi gambar dalam artikel, sekelumit isi artikel, dan lainnya. Dengan demikian semakin menarik minat mereka yang melihat tautan tersebut untuk berkunjung ke blog kita.

Perbedaan tampilan dengan Open Graph dan tanpa Open Graph

Gambar di atas adalah contoh bagaimana sebuah tautan ditampilkan dalam Telegram. Tautan paling atas adalah tautan dari blog yang menggunakan Open Graph, dan tautan dibawahnya adalah dari situs yang tidak menggunakan Open Graph.

Protokol Open Graph aslinya dibuat oleh Facebook, namun kini sudah menjadi semacam de facto untuk dunia web/blogging. Jadi kita tidak perlu memiliki akun Facebook untuk menggunakan Open Graph. Well, mungkin tidak sepenuhnya benar. Kita tetap membutuhkan akun (developer) Facebook untuk memeriksa bagaimana tag Open Graph kita ditampilkan. Namun ini bisa diakali dengan menggunakan layanan dari pihak ke tiga. Saya sendiri peduli untuk memasang Open Graph di blog bukan karena sering berbagi tautan di Facebook, melainkan karena sering berbagi tautan di Telegram.

Ya, tanpa berpanjang lebar lagi, di bawah ini sedikit tutorial bagaimana memasang Open Graph di blogger. Enjoy...

  • Login ke Blogger
  • Pada menu di sebelah kiri, klik Theme
  • Di sebelah kanan, di bawah bagian "Live on Blog", klik Edit HTML dan salin kode berikut di dalam tag <head>.
    <b:if cond='data:blog.pageType == "item"'>
      <meta content='article' property='og:type'/>
      <meta expr:content='data:blog.title' property='og:site_name'/>
      <meta expr:content='data:blog.pageName' property='og:title'/>
      <b:if cond='data:blog.postImageThumbnailUrl'>
        <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
      </b:if>
    <b:else/>
      <meta expr:content='data:blog.title' property='og:title'/>
      <meta content='website' property='og:type'/>
    </b:if>
    <b:if cond='data:blog.metaDescription != ""'>
      <meta expr:content='data:blog.metaDescription' name='og:description'/>
    </b:if>
    <meta expr:content='"id_ID"' property='og:locale'/>
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
    
  • Klik Save theme
  • Kembali ke menu dashboard Blogger di sebelah kiri, klik SettingsSearch preferences.
  • Di sebelah kanan, pada kolom Meta tags, pilih Yes untuk Enable search description? dan isikan deskripsi mengenai blog kita.

  • Klik Save changes.

Pengaturan pada sisi blog telah selesai. Namun masih ada satu langkah yang harus dilakukan, dan langkah ini harus dilakukan setiap kita menulis artikel, yakni menuliskan "search description" pada kolom kanan editor Blogger. Jika langkah ini dilewati, maka yang tampak pada rich preview adalah deskripsi blog, bukan deskripsi dari artikelnya.

Patut diingat juga, jika kita tidak memiliki akun (developer) Facebook, maka jika ada kesalahan dalam menuliskan "search description" dan Facebook telah membuatkan rich preview-nya maka kesalahan ini akan "abadi". Namun jika sekiranya Anda memiliki akun (develepor) Facebook, Anda bisa melakukan perbaikan dan meminta Facebook membuat rich preview yang baru.

Demikian artikel kali ini. Ringkasnya, pasang Open Graph dalam blog, buat artikel yang menarik dengan dibubuhi gambar dan media lainnya, kemudian bagikan ke media-media sosial. Pastinya, mereka yang melihat tautan yang kaya tampilan akan lebih merasa tertarik dibanding hanya melihat tautan berupa teks.