Kamu pasti pernah melihan artikel yang di share atau di bagikan di sosial media. Pada artikel tersebut terdapat gambar Thumbnail, Judul, Deskripsi, dsb. Preview halaman tersebut didapatkan karena pada website yang dibagian sudah terdapat OpenGraph Tags. Jadi jika website kamu belum terdapat OpenGraph Tags, maka tampilan url ketika dibagikan hanya plain saja.
Untuk pengguna WordPress mungkin tidak akan kesulitan, karena terdapat Plugin yang otomatis menambahkan OG Tags. Jika pengguna Blogspot pada template yang digunakan biasanya sudah terdapat OG Tags nya.
Lalu bagaimana untuk Pengguna SSG seperti HUGO? Santai! HUGO juga gampang kok. Cuma tambahkan 1 (satu) baris Kode, Tags sudah tampil. Pada kali ini Emalution akan membagian bagaimana Cara menambahkan OpenGraph atau OG Tags di HUGO dengan mudah.
Sebelum lanjut ke tahapan, aku mau menjelaskan pengertian OpenGraph dan HUGO terlebih dahulu. Berikut penjelasannya.
Pengertian OpenGraph
OpenGraph Meta Tags atau yang biasa disebut dengan OG Tags adalah tag khusus yang bertujuan agar Sosial media mengenali sebuah page atau halaman di Website. ohya, OpenGraph diperkenalkan Oleh facebook pada tahun 2010 dan sudah cukup lama.
Mudahnya, OpenGraph atau OG Tags ini berfungsi untuk membuat preview halaman website yang kamu bagian di sosial media lebih menarik karena terdapat gambar Thumbnail, Judul, dan deskripsi halaman. Jadi tidak hanya tampil judul saja.
Contoh website yang terdapat OpenGraph ketika dibagikan di Sosial Media akan seperti gambar berikut,
Pengertian HUGO
HUGO adalah Framework yang digunakan untuk membuat website static seperti Landing Page, Blog, Protofolio, dan sebagainya. Website hasil generate HUGO ini berbentuk statis, jadi untuk membangun website dengan HUGO tidak memerlukan database.
HUGO di tulis menggunakan bahasa GO, sesuai dengan tagline HUGO \”The world\’s fastest framework for building websites\” framework ini diklaim lebih cepat dari framework sejenisnya seperti Jekyll, Octopress, 11ty, dsb. Tetapi tenang, karena untuk membuat web menggunakan HUGO kamu tidak perlu menulis kode Go dari awal. Jadi jangan takut!
Langsung saja kita ke tutorial untuk menambahkan OpenGraph di hugo.
Setting OpenGraph di HUGO
Pada HUGO kamu tidak perlu pusing untuk menambahkan meta tag satu persatu. Karena dari HUGO sudah menyediakan template dimana kamu hanya perlu menambahkan 1 (Satu) Baris kode saja diantara tag <head> </head> pada file Layout Theme yang Kamu gunakan. Adapun kode yang perlu ditambahkan adalah,
{{ template \"_internal/opengraph.html\" . }}
Mudah bukan?
Masih pusing? Oke, Aku kasih contoh untuk penambahan kodenya.
Sebagai contoh struktur Theme yang aku gunakan disini,
themes
themesberlin
layouts
_default
Berikut gambarnya,
- Didalam folder
_defaultterdapat filebaseof.html. Dimana pada file tersebut berisi struktur website kamu seperti body, sidebar, footer, header, dsb. - Silahkan Kamu buka file
baseof.html, dan tambahkan{{ template \"_internal/opengraph.html\" . }}diantara tag<head> </head>. Contohnya seperti gambar berikut,
3. Selesai! Silahkan kamu Save file, coba deploy, dan View Page Source halaman post web kamu. Maka akan tampil Tag opengraphnya.
Dibeberapa theme hugo yang digunakan mungkin akan terdapat perbedaan struktur.
Sebagai contoh seperti memiliki Partials sendiri untuk tag<head>...</head>. Jika seperti itu, berarti kamu tambahkan baris Opengraphnya didalam file partials yang dimiliki.
Sekian panduan kali ini. Semoga bermanfaat! Kalau kamu ada pertanyaan, bisa disampaikan melalui kolom komentar dibawah atau dari sosial media yang tertera.