How to Install Open Graph and Twitter Cards In Version Jekyll Blog On Github Pages

 After yesterday we managed to create a blog on Github Pages version of Jekyll, now we will do the customization for the benefit of sharing the post to social media such as Facebook, Twitter, Google+ and more. For that, we have to put Open Graph and Twitter Cards to hand out social media posts.

As usual, the Open Graph and Twitter Cards will look like the following example:

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

But it is impossible to create Open Graph and Twitter Cards as above for each page of the blog. For that we need to create Open Graph and Twitter Card is automatically adjusted according to each page of a blog post.

Well, to put Open Graph and Twitter Cards for the blog version of Jekyll in Github Pages, please copy the code below. Please open your blog repository and buka_includes >> head.html and save the code Open Graph and Twitter Cards under such codes or similar codes below.

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

Then save the code Open Graph and Twitter Cards below.

    <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 %}<metacontent="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">

Then open _config.yml and be sure to include the code below in it.

# 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

And when making a post, please write its YAML format at the beginning of such or similar posts below.

---
layout: post
title: "Title postingan di sini"
description: "Deskripsi postingan di sini"
author: "Nama Anda"
image: "img/image-postingan-anda.jpg"
---

Open Graph To ensure this works, please use https://developers.facebook.com/tools/debug/ then please try to share your blog posts on Facebook, Twitter, or Google+.