Open Graph Metadata

Tempelkan tautan sebuah artikel pada chat atau media sosial, dan banyak aplikasi menampilkan kartu berisi gambar, judul, serta deskripsi. Kartu itu tidak diambil dari isi halaman secara acak: pratinjaunya dikendalikan metadata Open Graph di dalam head. Protokol ini diciptakan Facebook untuk menyediakan metadata yang lebih kaya bagi situs web, sebagaimana dirangkum MDN, dan kini dipakai luas oleh platform berbagi tautan. Pada Chapter ini kita menulis seluruh property utamanya pada satu head lengkap.

Property Open Graph Utama #

Open Graph memakai atribut property pada elemen meta, dengan nilai yang berawalan og:. ogp.me menetapkan empat property wajib bagi setiap halaman: og:title, og:type, og:image, dan og:url. Property og:description bersifat opsional tetapi sangat dianjurkan karena mengisi teks kartu. Tabel berikut merangkum perannya:

Atribut property vs name #

Perbedaan property dan name tampak kecil, tetapi menentukan siapa yang membaca metadata. Atribut name ditujukan bagi browser dan mesin pencari, seperti pada name="description" dan name="robots". Atribut property membawa metadata milik namespace Open Graph, sehingga platform berbagi tautan membaca og:... tanpa tercampur metadata dokumen biasa. Pelengkap satu barisnya datang dari Twitter: <meta name="twitter:card" content="summary_large_image"> memilih gaya kartu dengan gambar besar di atas ringkasan.

Menyiapkan og:image #

Gambar menentukan daya tarik kartu, dan kelalaian di sini paling sering membuat pratinjau tampil polos tanpa visual. Platform media sosial menuntut gambar cukup besar; ukuran 1200x630 piksel dengan rasio sekitar 1,91:1 menjadi anjuran yang paling aman dipakai lintas platform. Sediakan satu gambar khusus per halaman bila memungkinkan, dan tulis alamatnya lengkap sebagaimana og:url. Bila ukurannya perlu dinyatakan eksplisit, protokol menyediakan structured properties seperti og:image:width dan og:image:height yang ditulis setelah property og:image.

Contoh Head Lengkap OG #

File berikut menyiapkan kartu berbagi untuk satu artikel Dapur Toko Budi:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Menyeduh Kopi Gayo di Rumah</title>
  <meta property="og:title" content="Menyeduh Kopi Gayo di Rumah">
  <meta property="og:type" content="article">
  <meta property="og:url" content="www.example.com/artikel/menyeduh-kopi-gayo/">
  <meta property="og:image" content="www.example.com/gambar/kopi-gayo.jpg">
  <meta property="og:description" content="Tiga langkah menyeduh biji Gayo dengan alat paling dasar.">
  <meta name="twitter:card" content="summary_large_image">
</head>
<body>
  <article>
    <h1>Menyeduh Kopi Gayo di Rumah</h1>
    <p>Panduan satu cangkir untuk pemula tanpa mesin espresso.</p>
  </article>
</body>
</html>

Output yang Dihasilkan:

Bila tautan artikel ditempel pada aplikasi berbagi tautan:
  - Kartu menampilkan gambar kopi-gayo.jpg di bagian atas
  - Judul kartu: "Menyeduh Kopi Gayo di Rumah"
  - Ringkasan kartu: "Tiga langkah menyeduh biji Gayo dengan alat paling dasar."

Mari kita telaah peran setiap baris penting di atas:

1. Baris 7 (og:title): boleh sama dengan title, tetapi boleh pula ditulis ulang untuk konteks berbagi.
2. Baris 8 (og:type): article untuk halaman artikel; halaman umum memakai website.
3. Baris 9 (og:url): alamat kanonik, sejalan dengan canonical pada Chapter Canonical URL.
4. Baris 10 (og:image): gambar pratinjau yang tampil besar pada kartu.
5. Baris 12 (twitter:card): pelengkap platform Twitter/X yang memakai atribut name.

Kartu berbagi kini tertangani. Metadata terakhir di section ini tidak lagi berbentuk pasangan nama-nilai, melainkan data bermesin yang menggambarkan isi halaman secara utuh: structured data.

Referensi resmi untuk pendalaman:

• Open Graph protocol
• MDN Web Docs — Webpage metadata
• MDN Web Docs — Elemen meta

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Menyeduh Kopi Gayo di Rumah</title>
  <meta property="og:title" content="Menyeduh Kopi Gayo di Rumah">
  <meta property="og:type" content="article">
  <meta property="og:url" content="www.example.com/artikel/menyeduh-kopi-gayo/">
  <meta property="og:image" content="www.example.com/gambar/kopi-gayo.jpg">
  <meta property="og:description" content="Tiga langkah menyeduh biji Gayo dengan alat paling dasar.">
  <meta name="twitter:card" content="summary_large_image">
</head>
<body>
  <article>
    <h1>Menyeduh Kopi Gayo di Rumah</h1>
    <p>Panduan satu cangkir untuk pemula tanpa mesin espresso.</p>
  </article>
</body>
</html>