Skip to main content

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

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

PrivacySitemap
©2021 KOMPI AJAIB