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

Setelah kemarin kita berhasil menciptakan blog versi Jekyll di Github Pages, sekarang kita akan melaksanakan kustomisasi untuk kepentingan sharing post ke sosial media ibarat 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 ibarat 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 mustahil kita menciptakan Open Graph dan Twitter Cards ibarat di atas untuk setiap halaman blog. Untuk itu kita perlu menciptakan 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 instruksi di bawah ini. Silahkan buka repository blog Anda kemudian buka _includes >> head.html dan simpan instruksi Open Graph dan Twitter Cards di bawah instruksi ibarat atau ibarat instruksi di bawah ini.

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

Lalu simpan instruksi 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 instruksi 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 dikala menciptakan postingan, silahkan tulis format YAML-nya di awal postingan ibarat atau ibarat 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+.


Sumber https://www.kompiajaib.com/

Share this post