Generator Meta Tag Open Graph

Tag Open Graph adalah potongan kecil HTML yang menentukan tampilan halaman Anda saat dibagikan di Facebook, LinkedIn, Slack, Discord, atau X (Twitter). Isi judul, deskripsi, URL, gambar, dan beberapa opsi di bawah ini, lihat pratinjau kartu berbagi diperbarui secara instan, lalu salin tag <meta> yang dihasilkan langsung ke <head> halaman Anda. Semuanya berjalan di browser Anda — tidak ada yang dikirim ke server.

Apa Itu Alat Ini?

Open Graph adalah protokol, awalnya dibuat oleh Facebook, yang memungkinkan halaman web mana pun mendeskripsikan dirinya sendiri melalui sekumpulan kecil tag <meta property="og:..."> yang diletakkan di <head> HTML. Ketika seseorang menempelkan tautan Anda ke aplikasi sosial, klien chat, atau alat perpesanan, aplikasi tersebut membaca tag ini untuk membangun kartu pratinjau — judul, deskripsi, dan gambar thumbnail — alih-alih menebak dari konten halaman.

Twitter (X) menggunakan sekumpulan tag terkait namun terpisah, <meta name="twitter:...">, untuk mengontrol secara khusus bagaimana tautan dipratinjau di platformnya. Sebagian besar situs mengatur keduanya: tag Open Graph untuk kompatibilitas luas, dan tag Twitter Card untuk menyempurnakan pratinjau di X (misalnya memilih kartu gambar besar dibandingkan kartu ringkasan kecil).

Tanpa tag ini, tautan yang dibagikan tidak menampilkan pratinjau sama sekali, atau platform mencoba menebak judul dan gambar dari konten mentah halaman Anda — sering kali memilih judul yang salah, gambar acak di tengah teks, atau tidak sama sekali. Menetapkan og:title, og:description, dan og:image secara eksplisit memberi Anda kendali penuh atas bagaimana konten Anda ditampilkan sebelum ada yang mengklik.

Mengapa Menggunakannya?

Pratinjau langsung — lihat persis bagaimana kartu berbagi akan terlihat saat Anda mengetik, sebelum mempublikasikan apa pun.
Menghasilkan tag Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name) dan tag Twitter Card sekaligus.
Mencakup bidang yang benar-benar dibaca platform: judul, deskripsi, URL kanonik, gambar, nama situs, jenis konten, dan gaya kartu Twitter.
Berjalan sepenuhnya di sisi klien — judul, deskripsi, dan URL Anda tidak pernah meninggalkan browser Anda.
Gratis, tanpa login, tanpa batasan — salin hasilnya dan tempel ke HTML Anda.

Cara Menggunakan

