Blog
April 2, 2026

Apa Itu Tag Open Graph? Panduan Link Preview dan Social Sharing

Ketika Anda membagikan link di Facebook, LinkedIn, Slack, atau Twitter, biasanya kartu preview muncul — dengan judul, deskripsi, dan gambar. Preview ini bukan keajaiban. Mereka dikontrol oleh tag Open Graph (OG) di HTML halaman Anda.

Mengatur tag Open Graph dengan benar berarti link yang dibagikan terlihat profesional dan mendapatkan lebih banyak klik. Mengaturnya dengan salah berarti preview yang jelek, gambar yang hilang, atau teks fallback yang generik.

Apa Itu Protokol Open Graph?

Open Graph adalah protokol yang dibuat oleh Facebook pada tahun 2010 yang memungkinkan halaman web menentukan bagaimana tampilannya saat dibagikan di platform sosial. Ini menggunakan meta tag di bagian HTML <head>:

<meta property="og:title" content="Judul Halaman Anda" />
<meta property="og:description" content="Ringkasan singkat halaman" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />

Ketika platform sosial mendeteksi URL yang dibagikan, ia mengambil halaman dan membaca tag ini untuk membangun kartu preview.

Tag Open Graph yang Penting

og:title

Judul yang ditampilkan di kartu preview. Jaga di bawah 60 karakter untuk tampilan terbaik di semua platform.

<meta property="og:title" content="Cara Membuat Short Link Bermerek" />

Tips:

  • Jangan hanya menduplikasi tag <title> Anda — optimalkan untuk engagement sosial
  • Letakkan kata-kata penting di depan
  • Hindari clickbait (platform dapat menghukumnya)

og:description

Ringkasan singkat yang ditampilkan di bawah judul. Targetkan 120-160 karakter.

<meta property="og:description" content="Buat short link bermerek kustom dengan pelacakan klik dan analitik. Atur dalam 5 menit." />

og:image

Gambar yang ditampilkan di preview. Ini adalah tag paling berdampak — posting dengan gambar mendapatkan engagement yang jauh lebih tinggi.

<meta property="og:image" content="https://example.com/social-preview.jpg" />

Persyaratan gambar berdasarkan platform:

PlatformUkuran yang DisarankanRasio Aspek
Facebook1200 × 630 px1.91:1
Twitter1200 × 628 px1.91:1
LinkedIn1200 × 627 px1.91:1
Slack500 × 500 px minApa pun

Gunakan 1200 × 630 piksel untuk mencakup semua platform.

og:url

URL kanonis untuk halaman. Ini memberi tahu platform URL mana yang akan ditampilkan dan membantu mencegah konten duplikat.

<meta property="og:url" content="https://example.com/page" />

og:type

Mendeskripsikan tipe konten. Nilai umum:

  • website — untuk halaman utama dan halaman umum
  • article — untuk posting blog dan artikel
  • product — untuk halaman produk

Tag Twitter Card

Twitter menggunakan meta tagnya sendiri (selain Open Graph) untuk kartu preview:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Judul Anda" />
<meta name="twitter:description" content="Deskripsi Anda" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

Jika tag Twitter card tidak ada, Twitter akan kembali ke tag Open Graph. Sebagian besar situs mengatur keduanya untuk kontrol maksimal.

Bagaimana Platform Sosial Mengambil Data Open Graph

Ketika Anda membagikan URL:

  1. 1
    Crawler platform mengunjungi URL
  2. 2
    Itu membaca HTML <head> untuk tag OG
  3. 3
    Itu menyimpan data kartu preview dalam cache
  4. 4
    Pembagian berikutnya dari URL yang sama menggunakan versi yang di-cache

Penting: Perubahan pada tag OG tidak langsung tercermin. Platform menyimpan cache secara agresif, jadi Anda mungkin perlu menghapus cache secara manual (lihat debugging di bawah).

