Generator Meta Tag OG Online
Hasilkan tag Open Graph dan Twitter Card. Pratinjau tampilan link Anda di media sosial.
<!-- Open Graph --> <meta property="og:title" content="My Website — Main Title"> <meta property="og:description" content="My website description for social media."> <meta property="og:type" content="website"> <meta property="og:url" content="https://example.com"> <meta property="og:image" content="https://example.com/og-image.jpg"> <meta property="og:site_name" content="My Site"> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="My Website — Main Title"> <meta name="twitter:description" content="My website description for social media."> <meta name="twitter:image" content="https://example.com/og-image.jpg">
Mengapa menggunakannya
Kontrol tampilan situs Anda saat dibagikan di media sosial
Pratinjau nyata
Lihat dengan tepat bagaimana link Anda akan muncul sebelum dipublikasikan.
Semua platform
Facebook, LinkedIn, Twitter, WhatsApp, dan Telegram dalam satu langkah.
Kode siap salin
Tag HTML yang dihasilkan dengan benar. Tempel ke dalam head Anda dan selesai.
Tanpa registrasi
Hasilkan dan uji tag meta Anda tanpa membuat akun.
Cara kerjanya
Tiga langkah, tanpa kerumitan
Masukkan data halaman Anda
Isi judul, deskripsi, URL, dan gambar halaman Anda. Ini adalah detail yang akan dilihat pengguna saat link Anda dibagikan.
Pilih jaringan sosial
Pilih apakah Anda membutuhkan Open Graph (Facebook, LinkedIn, WhatsApp), Twitter Card, atau keduanya. Sesuaikan kolom khusus platform.
Salin kode HTML
Salin tag meta yang dihasilkan dan tempelkan ke dalam HTML head Anda. Verifikasi dengan Facebook Debugger atau Twitter Card Validator.
FAQ
Ada pertanyaan?
Open Graph Protocol adalah protokol web yang dibuat oleh Facebook (diperkenalkan pada F8 2010) yang memungkinkan halaman web mana pun menjadi objek kaya dalam grafik sosial. Dengan menyertakan tag meta og: di HTML head Anda, Anda mengontrol dengan tepat judul, deskripsi, dan gambar apa yang muncul ketika seseorang membagikan link Anda di Facebook, LinkedIn, WhatsApp, Telegram, dan sebagian besar platform sosial. Tanpa tag ini, platform mencoba menebak konten dengan hasil yang tidak dapat diprediksi.
Empat properti dasar yang diperlukan adalah: og:title (judul objek), og:type (jenis objek: website, article, product...), og:image (URL gambar pratinjau), dan og:url (URL halaman kanonik). Properti opsional penting: og:description, og:site_name, og:locale (misalnya id_ID), og:image:width, dan og:image:height (untuk mencegah reflow saat memuat). Untuk artikel, og:type=article memungkinkan properti tambahan: article:author, article:published_time, article:section.
Facebook memiliki Sharing Debugger (developers.facebook.com/tools/debug) yang merender dengan tepat bagaimana URL Anda akan muncul saat dibagikan dan memungkinkan Anda memaksa refresh cache. Twitter memiliki Card Validator (cards-dev.twitter.com/validator). LinkedIn memiliki Post Inspector (linkedin.com/post-inspector). Untuk pengembangan lokal, alat seperti ngrok atau localtunnel mengekspos localhost Anda sehingga debugger eksternal dapat mengaksesnya. Ingat platform menyimpan cache metadata, jika Anda mengubah tag, gunakan alat debugging untuk menginvalidasi cache.
Dimensi yang direkomendasikan oleh Facebook dan sebagian besar platform adalah 1200x630 piksel (rasio 1,91:1). Resolusi ini cukup untuk layar Retina dan diskalakan dengan baik ke semua ukuran pratinjau. Ukuran minimum yang diterima adalah 200x200 piksel. Facebook menolak gambar lebih kecil dari 200x200 atau lebih besar dari 8 MB. Twitter mengharuskan minimum 300x157 piksel untuk summary_large_image dan maksimum 4096x4096 piksel dengan batas 5 MB. Untuk WhatsApp, gambar harus persegi (1:1) untuk pratinjau obrolan grup.
Open Graph (og:) adalah protokol terbuka yang diadopsi oleh sebagian besar platform sosial. Twitter Cards (twitter:) khusus untuk Twitter/X dan menawarkan jenis tambahan: summary, summary_large_image, app, dan player. Jika Anda mendefinisikan tag og:, Twitter menggunakannya sebagai fallback saat tag twitter: tidak ada. Rekomendasinya adalah mendefinisikan kedua set untuk kompatibilitas maksimal. Kolom Twitter Card utama adalah twitter:card (jenis kartu), twitter:site (akun Twitter situs), twitter:creator (akun penulis), dan twitter:image (dapat berbeda dari og:image untuk mengoptimalkan dimensi).
Open Graph Protocol: sejarah, Schema.org, dan crawler media sosial
Open Graph Protocol diperkenalkan oleh Facebook pada konferensi F8 tanggal 21 April 2010. Tujuannya adalah mengubah halaman web mana pun menjadi objek kelas satu dalam grafik sosial Facebook, analog dengan bagaimana halaman artis, film, dan lokasi sudah memiliki struktur data yang kaya. Protokol ini terinspirasi dari RDFa (Resource Description Framework in Attributes), ekstensi HTML untuk data terstruktur, tetapi disederhanakan untuk adopsi massal. Nama dan domain ogp.me didaftarkan pada hari yang sama. Sejak peluncurannya, Open Graph diadopsi oleh LinkedIn (2011), Twitter sebagai fallback (2012), WhatsApp (2013), dan hampir semua platform sosial dan pesan yang relevan.
Hubungan antara Open Graph dan Schema.org bersifat komplementer tetapi terkadang membingungkan. Schema.org (diluncurkan pada 2011 oleh Google, Bing, dan Yahoo) mendefinisikan kosakata data terstruktur untuk mesin pencari, diimplementasikan melalui JSON-LD (direkomendasikan), Microdata, atau RDFa. Open Graph dioptimalkan untuk pratinjau link di jaringan sosial. Sebuah halaman harus memiliki keduanya: Schema.org untuk SEO dan Featured Snippets pencarian, serta Open Graph untuk berbagi sosial. Google menggunakan og:title dan og:description sebagai sinyal indeks sekunder, tetapi JSON-LD Schema.org lebih berbobot. Crawler media sosial (facebookexternalhit, Twitterbot, LinkedInBot) hanya membaca tag og:, bukan JSON-LD.
Crawler media sosial memiliki karakteristik teknis penting bagi pengembang. User-agent facebookexternalhit/1.1 menunjukkan Facebook sedang memproses URL untuk menghasilkan pratinjau. Crawler ini TIDAK mengeksekusi JavaScript; mereka hanya memproses HTML statis dari server. Ini berarti aplikasi React/Vue/Angular dengan Client-Side Rendering (CSR) tanpa SSR atau SSG tidak akan memiliki metadata OG yang benar, karena tag meta dihasilkan secara dinamis di sisi klien. Solusinya adalah Server-Side Rendering (Next.js, Nuxt), Static Site Generation, atau layanan prerendering (Prerender.io, rendertron) yang menyajikan HTML yang sudah dirender terlebih dahulu kepada bot media sosial.