Masukkan judul halaman Anda dan deskripsi singkat (usahakan judul di bawah ~60 karakter, deskripsi ~155–160 karakter).
Masukkan URL kanonik halaman dan URL absolut gambar pratinjau (URL gambar harus lengkap, misalnya https://example.com/gambar.jpg, bukan jalur relatif).
Secara opsional atur nama situs, pilih og:type (website, article, product, profile, video, music), dan pilih jenis Twitter Card (summary atau summary_large_image).
Periksa kartu pratinjau langsung untuk memastikan judul, deskripsi, dan gambar terlihat pas bersama.
Klik "Copy" dan tempelkan tag <meta> yang dihasilkan ke <head> halaman Anda, sebelum tag penutup </head>.

Contoh

Input

Judul: "10 Alat Developer Gratis yang Benar-Benar Akan Anda Gunakan"
Deskripsi: "Daftar pilihan alat berbasis browser untuk JSON, regex, UUID, dan lainnya — tanpa instalasi."
URL: https://example.com/blog/dev-tools
Gambar: https://example.com/images/dev-tools-cover.jpg

Output

<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />

Hanya kolom yang Anda isi yang disertakan dalam hasil — membiarkan nama situs kosong berarti og:site_name akan dihilangkan dari output.

Kesalahan umum yang harus dihindari

Sama sekali tidak mengatur og:image — tanpa itu, sebagian besar platform tidak menampilkan gambar pratinjau atau mengambil gambar acak dari halaman, yang biasanya terlihat rusak atau tidak profesional.
Menggunakan jalur gambar relatif seperti /images/cover.jpg alih-alih URL lengkap seperti https://example.com/images/cover.jpg — crawler sosial umumnya tidak dapat menyelesaikan jalur relatif.
Rasio aspek gambar yang salah — gambar persegi atau potret akan terpotong secara janggal saat platform memaksanya ke bingkai lanskap 1,91:1; selalu rancang gambar berbagi Anda mendekati 1200×630.
Judul atau deskripsi yang terpotong — jaga og:title di bawah ~60 karakter dan og:description di bawah ~155–160 karakter agar tidak terpotong dengan elipsis di sebagian besar platform.
Lupa memperbarui pratinjau yang di-cache — setelah mengubah tag og pada halaman yang sudah live, pratinjau lama dapat bertahan di cache Facebook atau LinkedIn hingga Anda memaksa pemindaian ulang secara manual dengan alat debug mereka.

Di mana setiap tag digunakan

og:title, og:description, dan og:image adalah tiga tag yang dibaca hampir semua platform untuk membangun pratinjau. og:url memberi tahu crawler tautan kanonik mana yang harus dikaitkan dengan pratinjau, yang penting jika konten yang sama dapat diakses melalui beberapa URL. og:site_name menampilkan label kecil (seperti nama publikasi atau merek) di atas judul pada beberapa platform, seperti Facebook.

og:type mengubah jenis objek yang direpresentasikan halaman untuk crawler yang mendukung model objek Open Graph yang lebih kaya — misalnya, article mengaktifkan og:article:published_time dan og:article:author pada platform yang membacanya, meskipun sebagian besar pratinjau sosial mengabaikan bidang tambahan ini dan hanya menggunakan trio inti judul/deskripsi/gambar.

twitter:card mengontrol tata letak khusus di X: summary menampilkan thumbnail persegi kecil di samping teks, sementara summary_large_image menampilkan gambar lebar penuh di atas teks — pilihan terakhir hampir selalu lebih baik untuk konten dengan gambar sampul yang bermakna.

Pertanyaan yang Sering Diajukan

Seberapa besar ukuran og:image saya seharusnya?

1200×630px adalah ukuran yang direkomendasikan — cukup besar untuk layar beresolusi tinggi dan sesuai dengan rasio aspek sekitar 1,91:1 yang dipotong oleh Facebook, LinkedIn, dan X. Jaga ukuran file di bawah 5–8MB, gunakan JPG atau PNG, dan pastikan URL gambar adalah URL absolut yang lengkap, bukan jalur relatif — sebagian besar crawler tidak dapat menyelesaikan jalur gambar relatif dengan benar.

Mengapa pratinjau saya tidak muncul saat membagikan tautan?

Penyebab paling umum adalah: og:image tidak ada, URL gambar relatif alih-alih absolut, crawler diblokir oleh robots.txt, atau platform menampilkan versi cache dari pratinjau lama. Facebook dan LinkedIn sama-sama melakukan cache pratinjau secara agresif — gunakan Sharing Debugger Facebook atau Post Inspector LinkedIn untuk memaksa pemindaian ulang setelah Anda memperbarui tag Anda.

Apa perbedaan antara tag og: dan twitter:?

Tag og: (og:title, og:description, og:image, dll.) adalah bagian dari standar Open Graph, dibaca oleh Facebook, LinkedIn, Slack, Discord, WhatsApp, dan sebagian besar platform lainnya. Tag twitter: adalah format milik Twitter/X sendiri. Jika twitter:title atau twitter:image tidak ada, X akan otomatis menggunakan tag og: yang setara — tetapi menetapkan keduanya secara eksplisit memberi Anda lebih banyak kendali, termasuk memilih summary_large_image untuk gambar pratinjau besar.

og:type apa yang harus saya gunakan?

"website" adalah pilihan default yang aman untuk sebagian besar halaman, termasuk halaman beranda dan konten umum. Gunakan "article" untuk postingan blog dan berita (ini membuka tag tambahan khusus artikel seperti waktu publikasi), "product" untuk halaman e-commerce, dan "profile" untuk halaman profil pribadi atau pengguna. Jenis ini terutama memengaruhi properti Open Graph tambahan mana yang valid, bukan tampilan dasar kartu pratinjau.

Apakah alat ini menyimpan atau mengirim data saya ke suatu tempat?

Tidak. Semua proses pembuatan terjadi secara lokal di browser Anda menggunakan JavaScript biasa. Tidak ada yang Anda ketik yang ditransmisikan, dicatat, atau disimpan — menutup tab akan menghapus semuanya.