tools.seratusribuby seratusribu.com
/open-graph-preview

Frontend

Open Graph Preview

Pratinjau tampilan link di Google/Facebook/Twitter, plus generate meta tag.

13/70

Ideal: 1200×630px (rasio 1.91:1)

43/200

Google

https://example.com

My Page Title

Deskripsi halaman Anda akan muncul di sini.

Facebook / LinkedIn

Tidak ada gambar

Example / https://example.com

My Page Title

Deskripsi halaman Anda akan muncul di sini.

X / Twitter

Example

example.com

Tidak ada gambar

My Page Title

Deskripsi halaman Anda akan muncul di sini.

<meta property="og:title" content="My Page Title" />
<meta property="og:description" content="Deskripsi halaman Anda akan muncul di sini." />
<meta property="og:url" content="https://example.com" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Page Title" />
<meta name="twitter:description" content="Deskripsi halaman Anda akan muncul di sini." />

Tags

open graphogmetapreviewsocialseo

Tentang Tool Ini

Open Graph Preview menampilkan pratinjau bagaimana tampilan link kamu saat di-share di media sosial seperti Facebook, Twitter, dan LinkedIn. Kamu juga bisa generate meta tag Open Graph yang siap ditempel di kode HTML website kamu.

Siapa yang Butuh Ini?

  • Pratinjau tampilan link saat di-share di Facebook/Twitter
  • Generate meta tag OG yang siap ditempel di HTML
  • Optimasi tampilan konten di media sosial sebelum publish

Cara Menggunakan

  1. 1

    Masukkan judul halaman di kolom "Title".

  2. 2

    Masukkan deskripsi di kolom "Description".

  3. 3

    Masukkan URL gambar (og:image) untuk preview card.

  4. 4

    Lihat pratinjau tampilan di Facebook dan Twitter, lalu salin kode meta tag.

Pertanyaan Umum

Apa itu Open Graph?+
Open Graph adalah protokol yang memungkinkan website mengontrol bagaimana kontennya ditampilkan saat di-share di media sosial. Meta tag OG menentukan judul, deskripsi, dan gambar yang muncul.
Apakah semua media sosial mendukung Open Graph?+
Facebook, LinkedIn, dan Telegram menggunakan Open Graph. Twitter menggunakan Card (mirip tapi format sedikit berbeda). Tool ini menampilkan pratinjau untuk keduanya.
Ukuran gambar yang ideal untuk og:image?+
Ukuran ideal adalah 1200x630 piksel dengan rasio aspek 1.91:1. Gunakan format JPG atau PNG dengan ukuran file di bawah 5MB.

Tools Terkait

HTML Live Preview

Tulis HTML/CSS/JS, lihat hasilnya langsung di preview sandbox aman.

CSS Gradient Generator

Racik kode CSS gradient dengan pratinjau langsung, tinggal salin.

Color Contrast Checker

Cek rasio kontras warna teks vs latar sesuai standar WCAG AA/AAA.