Memasang Open Graph Dan Twitter Cards Pada Blog Versi Jekyll Di Github Pages

Ditulis oleh: Adhy Suryadi

Ditulis pada: 5/27/2016

Setelah kemarin kita berhasil membuat blog versi Jekyll di Github Pages, kini kita akan melakukan kustomisasi untuk kepentingan sharing post ke sosial media seperti Facebook, Twitter, Google+, dan lainnya. Untuk itu, kita harus memasang Open Graph dan Twitter Cards untuk membagikan postingan di sosial media.

Seperti biasa, Open Graph dan Twitter Cards akan tampak seperti di bawah ini sebagai contoh:

<meta content="Title" property="og:title">

<meta content="Type" property="og:type">

<meta content="Image" property="og:image">

<meta content="URL" property="og:url">

<meta content="Title Blog" name="twitter:site">

<meta content="summary_large_image" name="twitter:card">

<meta content="@username" name="twitter:creator">

Namun tidak mungkin kita membuat Open Graph dan Twitter Cards seperti di atas untuk setiap halaman blog. Untuk itu kita perlu membuat Open Graph dan Twitter Card ini otomatis sesuai dengan setiap halaman postingan blog.

Nah, untuk memasang Open Graph dan Twitter Cards untuk blog versi Jekyll di Github Pages, silahkan copy kode di bawah ini. Silahkan buka repository blog Anda lalu buka _includes >> head.html dan simpan kode Open Graph dan Twitter Cards di bawah kode seperti atau mirip kode di bawah ini.

<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>

Lalu simpan kode Open Graph dan Twitter Cards di bawah ini.

    <meta content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}" property="og:title">

    <meta content="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}" property="og:url">

    <meta content="{{ site.title }}" property="og:site_name">

    {% if page.title %}<meta content="article" property="og:type">{% else %}<meta content="website" property="og:type">{% endif %}

    <meta content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}" property="og:description">

    <meta content="{{site.url}}{{ site.baseurl }}/{% if page.image %}{{ page.image }}{% else %}{{ site.image }}{% endif %}" property="og:image">

    <meta content="{{ site.author }}" name="Author">

    <meta content="https://www.facebook.com/{{ site.facebook_username }}" property="article:author">

    <meta content="{{ site.title }}" name="twitter:site">

    <meta content="summary_large_image" name="twitter:card">

    <meta content="@{{ site.twitter_username }}" name="twitter:creator">

Kemudian buka _config.yml dan pastikan Anda sudah menyertakan kode di bawah ini di dalamnya.

# Site settings

title: Title Blog Anda

image: img/image-homepage-blog-anda.jpg

description: "Description homepage blog Anda"

author: Nama Anda

twitter_username: UsernameAnda

facebook_username:  usernameanda

Dan ketika membuat postingan, silahkan tulis format YAML-nya di awal postingan seperti atau mirip di bawah ini.

---

layout: post

title: "Title postingan di sini"

description: "Deskripsi postingan di sini"

author: "Nama Anda"

image: "img/image-postingan-anda.jpg"

---

Untuk memastikan Open Graph ini bekerja, silahkan gunakan https://developers.facebook.com/tools/debug/ kemudian silahkan coba share postingan blog Anda di Facebook, Twitter, ataupun Google+.