Salin & tempel Dengan pratinjau Termasuk tip gambar/cache

Generator Tag OGP (Output otomatis og:title/og:image dll.)

Q: "Sertakan tag Twitter Card juga?"

"Ya. twitter:card dan tag terkait dapat dihasilkan bersama. X dapat menggunakan tag OG sebagai cadangan, jadi pengaturan minimal tetap berfungsi. (X Developer)"

Q: "Ukuran gambar yang disarankan?"

"Sebagai panduan, Meta menyarankan 1200×630 atau lebih besar (minimal 600×315) dan rasio mendekati 1.91:1. summary_large_image milik X memiliki rasio dan minimal yang berbeda. Pilih platform target."

Q: "Pratinjau tidak diperbarui"

"Seringkali karena cache. Ambil ulang secara paksa melalui debugger/inspektur, dan jika Anda mengganti gambar, gunakan URL gambar baru."

Masukkan URL, judul, deskripsi, dan URL gambar. Buat tag meta Open Graph + Twitter Card sekaligus.

Pengambilan berjalan langsung di browser Anda (berlaku batas CORS).

Input

Tag meta yang dihasilkan / Pratinjau

1) Informasi Inti

Wajib

Judul (og:title) Wajib

Panduan: 30–60 karakter 0

Deskripsi (og:description) Opsional

Panduan: 80–120 karakter 0

URL Gambar (og:image) Wajib

Pratinjau thumbnail muncul saat gambar dimuat.

Rasio saat ini -

Nama Situs (og:site_name) Opsional

Tipe (og:type) Wajib

Pilih website atau artikel.

2) Twitter Card

Dapat dilipat / Aktif secara default

Sertakan tag Twitter Card

twitter:card

twitter:site (opsional)

twitter:creator (opsional)

Aturan sinkronisasi otomatis

• Jika twitter:title kosong, gunakan og:title.
• Jika twitter:description kosong, gunakan og:description.
• Jika twitter:image kosong, gunakan og:image.

3) Lanjutan

Buka hanya jika perlu penyesuaian detail.

og:locale (opsional)

og:image:alt / twitter:image:alt

Teks aksesibilitas. Maksimal 420 karakter.

og:image:width

og:image:height

Menambahkan lebar/tinggi dapat membantu crawler merender lebih cepat. (Facebook Developers)

Tag artikel (hanya saat og:type=article)

article:published_time

article:modified_time

Gunakan ISO 8601 jika diperlukan.

Tag meta yang dihasilkan

Pratinjau

Pratinjau OG

example.com

Judul pratinjau

Deskripsi akan muncul di sini.

Banyak aplikasi media sosial/chat terlihat mirip seperti ini

Pratinjau kartu X summary

example.com

Judul pratinjau

Deskripsi akan muncul di sini.

Beralih antara summary dan summary_large_image

Catatan (opsional)

Catatan muncul di sini berdasarkan input Anda.

Opsi

Simpan input di URL Bagikan tautan untuk membuka kembali dengan pengaturan yang sama Hapus spasi otomatis Juga menghapus spasi lebar penuh Escape kutipan ganda Jaga atribut meta tetap aman

Panduan ukuran gambar (contoh)

Pilih OG atau X untuk melihat contoh ukuran

Berorientasi OG Berorientasi X

Petunjuk rasio -

Cara Pakai / Contoh

Isi URL, judul, deskripsi, dan URL gambar.
Pilih og:type dan (opsional) pengaturan Twitter Card.
Salin tag yang dihasilkan dan tempel ke dalam <head>.

Contoh cepat

Masukkan URL + judul + gambar, lalu salin set yang disarankan.

Catatan & Tip

Apa itu OGP?

OGP (Open Graph Protocol) memungkinkan platform sosial membaca judul, deskripsi, dan gambar halaman Anda.

Dengan mengatur og:title/og:description/og:image, Anda dapat mengontrol tampilan tautan yang dibagikan.

Twitter Cards (X) menggunakan metadata serupa dan dapat menggunakan tag OG sebagai cadangan.

Panduan ukuran gambar (untuk menstabilkan pratinjau)

Panduan Meta (Facebook)

• Minimal 200×200.
• Untuk tampilan lebih baik, 1200×630 atau lebih besar; minimal 600×315 direferensikan. (Facebook Developers)
• Rasio yang mendekati 1.91:1 membantu menghindari pemotongan (perkiraan).
• Panduan ukuran file termasuk 8MB atau kurang.

Panduan kartu X (Twitter)

• summary_large_image mendukung rasio 2:1; minimal 300×157, maksimal 4096×4096. (X Developer)
• Ukuran file di bawah 5MB dan format umum (JPG/PNG/WEBP/GIF) direferensikan.

Saat perubahan tidak muncul (cache & ambil ulang)

• Crawler media sosial menyimpan cache data OG. Gunakan debugger/inspektur masing-masing platform untuk mengambil ulang. (Facebook Developers)
• Jika Anda mengganti gambar tetapi tidak diperbarui, URL gambar itu sendiri mungkin di-cache; ganti nama file atau tambahkan query string.
• Menambahkan og:image:width/height dapat meningkatkan stabilitas perenderan. (Facebook Developers)

Alat untuk validasi

Meta Sharing Debugger

Ambil ulang dan periksa tag OG.

LinkedIn Post Inspector

Segarkan pratinjau cache LinkedIn.

X Card Validator

Periksa perenderan Twitter Card.

FAQ

Sertakan tag Twitter Card juga?

Ya. twitter:card dan tag terkait dapat dihasilkan bersama. X dapat menggunakan tag OG sebagai cadangan, jadi pengaturan minimal tetap berfungsi. (X Developer)

Ukuran gambar yang disarankan?

Sebagai panduan, Meta menyarankan 1200×630 atau lebih besar (minimal 600×315) dan rasio mendekati 1.91:1. summary_large_image milik X memiliki rasio dan minimal yang berbeda. Pilih platform target.

Pratinjau tidak diperbarui

Seringkali karena cache. Ambil ulang secara paksa melalui debugger/inspektur, dan jika Anda mengganti gambar, gunakan URL gambar baru.