Kamu mengganti OG image atau copy dan ingin memastikannya terlihat oke sebelum deploy. Kamu memilih hero image dan ingin lihat apakah focal point-nya selamat dari crop 1.91:1. Kamu menulis copy title/description dan ingin tahu di mana setiap platform akan memotongnya. Kamu mewarisi halaman tanpa OG tag dan ingin mendraft-nya dengan mem-preview card hasil render.

(URL absolut, 1200×630 ideal) (untuk gaya big-image X/Twitter)

Ini preview statis, bukan fetcher live. Platform sebenarnya men-scrape halaman kamu dari server mereka; kalau site asli kamu punya image yang berbeda, tool ini tidak akan menangkapnya. Pakai debugger milik platform sendiri (Twitter card validator , Facebook Sharing Debugger, LinkedIn Post Inspector) untuk pengecekan yang otoritatif. URL image harus absolut. /og.png tidak akan bekerja — scraper tidak mengenal origin kamu. Image harus bisa diakses publik. Auth wall, CDN yang butuh referer, atau hot-link protection akan meninggalkan kamu dengan card yang rusak. Aspect ratio penting. 1.91:1 (1200×630 canonical) render bagus di setiap platform. Square atau portrait di-crop dengan buruk. Ukuran file penting. Beberapa scraper menolak image di atas 8 MB; targetkan <1 MB supaya first-load tetap cepat. Cache invalidation itu nyata. Begitu sebuah platform men-scrape URL kamu, ia akan men-cache card-nya. Pakai debugger platform untuk memaksa re-scrape. Batas panjang title/description berbeda-beda. Twitter/X memotong title sekitar 70 karakter; Facebook sekitar 88; LinkedIn sekitar 100. Letakkan kata-kata penting di depan. Discord menyukai theme-color . Menambahkan mengatur warna border kiri di embed Discord.

Pratinjau OG Tag

Tempel meta tag OG atau isi title/description/image — pratinjau kartu sosial seperti yang muncul di Twitter/X, Facebook, LinkedIn, dan Discord.

Paste meta tags (optional — fields below are filled from this if provided)

Title

Site URL

Description

Image URL

Site name

Twitter / X (summary_large_image)

Facebook

Discord

Dibuat oleh JXXR1 · ♥ Jadi sponsor · ☕ Belikan saya kopi

Untuk apa ini?

Saat kamu membagikan sebuah link di Twitter/X, Facebook, LinkedIn, Discord, Slack, atau aplikasi chat atau social modern apa pun, link itu di-unfurl menjadi "card" — title, description, dan image — berdasarkan meta tag Open Graph di head halaman. Berbagai platform me-render card ini secara berbeda dan memotong teks pada panjang yang berbeda. Tool ini memberi kamu preview side-by-side bagaimana konten yang sama akan muncul di masing-masingnya, tanpa kamu harus benar-benar membagikan URL-nya di setiap platform.

Kapan digunakan

Kamu mengganti OG image atau copy dan ingin memastikannya terlihat oke sebelum deploy.
Kamu memilih hero image dan ingin lihat apakah focal point-nya selamat dari crop 1.91:1.
Kamu menulis copy title/description dan ingin tahu di mana setiap platform akan memotongnya.
Kamu mewarisi halaman tanpa OG tag dan ingin mendraft-nya dengan mem-preview card hasil render.

Tag minimum

<meta property="og:title" content="…">
<meta property="og:description" content="…">
<meta property="og:image" content="https://…"> (URL absolut, 1200×630 ideal)
<meta property="og:url" content="https://…">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image"> (untuk gaya big-image X/Twitter)

Kesalahan umum

Ini preview statis, bukan fetcher live. Platform sebenarnya men-scrape halaman kamu dari server mereka; kalau site asli kamu punya image yang berbeda, tool ini tidak akan menangkapnya. Pakai debugger milik platform sendiri (Twitter card validator, Facebook Sharing Debugger, LinkedIn Post Inspector) untuk pengecekan yang otoritatif.
URL image harus absolut. /og.png tidak akan bekerja — scraper tidak mengenal origin kamu.
Image harus bisa diakses publik. Auth wall, CDN yang butuh referer, atau hot-link protection akan meninggalkan kamu dengan card yang rusak.
Aspect ratio penting. 1.91:1 (1200×630 canonical) render bagus di setiap platform. Square atau portrait di-crop dengan buruk.
Ukuran file penting. Beberapa scraper menolak image di atas 8 MB; targetkan <1 MB supaya first-load tetap cepat.
Cache invalidation itu nyata. Begitu sebuah platform men-scrape URL kamu, ia akan men-cache card-nya. Pakai debugger platform untuk memaksa re-scrape.
Batas panjang title/description berbeda-beda. Twitter/X memotong title sekitar 70 karakter; Facebook sekitar 88; LinkedIn sekitar 100. Letakkan kata-kata penting di depan.
Discord menyukai theme-color. Menambahkan <meta name="theme-color" content="#xxxxxx"> mengatur warna border kiri di embed Discord.