Bagaimana jika Anda berbagi URL yang tidak Anda kontrol — atau Anda ingin kartu preview yang berbeda untuk konteks yang berbeda?

Fitur custom social previews Linkly memungkinkan Anda mengganti data Open Graph untuk link pendek apa pun:

  • Atur judul, deskripsi, dan gambar kustom
  • Preview berbeda untuk audiens yang berbeda
  • Tidak perlu mengedit HTML halaman tujuan
  • Bekerja untuk URL apa pun, bahkan halaman yang tidak Anda miliki

Ini sangat berguna ketika:

  • Berbagi konten pihak ketiga dengan branding Anda sendiri
  • A/B testing berbagai kartu preview untuk melihat mana yang mendapat lebih banyak klik
  • Halaman tujuan memiliki tag OG yang buruk atau hilang

Debugging Tag Open Graph

Facebook Sharing Debugger

Tool Facebook memungkinkan Anda melihat pratinjau dan menyegarkan data OG yang di-cache:

  1. 1
    Masukkan URL Anda
  2. 2
    Klik Debug
  3. 3
    Lihat apa yang dibaca Facebook dari halaman Anda
  4. 4
    Klik Scrape Again untuk menghapus cache

Twitter Card Validator

Validator Twitter menunjukkan bagaimana kartu Anda akan muncul dan menyoroti masalah apa pun.

LinkedIn Post Inspector

Tool LinkedIn menampilkan pratinjau kartu link Anda dan menyegarkan data yang di-cache.

Tips Umum

  • Periksa sumbernya: Lihat sumber halaman Anda dan cari og: untuk memverifikasi tag ada
  • Gunakan URL absolut: URL gambar harus absolut (mulai dengan https://), bukan relatif
  • Uji setelah perubahan: Selalu hapus cache platform setelah memperbarui tag OG
  • Periksa rendering JavaScript: Beberapa platform tidak dapat menjalankan JavaScript, jadi tag OG harus ada dalam respons HTML awal

Kesalahan Umum

  1. 1
    og:image hilang: Posting tanpa gambar mendapatkan 2-3x lebih sedikit klik
  2. 2
    Gambar terlalu kecil: Gunakan setidaknya 1200 × 630 piksel
  3. 3
    Rasio aspek salah: Gambar dipotong dengan canggung
  4. 4
    Cache basi: Anda memperbarui tag OG tetapi lupa menghapus cache platform
  5. 5
    Tag duplikat: Beberapa tag OG dari tipe yang sama menyebabkan perilaku yang tidak dapat diprediksi
  6. 6
    Gambar HTTP: Gunakan HTTPS untuk URL gambar — beberapa platform memblokir gambar HTTP
  7. 7
    URL relatif: Crawler platform tidak dapat menyelesaikan jalur relatif

Open Graph untuk Tipe Konten Berbeda

Posting Blog

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-04-02" />
<meta property="article:author" content="Nama Anda" />

Produk

<meta property="og:type" content="product" />
<meta property="product:price:amount" content="29.99" />
<meta property="product:price:currency" content="USD" />

Video

<meta property="og:type" content="video.other" />
<meta property="og:video" content="https://example.com/video.mp4" />

Kesimpulan

Tag Open Graph adalah penambahan kecil pada HTML Anda yang memiliki dampak besar pada bagaimana konten Anda muncul di seluruh web sosial. Mengaturnya dengan benar — dengan judul, deskripsi, dan gambar yang tepat — secara langsung meningkatkan tingkat klik-tayang ketika link Anda dibagikan.

Ingin custom link previews tanpa mengedit HTML? Mulai dengan Linkly dan sesuaikan kartu social preview untuk link pendek apa pun — atur judul, deskripsi, dan gambar Anda sendiri.

Dapatkan 100 tautan pendek dan lacak 500 klik bulanan secara gratis.

Mulai Gratis

Tidak diperlukan kartu kredit.

Volume tinggi? Hubungi tim kami.