Memasang OpenGraph Meta pada Jekyll
Facebook OpenGraph Protocol
posted to Web on 28 March 2017
Bagi yang sering menggunakan aplikasi messaging seperti Telegram, Facebook Messenger, WhatsApp dan sebagainya pasti menyadari ketika membagikan sebuah link maka secara otomatis preview dari link tersebut ditampilkan.
Ketika menggunakan Jekyll dengan Github Pages, laman web kita tidak secara otomatis menampilkan preview tersebut. Hal ini dikarenakan meta untuk OpenGraph belum kita atur. Bentuk umum meta HTML seperti berikut
<meta name="" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="deskripsi" />Untuk menambahkan meta OpenGraph rubah _layouts/default.html dengan menambahkan meta OpenGraph diantara bagian <head> dan </head>, meta ini memiliki beberapa property antara lain:
og:title- Judulog:description- Deskripsi dari lamanog:type- Tipe konten, bisa berupa video, musik, atau artikelog:image- URL untuk gambarog:url- URL dari laman
Berikut adalah contoh penggunaan OpenGraph pada linhub yang digabungkan dengan Liquid
{% if page.title %}
<meta property="og:title" content="linhub [dot] io - {{ page.title }}">
{% else %}
<meta property="og:title" content="linhub [dot] io">
{% endif %}
{% if page.excerpt %}
<meta property="og:description" content="{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}">
{% elsif page.description %}
<meta property="og:description" content="{{ page.description }}">
{% else %}
<meta property="og:description" content="Personal Blog of Ngalim Siregar">
{% endif %}
<meta property="og:url" content="{{ page.url | prepend: site.baseurl }}">
<meta property="og:image" content="{{ site.baseurl }}/img/profile.jpg">
<meta property="og:type" content="website">Untuk memeriksa apakah OpenGraph kita sudah tepat, kita bisa menggunakan tool berikut dari Facebook. Untuk infomasi lebih lengkap mengenai Facebook OpenGraph silahkan kunjungi tautan berikut.