Meta Tag Open Graph: panduan lengkap pratinjau tautan sosial
Meta tag Open Graph adalah tag <meta property="og:…"> yang Anda letakkan di dalam <head> sebuah halaman HTML. Tag ini mengontrol judul, deskripsi, dan gambar yang muncul saat seseorang membagikan tautan Anda di Facebook, LinkedIn, Slack, Discord, WhatsApp, dan hampir semua platform lain. Definisikan sekali dan hampir setiap jaringan menampilkan pratinjau kaya (rich preview) alih-alih URL polos. X (Twitter) membaca tag Twitter Card miliknya sendiri, tetapi jatuh kembali (fallback) ke tag Open Graph Anda saat tag yang cocok tidak ada, sehingga satu set tag yang rapi sudah menjangkau ke mana pun tautan Anda dibagikan.
Protokol inilah yang menentukan apakah tautan Anda muncul dengan judul, ringkasan, dan gambar 1200×630 yang tajam, atau hanya sebagai URL polos yang jarang diklik orang.
Panduan ini menelusuri set lengkap meta tag untuk berbagi ke media sosial: empat tag Open Graph yang wajib, aturan ukuran og:image, cadangan (fallback) Twitter Card, cara setiap platform menampilkan dan menyimpan cache pratinjau, kesalahan yang membuat hasil berbagi kosong, dan cara men-debug hasilnya setelah Anda deploy.
Apa itu meta tag Open Graph?
Open Graph adalah protokol terbuka, yang awalnya dibuat di Facebook dan didokumentasikan di ogp.me, yang memungkinkan halaman web mana pun mendeskripsikan dirinya sebagai objek kaya. Alih-alih menebak isi tautan Anda, platform membaca sejumlah kecil tag dan mengubahnya menjadi kartu pratinjau.
Sintaksnya berupa tag meta HTML biasa dengan atribut property dan nilai content, diletakkan di dalam <head> dokumen:
<meta property="og:title" content="How Open Graph Tags Work">Perhatikan atribut property. Meta tag HTML klasik untuk SEO (meta description, robots, viewport) memakai name. Open Graph memakai property, dan Twitter Card kembali memakai name. Menuliskan atribut itu dengan benar penting; crawler yang mengharapkan property="og:title" tidak akan membaca name="og:title".
Hampir setiap platform yang mengubah tautan menjadi kartu membaca Open Graph: Facebook, LinkedIn, Slack, Discord, WhatsApp, Pinterest, dan Telegram semuanya memahaminya. X adalah pengecualian yang menonjol. X lebih memilih tag twitter:* miliknya sendiri, tetapi jatuh kembali ke tag og:* Anda untuk apa pun yang tidak ditemukannya, itulah sebabnya Anda jarang perlu menduplikasinya.
Open Graph berdampingan dengan meta tag SEO klasik, bukan menggantikannya. <title> dan tautan canonical tetap menggerakkan pencarian; meta description tetap membentuk cuplikan (snippet) pencarian Anda. Tag Open Graph tidak menyentuh peringkat; tag inilah yang memegang kartu sosial. Sebuah <head> yang lengkap biasanya membawa ketiga keluarga tag ini sekaligus.
Menulis semua ini dengan tangan itu berulang dan mudah salah tanpa disadari. Generator Meta Tag & Open Graph membangun seluruh blok dari sebuah formulir singkat, menampilkan pratinjaunya secara langsung, dan menjaga detail-detail rumit (nama atribut, URL absolut, dimensi gambar) tetap konsisten sehingga Anda tidak perlu mengingatnya.
Tag Open Graph inti yang benar-benar Anda butuhkan
Open Graph mendefinisikan puluhan properti, tetapi hasil berbagi yang baik hanya butuh segelintir. Mulailah dengan empat tag wajib, tambahkan sebuah deskripsi, dan berhenti di situ untuk sebagian besar halaman.
Empat tag wajib: og:title, og:type, og:image, og:url
Empat tag bersifat wajib menurut protokol ini. Lewatkan satu saja dan platform akan membuang kartunya atau mengisinya dengan tebakan yang buruk.
<meta property="og:title" content="How Open Graph Tags Work">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.com/og/cover.png">
<meta property="og:url" content="https://example.com/open-graph-guide">og:title adalah judul tebal pada kartu. og:type mengklasifikasikan objek (dibahas lebih lanjut di bawah). og:image adalah gambar pratinjau, dan harus berupa URL HTTPS absolut. og:url adalah alamat canonical halaman, yang dipakai platform untuk menyatukan berbagi yang berulang dan mengumpulkan engagement.
og:description dan bedanya dengan meta description SEO
og:description adalah ringkasan singkat yang tercetak di bawah judul pada kartu berbagi:
<meta property="og:description" content="A practical guide to og:title, og:image and Twitter Card tags.">Ini tag yang berbeda dari <meta name="description"> SEO, dan melayani pembaca yang berbeda. Meta description bersaing memperebutkan klik di halaman hasil Google dan diukur terhadap kira-kira 155 karakter. Deskripsi Open Graph dibaca pada kartu sosial, tempat ruangnya lebih sempit sehingga kalimat pertama yang paling menentukan. Jika Anda tidak menyertakan og:description, sebagian besar platform jatuh kembali ke meta description Anda, jadi Anda sering kali bisa melewatinya. Tulis deskripsi khusus hanya bila daya tarik sosialnya perlu berbeda dari cuplikan pencarian.
og:type dan apa yang dibukanya
og:type memberi tahu platform jenis apa halaman Anda. Nilai yang umum adalah website, article, product, dan profile. Halaman utama atau landing page adalah website; sebuah artikel blog adalah article.
Memilih article membuka properti dan fitur tambahan yang tidak bisa dipakai tipe website biasa:
<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-07-16T00:00:00Z">
<meta property="article:author" content="Ada Lovelace">Tag article:* itu memasok tanggal terbit dan nama penulis ke dalam kartu, dan membuat halaman memenuhi syarat untuk Pinterest Rich Pins, yang menarik data terstruktur langsung dari markup Open Graph Anda. Setel og:type ke article pada artikel dan ke website pada segala yang lain, maka bidang-bidang yang sesuai akan mengikuti.
Berikut referensi untuk tag yang benar-benar dipakai sebagian besar halaman:
| Tag | Apa yang dikontrolnya | Contoh nilai |
|---|---|---|
og:title | Judul yang ditampilkan pada kartu | How Open Graph Tags Work |
og:type | Tipe objek: website, article, product, profile | article |
og:image | Gambar pratinjau (URL HTTPS absolut) | https://example.com/og/cover.png |
og:url | URL canonical halaman | https://example.com/open-graph-guide |
og:description | Ringkasan di bawah judul | A practical guide to social meta tags. |
og:site_name | Nama keseluruhan situs | Example |
og:locale | Bahasa dan wilayah konten | en_US |
og:image — ukuran, rasio, dan aturan yang merusak hasil berbagi
Gambar adalah bagian pratinjau yang pertama dilihat orang, dan di situlah sebagian besar hasil berbagi berantakan. Setel ukuran dan format og:image dengan benar, maka satu berkas berfungsi di mana saja.
Standar universal 1200×630 (1.91:1)
Ukuran og:image yang direkomendasikan adalah 1200×630 piksel, rasio aspek 1.91:1. Satu gambar itu ditampilkan dengan benar di Facebook, LinkedIn, Slack, Discord, dan kartu summary_large_image milik X, jadi Anda tidak perlu berkas berbeda per platform.
Batas ukuran minimum juga penting. Facebook mengabaikan gambar apa pun yang lebih kecil dari 200×200 dan menampilkan thumbnail persegi yang sempit untuk apa pun di bawah 600×315. Di bawah lebar 1200 piksel, kartu besar mulai terlihat kabur. Bidik 1200×630 dan Anda melampaui semua ambang batas sekaligus.
Mengapa og:image:width dan og:image:height penting
Ketika sebuah platform pertama kali menemui tautan Anda, ia belum mengunduh gambarnya; ia mengambilnya secara asinkron. Jika Anda mendeklarasikan dimensinya di awal, platform bisa menyediakan ruang yang tepat dan menata kartu seketika:
<meta property="og:image" content="https://example.com/og/cover.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Open Graph guide cover with the title in large type">Lewatkan tag ini dan berbagi pertama sebuah halaman bisa tampil kosong selagi crawler menyusul. Tambahkan tag ini dan kartu sudah benar pada tempelan pertama. Tag og:image:alt mendeskripsikan gambar bagi pembaca layar (screen reader) di platform yang mendukungnya.
Format dan ukuran berkas
Gunakan JPG atau PNG. Keduanya diterjemahkan (decode) dengan andal di setiap crawler, dan itulah inti dari og:image: gambar harus tampil di server yang tidak Anda kendalikan. Jaga berkas di bawah 1 MB sebagai patokan, dan di bawah 300 KB untuk WhatsApp, yang lebih ketat dari yang lain. Jika hasil ekspor Anda lebih berat, jalankan melalui kompresor gambar online untuk menariknya di bawah 1 MB tanpa merusak kualitas secara kasat mata.
Format modern memang menggoda, tapi untuk og:image sebaiknya Anda tetap konservatif. Format yang lebih baru menghemat byte untuk browser, tetapi sebagian crawler sosial menerjemahkannya secara tidak konsisten, sehingga og:image berformat WebP atau AVIF bisa tampil kosong di platform yang tidak bisa membacanya. Untung-ruginya dibahas di WebP vs AVIF vs JPEG: format gambar terbaik di 2026?; khusus untuk gambar berbagi, tetaplah pada JPG atau PNG. Karena tiap platform memotong tepi secara berbeda, jaga logo dan judul Anda di dalam zona aman (safe zone) 1080×600 yang terpusat agar tidak ada yang penting terpotong.
Aturan URL HTTPS absolut
og:image dan og:url harus berupa URL https://… yang utuh, bukan jalur relatif. Jalur seperti /cover.png terselesaikan dengan baik di editor Anda dan di halaman live Anda, tetapi crawler yang mengambil URL Anda tidak punya basis untuk menyelesaikannya, sehingga hasil berbagi kembali kosong. Gambar juga harus dapat dijangkau publik: jika robots.txt memblokir crawler atau berkasnya berada di balik autentikasi, pratinjaunya tetap kosong.
Satu kendala lagi menentukan segala hal di atas: crawler tidak menjalankan JavaScript. Facebook, LinkedIn, WhatsApp, Telegram, dan Discord mengambil HTML mentah Anda dan membaca apa yang ada di situ. Tag yang disuntikkan di sisi klien oleh sebuah framework setelah halaman dimuat tidak terlihat oleh mereka, jadi tag Open Graph Anda harus berada di HTML yang di-render server atau statis.
Twitter/X Cards: satu tag, lalu jatuh kembali ke Open Graph
X memakai meta tag Twitter Card miliknya sendiri, tetapi tumpang tindihnya dengan Open Graph berarti Anda menulis jauh lebih sedikit dari yang Anda kira. Dalam praktiknya Anda menambahkan satu tag dan membiarkan sisanya jatuh kembali.
twitter:card adalah satu-satunya tag Twitter yang wajib
X sama sekali tidak menampilkan kartu kecuali twitter:card hadir, bahkan ketika Anda punya set tag Open Graph yang lengkap. Inilah satu-satunya tag Twitter Card yang wajib:
<meta name="twitter:card" content="summary_large_image">Nilainya menentukan tata letak. summary_large_image memberi kartu banner besar yang dibuat untuk gambar 1200×630. summary memberi kartu ringkas dengan thumbnail persegi kecil di samping teks:
<meta name="twitter:card" content="summary">Perhatikan atribut name. Tag Twitter Card memakai name, bukan property yang dipakai Open Graph.
Bagaimana X jatuh kembali ke og:* untuk judul, deskripsi, dan gambar
Untuk judul, deskripsi, dan gambar, X membaca og:title, og:description, dan og:image Anda ketika tag twitter:* yang cocok tidak ada. Itulah sebabnya Anda hampir tidak pernah menulis twitter:title atau twitter:image sama sekali. Setel twitter:card, jaga tag Open Graph Anda tetap rapi, dan X menyusun kartunya dari tag-tag itu.
Jebakan twitter:image kosong
Cadangan (fallback) ini punya satu catatan penting: tag kosong tetap dihitung sebagai hadir. Jika Anda memancarkan twitter:image dengan nilai kosong, X memakai nilai kosong itu alih-alih jatuh kembali ke og:image, dan kartu Anda kehilangan gambarnya.
<!-- Salah: memblokir fallback dan membuat kartu tanpa gambar -->
<meta name="twitter:image" content="">
<!-- Benar: hilangkan tag sepenuhnya dan X membaca og:image -->Aturannya sederhana: jangan pernah menghasilkan tag sosial yang kosong. Hilangkan saja bila Anda tidak punya nilainya.
Kekhususan Slack dan Discord
Slack membaca Twitter Card lebih dulu, lalu Open Graph, dan bisa memunculkan dua bidang tambahan melalui twitter:label dan twitter:data:
<meta name="twitter:label1" content="Reading time">
<meta name="twitter:data1" content="11 minutes">
<meta name="twitter:label2" content="Written by">
<meta name="twitter:data2" content="Ada Lovelace">Bidang-bidang itu muncul sebagai detail berlabel kecil di bawah unfurl Slack. Discord membaca Open Graph dan menambahkan satu sentuhan yang tidak dipakai siapa pun lagi: ia mewarnai bilah aksen kiri embed dengan theme-color halaman Anda.
<meta name="theme-color" content="#5865F2">Bagaimana pratinjau tautan ditampilkan di tiap platform
Tag yang sama menghasilkan pratinjau tautan media sosial yang berbeda tergantung siapa yang membacanya. Setiap platform memilih subset tag-nya sendiri, menyimpan cache untuk jendela waktunya sendiri, dan menambahkan satu-dua keunikan. Tabel ini adalah referensi cepatnya.
| Platform | Tag yang dibacanya | Cache | Perilaku khas |
|---|---|---|---|
| Open Graph | ~30 hari | Mengabaikan gambar di bawah 200×200; menampilkan persegi kecil di bawah 600×315 | |
| Open Graph | ~7 hari | Bersihkan pratinjau usang dengan Post Inspector | |
| X (Twitter) | twitter:card + jatuh kembali ke og:* | singkat | Tanpa twitter:card berarti tidak ada kartu sama sekali |
| Slack | Twitter Card, lalu Open Graph | per pesan | Menampilkan twitter:label/twitter:data sebagai bidang tambahan |
| Discord | Open Graph | per pesan | Memakai theme-color untuk bilah aksen embed |
og:title + og:image | per pesan | Menginginkan metadata di dekat bagian atas; jaga gambar di bawah 300 KB | |
| Telegram | Open Graph | per pesan | Tampil andal hanya dari JPEG atau PNG |
| Open Graph atau Schema.org | — | Article Rich Pins butuh og:type=article |
Kolom cache menjelaskan kejutan yang umum: Anda memperbaiki tag, membagikan ulang, dan Facebook masih menampilkan judul lama selama berminggu-minggu. Facebook menyimpan data Open Graph selama sekitar 30 hari dan LinkedIn sekitar 7 hari, jadi suntingan tidak akan muncul sampai cache kedaluwarsa atau Anda memaksa penyegaran. Debugger di bawah ini melakukan persis hal itu.
Kesalahan Open Graph yang umum (dan cara menangkapnya)
Sebagian besar pratinjau yang rusak dapat dilacak ke daftar pendek kesalahan. Masing-masing terlihat baik-baik saja secara lokal dan baru gagal ketika crawler mengambil halaman live.
Jalur og:image relatif
Jalur relatif tampil di browser Anda dan rusak saat dibagikan, karena crawler tidak punya URL basis untuk menyelesaikannya.
<!-- Kosong saat dibagikan -->
<meta property="og:image" content="/cover.png">
<!-- Tampil di mana saja -->
<meta property="og:image" content="https://example.com/cover.png">og:url hilang atau canonical yang tidak cocok dengannya
Tanpa og:url, jumlah berbagi dan engagement tersebar di berbagai varian URL (dengan dan tanpa www, dengan parameter pelacakan, dengan garis miring di akhir). Arahkan tautan canonical dan og:url Anda ke satu URL yang sama agar sinyalnya tetap menyatu.
Gambar terlalu kecil atau rasio aspek yang salah
Gambar di bawah 200×200 diabaikan sepenuhnya, dan yang jauh dari 1.91:1 terpotong dengan cara yang tidak Anda rencanakan. Kirimkan 1200×630 dan pembingkaiannya dapat diprediksi di setiap platform.
Lupa twitter:card
Set tag Open Graph yang lengkap pun tetap tidak menghasilkan kartu di X tanpa twitter:card. Ini alasan paling umum sebuah tautan terlihat bagus di LinkedIn tetapi tidak menampilkan apa-apa di X.
Tag yang di-render sisi klien yang tak bisa dilihat crawler
Jika sebuah single-page app menyuntikkan tag Open Graph setelah dimuat, crawler yang tidak menjalankan JavaScript tidak pernah melihatnya. Render tag di sisi server atau pra-render HTML-nya.
charset diletakkan setelah 1024 byte pertama
Deklarasi <meta charset="utf-8"> harus muncul dalam 1024 byte pertama dokumen, atau browser mengabaikannya dan bisa mengacaukan karakter non-ASCII pada judul dan deskripsi Anda. Letakkan ia paling awal di dalam <head>:
<head>
<meta charset="utf-8">
<!-- semua yang lain menyusul -->
</head>Cara menguji dan men-debug tag Open Graph Anda
Jangan pernah memercayai pratinjau yang belum Anda verifikasi terhadap URL live. Tiga alat mencakup platform yang penting, dan semuanya bisa memaksa penyegaran cache.
Facebook Sharing Debugger
Facebook Sharing Debugger mengambil URL live Anda, menampilkan persis apa yang diurai Facebook, dan mendaftar tag apa pun yang hilang atau salah bentuk. Tombolnya yang paling berguna adalah “Scrape Again”, yang menyegarkan cache ~30 hari Facebook sesuai permintaan, cara tercepat membuat perbaikan muncul tanpa menunggu sebulan.
LinkedIn Post Inspector
LinkedIn Post Inspector melakukan tugas yang sama untuk LinkedIn. Tempelkan sebuah URL dan alat ini mengambil ulang halaman dan membersihkan cache ~7 hari LinkedIn, sehingga judul atau gambar yang diperbarui muncul pada berbagi Anda berikutnya alih-alih beberapa hari kemudian.
Validasi kartu X pindah ke portal developer
X memensiunkan Card Validator mandirinya. Per 2026, validasi kartu berada di dalam portal developer X, bukan di sebuah URL publik, jadi sebagian besar tim memverifikasi kartu X dengan cara berbeda: karena X jatuh kembali ke og:*, debugger Facebook dan LinkedIn sudah mengonfirmasi tag yang akan dibaca X, dan alat pratinjau pihak ketiga menutup celah untuk tata letak twitter:card itu sendiri.
Pratinjau sebelum Anda deploy
Debugger hanya bisa memeriksa URL yang sudah live, momen yang buruk untuk menemukan gambar kosong. Pratinjau kartu selagi Anda masih menyunting. Generator Meta Tag & Open Graph menampilkan pratinjau Google, Facebook, X, LinkedIn, Slack, dan Discord dari nilai yang Anda ketik, membaca dimensi asli og:image Anda di browser untuk menangkap rasio yang salah, dan dapat mengimpor <head> yang sudah ada sehingga Anda bisa mendiagnosis berbagi yang rusak sebelum dikirim.
Daftar periksa singkat
Berikut minimum yang harus dibawa setiap halaman. Salin, gantikan dengan nilai Anda, dan Anda punya pratinjau yang tampil di semua tempat:
<meta charset="utf-8">
<title>Your page title</title>
<meta name="description" content="Your 150-character summary.">
<link rel="canonical" href="https://example.com/page">
<meta property="og:title" content="Your page title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/og/page.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="Your 150-character summary.">
<meta name="twitter:card" content="summary_large_image">Telusuri hal-hal esensial sebelum Anda mengirim: og:image HTTPS absolut berukuran 1200×630, og:url yang cocok dengan canonical Anda, twitter:card yang hadir, dan tag yang di-render sisi server. Jika Anda ingin tur yang lebih lengkap tentang utilitas yang mempercepat ini, alat developer esensial mengumpulkan sisanya. Ketika Anda siap membangun dan mempratinjau seluruh blok sekaligus, Generator Meta Tag & Open Graph menuliskannya, memeriksanya, dan menampilkan setiap kartu sebelum Anda deploy.
Pertanyaan yang sering diajukan
Apa bedanya tag Open Graph dan Twitter Card?
Open Graph adalah protokol lintas platform yang dibaca oleh Facebook, LinkedIn, Slack, dan lainnya; tag Twitter Card (twitter:*) khusus X. X jatuh kembali ke tag OG Anda ketika tag twitter:* yang cocok tidak ada, jadi Anda biasanya butuh OG ditambah satu nilai twitter:card.
Apakah tag Open Graph memengaruhi peringkat pencarian Google?
Tidak. Tag Open Graph dan Twitter Card tidak memengaruhi peringkat Google; tag ini mengontrol tampilan tautan saat dibagikan, mendorong lalu lintas sosial. Tag <title> dan canonical klasik penting untuk SEO; meta description membentuk cuplikan dan rasio klik Anda tetapi bukan faktor peringkat langsung.
Di mana tag Open Graph diletakkan dalam HTML?
Di dalam elemen <head>, pada HTML yang di-render server atau statis. Crawler Facebook, LinkedIn, WhatsApp, dan Telegram tidak mengeksekusi JavaScript, jadi tag yang disuntikkan di sisi klien tidak akan terlihat. Letakkan <meta charset> paling awal agar berada dalam 1024 byte pertama.
Bisakah satu gambar berfungsi untuk Facebook, X, dan LinkedIn?
Bisa. Satu gambar 1200×630 (1.91:1) tampil dengan benar di Facebook, LinkedIn, Slack, Discord, dan kartu summary_large_image milik X. Sajikan melalui HTTPS di URL publik dan deklarasikan og:image:width/og:image:height agar berbagi pertama tidak kosong.
Mengapa pratinjau tautan saya tidak menampilkan gambar?
Penyebab umum: jalur og:image relatif alih-alih URL HTTPS absolut, gambar di bawah 200×200, twitter:card yang hilang di X, atau tag yang disuntikkan oleh JavaScript yang tidak bisa dijalankan crawler. Scrape ulang dengan Facebook Sharing Debugger setelah memperbaikinya.
Apakah semua halaman butuh tag Open Graph-nya sendiri?
Idealnya ya: setiap halaman sebaiknya punya og:title, og:description, og:image, dan og:url canonical yang mencerminkan halaman spesifik itu, sehingga tautan yang dibagikan menampilkan pratinjau yang relevan. Cadangan seluruh situs lebih baik daripada tidak ada, tetapi tag per-halaman memenangkan jauh lebih banyak klik sosial.