Bagaimana Membuat Meta Data Tag untuk Jekyll?
Jekyll sebenarnya punya plugin untuk membuat metadata secara otomatis hanya lewat file config.yml.
Namun Plugin itu gak tau kenapa mungkin karena versi jekyll blog ini salah, jadinya gak bekerja dengan baik. Alhasil saya harus meng-hardcode-nya 😂 Oh iya kalo kalian suka yg versi plugin, namanya [jekyll-seo-tag](“https://github.com/jekyll/jekyll-seo-tag") . Kalo ingin membuatnya sendiri, mari ikutin tutorial dibawah ini.
Meta tag hanyalah data berisi name dan content atau juga property dan content. Dari banyak macam meta tag, saya klasifikasikan jadi 3 saja. Yang buat browser, yg buat opengraph facebook dan yg buat twittercard (sebenarnya ada jg namanya rich data schema.org tp nanti kapan kapan saja lah karena diluar topik.). Untuk membuat Meta tag dasar yg buat browser, begini code nya :
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="generator" content="Jekyll">
<meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}" />
<meta name="keywords" content="andirkh, Andi R Hermawan, kode kode blog, kodekodemedia" />
Sedangkan untuk OpenGraph, ini kegunaan dasarnya untuk share artikel web ke facebook dengan baik dan benar. Pastikan daftarkan web kalian di developer.facebook.com dulu. Untuk bentuk hardcode metatag facebook seperti berikut :
<meta property="og:locale" content="id_ID">
<meta property="og:type" content="{% if page.date %}article{% else %}website{% endif %}">
<meta property="og:title" content="{%if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
<meta property="og:url" content="{{ page.url | replace:'/index.html','/' | prepend: site.baseurl | prepend: site.url }}">
<meta property="og:image" content="{%if page.image %}{{ site.url }}{{ page.image }}{% else %}{{ site.url }}{{ site.logo }}{% endif %}" />
<meta property="og:site_name" content="Kode Kode : Media Berbagi @andirkh">
<meta property="og:description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
<meta property="fb:app_id" content="APP_ID_KALIAN"/>
<meta property="article:publisher" content="http://www.facebook.com/kodekodemedia" />
<meta property="article:author" content="https://www.facebook.com/andirkh" />
<meta property="article:published_time" content="{{ page.date }}" />
{% if page.categories %}{% for category in page.categories limit:1 %}<meta property="article:section" content="{{ category }}">{% endfor %}{% endif %}
{% if page.tags %}{% for tag in page.tags %}<meta property="article:tag" content="{{ tag }}">{% endfor %}{% endif %}
Sama seperti Opengraph, twitter juga punya format sendiri agar sharing ke platform twitter gak cuma link saja yg keluar, tapi judul artikel, deskripsi, sampai gambar bisa keluar. Nah ini code buat twitter card, kalau copy paste tinggal disesuaikan dengan web kalian saja :
{%if page.image %} <meta name="twitter:card" content="summary_large_image"/> {% else %} <meta name="twitter:card" content="summary"/> {% endif %}
<meta name="twitter:title" content="{%if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
<meta name="twitter:description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
<meta name="twitter:site" content="@kodekodemedia" />
<meta name="twitter:creator" content="@andirkh">
<meta name="twitter:image" content="{%if page.image %}{{ site.url }}{{ page.image }}{% else %}{{ site.url }}{{ site.logo }}{% endif %}">
Kegunaan meta tag ditas selain buat share ke platform tersebut bisa lancar tanpa kendala gambar yg kosong, juga berguna buat SEO (walopun aturan SEO selalu berubah semaunya search engine). Tapi layak dicoba meta tag itu, malah fardhu-ain wkwk 😂.
Kalau kalian masih gak yakin, meta tag yg kalian isi benar atau salah, coba validasikan di beberapa tools yg disediakan facebook, twitter, pinterest dan google berikut.
GOOGLE PLUS RICH SNIPPET TESTER
Google plus dan pinterest rich snippet tester diluar pembahasan meta tag artikel ini, tapi lumayan buat pengetahuan kalo ada tester itu
Ya saya rasa cukup artikel untuk hari ini wkwk. selamat bereksperimen
