Open Graph

Tempelkan tautan ke kolom chat WhatsApp dan lihat apa yang terjadi. Tautan tanpa metadata tampil sebagai baris URL polos yang panjang; tautan dengan metadata Open Graph berubah menjadi kartu rapi berisi gambar, judul, dan ringkasan halaman — semuanya terisi otomatis tanpa pengirim mengetik apa pun. Chapter ini membahas tag yang mengatur kartu tersebut, tag yang dibaca WhatsApp, LinkedIn, X, dan platform berbagi lain setiap kali tautan kita muncul.

Protokol Open Graph #

Open Graph adalah protokol metadata yang diperkenalkan Facebook pada tahun 2010 agar platform berbagi dapat membaca pratinjau sebuah halaman. Kini pemakaiannya jauh melampaui Facebook: WhatsApp, LinkedIn, Telegram, X (Twitter), dan berbagai aplikasi chat membaca tag yang sama saat menampilkan kartu pratinjau. Ciri khasnya: tag Open Graph ditulis pada elemen meta dengan atribut property — bukan name seperti kebanyakan metadata lain.

Tag Pokok #

Tujuh property menutupi kebutuhan kartu standar:

Contoh Lengkap untuk Artikel #

Kita pasang ketujuhnya di head untuk artikel blog Kedai Kopi Siti:

<meta property="og:title" content="Cara Menyeduh Kopi V60 untuk Pemula">
<meta property="og:description" content="Rasio, suhu air, dan langkah menyeduh V60 di rumah dalam 10 menit.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://kedaikopisiti.example.com/blog/v60-pemula/">
<meta property="og:image" content="https://kedaikopisiti.example.com/gambar/v60-pemula.jpg">
<meta property="og:site_name" content="Kedai Kopi Siti">
<meta property="og:locale" content="id_ID">

Hasil kartu yang tampil saat tautan dibagikan:

[gambar: seduhan V60 di atas gelas]
Cara Menyeduh Kopi V60 untuk Pemula
kedaikopisiti.example.com
Rasio, suhu air, dan langkah menyeduh V60 di rumah dalam 10 menit.

Mari kita bedah tujuh tag tersebut:

1. Baris 1 (og:title): judul kartu — biasanya sama dengan title halaman tanpa nama situs.
2. Baris 2 (og:description): ringkasan kartu, umumnya sama dengan meta description.
3. Baris 3 (og:type): jenis konten — article untuk tulisan blog atau berita, website untuk halaman umum.
4. Baris 4 (og:url): alamat resmi halaman, sebaiknya sama dengan URL canonical.
5. Baris 5 (og:image): gambar utama kartu — perhatikan catatan ukuran di bawah.
6. Baris 6 (og:site_name): nama situs yang tampil sebagai sumber kartu.
7. Baris 7 (og:locale): bahasa konten dalam format kode — id_ID untuk Bahasa Indonesia.

Kartu di atas tampil di aplikasi chat dan media sosial saat tautan dibagikan — bukan di halaman kita — sehingga demo render tidak mungkin menampilkannya. Bagikan tautan berkas milikmu ke kolam chat, atau periksa lewat alat debug platform, untuk menyaksikan ketujuh tag di atas bekerja.

Twitter Card sebagai Cadangan #

X (Twitter) mengenal formatnya sendiri bernama Twitter Card dengan tag name="twitter:*". Kabar baiknya: X juga membaca tag Open Graph bila tag Twitter Card tidak ada. Cukup dua tag untuk mengatur bentuk kartunya:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Cara Menyeduh Kopi V60 untuk Pemula">

Mari kita bedah keduanya:

1. Baris 1 (twitter:card): memilih bentuk kartu — summary_large_image menampilkan gambar besar di atas judul.
2. Baris 2 (twitter:title): judul versi X; sisanya (description dan image) diambil dari tag Open Graph yang sudah terpasang.

Ringkasan #

• Open Graph menyusun kartu pratinjau saat tautan dibagikan ke WhatsApp dan platform lain.
• Tujuh property pokok: og:title, og:description, og:type, og:url, og:image, og:site_name, og:locale.
• og:image memakai URL absolut; ukuran umum 1200x630 piksel.
• X membaca tag Open Graph sebagai cadangan — cukup tambahkan twitter:card.

Kartu berbagi siap. Chapter berikutnya membahas metadata bahasa: bagaimana lang dan hreflang menyampaikan bahasa halaman kepada pembaca layar dan mesin pencari sekaligus.