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

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

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments