BerandaAlatGenerator Open Graph
Generator Open Graph dengan pratinjau tautan
Isi judul, deskripsi, URL dan gambar — alat ini membuat meta tag Open Graph dan Twitter Cards, menampilkan tampilan tautan di feed dan di aplikasi chat, serta menangkap kesalahan umum: og:image relatif, SVG, gambar terlalu kecil, format og:locale yang salah.
—
Kartu besar di feed
Kartu ringkas
Pratinjau di chat
Tampilan ini hanya perkiraan: setiap media sosial dan aplikasi chat (WhatsApp, Telegram, LINE) memotong teks dan gambar dengan caranya sendiri, dan menyimpan kartu di cache setelah tautan pertama kali dibagikan.
Tag untuk <head>
Semua dihitung di browser Anda — data yang Anda masukkan tidak dikirim ke mana pun.
Cara memakai
- Isi kolomTulis judul dan deskripsi untuk orang yang menggulir feed atau menerima tautan di WhatsApp, bukan untuk mesin pencari: boleh berbeda dari title dan meta description halaman.
- Periksa gambarMasukkan URL lengkap og:image lalu klik “Periksa gambar”, atau pilih file — alat ini menampilkan ukuran dan rasionya.
- Lihat pratinjaunyaKartu besar, kartu ringkas dan pratinjau chat menunjukkan di mana teks terpotong dan bagaimana gambar dipangkas.
- Salin tagTempel blok tag ke <head>. Jika tautan sudah pernah dibagikan, perbarui cache di debugger platform — jika tidak, kartu lama akan terus muncul.
Apa itu Open Graph dan tag mana yang wajib
Open Graph adalah protokol markup buatan Facebook: meta tag di <head> memberi tahu layanan judul, deskripsi dan gambar mana yang ditampilkan saat seseorang membagikan tautan. Sekarang hampir semua membacanya: media sosial, WhatsApp dan aplikasi chat lain, chat tim, hingga mesin pencari.
Spesifikasi ogp.me menyebut empat properti wajib: og:title, og:type, og:image dan og:url. Dalam praktik ditambahkan juga og:description, og:site_name, og:locale dan og:image:alt.
X (Twitter) punya tag sendiri, twitter:*, tetapi memakai Open Graph jika tag itu tidak ada. Jadi cukup tambahkan twitter:card — jenis kartu — dan opsional twitter:site berisi akun Anda.
Ukuran og:image: 1200 × 630 dan rasio 1,91:1
Untuk kartu besar, gunakan gambar 1200 × 630 px — rekomendasi Meta untuk berbagi tautan, dengan rasio (1,91:1) yang ditampilkan tanpa dipotong oleh sebagian besar layanan. Aturan yang diperiksa alat ini:
- URL lengkap.
og:imageharus diawali https:// dan domain — platform tidak bisa membaca path relatif seperti/og.png. - Format raster. PNG, JPEG, WebP atau GIF. SVG tidak didukung.
- Minimal 200 × 200 px, jika tidak kartu besar tidak muncul; X menerima gambar hingga 4096 px per sisi dan di bawah 5 MB.
- Kartu ringkas (
summary) menampilkan gambar persegi — gunakan gambar persegi minimal 144 × 144 px. - Letakkan bagian penting di tengah. Feed dan aplikasi chat memotong tepi dengan cara berbeda; jangan menaruh teks terlalu dekat ke tepi.
Dengan og:image:width dan og:image:height, kartu bisa langsung tampil sebelum gambarnya selesai diunduh. Alat ini menambahkannya setelah ukuran gambar diperiksa.
Kesalahan umum dan cache pratinjau
- og:locale dengan tanda hubung. Formatnya bahasa dan wilayah dengan garis bawah:
id_ID,en_US. Berbeda dengan hreflang yang memakai tanda hubung (id-ID) — lihat generator hreflang. - Satu gambar untuk seluruh situs. Kartu dari halaman berbeda jadi sulit dibedakan. Buat gambar khusus setidaknya untuk halaman utama.
- Tag disisipkan lewat JavaScript. Sebagian besar crawler media sosial tidak menjalankan skrip: tag harus ada di HTML yang dikirim server.
- Kartu lama setelah diedit. Platform menyimpan pratinjau di cache. Setelah mengubah tag, perbarui data di debugger platform atau tambahkan parameter versi pada URL gambar (
og.png?v=2). - Gambar di balik login atau diblokir untuk crawler. Pastikan file bisa dibuka tanpa cookie dan tidak diblokir di robots.txt — penguji robots.txt bisa membantu memeriksanya.
Sumber
- The Open Graph protocol — ogp.me.
- X Developer Platform. Cards markup reference; Summary Card with Large Image — developer.x.com.
- Meta for Developers. Sharing best practices for websites — developers.facebook.com.
Pertanyaan umum
Tag Open Graph mana yang wajib?
Menurut spesifikasi ogp.me: og:title, og:type, og:image dan og:url. Dalam praktik juga ditambahkan og:description, og:site_name, og:locale dan og:image:alt, ditambah twitter:card untuk X.
Berapa ukuran og:image yang tepat?
1200 × 630 px dengan rasio 1,91:1. Jika salah satu sisi di bawah 200 px, kartu besar tidak muncul. Kartu ringkas summary membutuhkan gambar persegi.
Apakah perlu tag khusus untuk Twitter (X)?
Tidak. X membaca og:title, og:description dan og:image jika twitter:title, twitter:description dan twitter:image tidak ada. Cukup tambahkan twitter:card.
Mengapa platform masih menampilkan gambar lama?
Pratinjau disimpan di cache. Setelah mengubah tag, perbarui kartu di debugger platform atau ubah URL gambar, misalnya dengan menambahkan ?v=2.
Bisakah memakai SVG untuk og:image?
Tidak, SVG tidak didukung. Gunakan PNG, JPEG atau WebP.
Bagaimana format og:locale?
Bahasa dan wilayah dengan garis bawah: id_ID untuk bahasa Indonesia di Indonesia. Bentuk dengan tanda hubung (id-ID) dipakai untuk hreflang dan atribut lang, bukan Open Graph.
Apakah data saya dikirim ke server?
Tidak. Tag dibuat di browser Anda. Gambar dari URL dimuat browser Anda langsung dari situs Anda, dan hanya saat Anda mengklik tombol; file yang dipilih tetap ada di komputer Anda.
Lainnya di SEO
- Pratinjau snippet
Seperti apa judul dan deskripsi di Google, dan apakah akan terpotong?
- Pemeriksa keterbacaan
Seberapa sulit teks ini dibaca, dan kalimat mana yang terlalu panjang?
- Generator dan penguji robots.txt
Aturan robots.txt mana yang memblokir atau mengizinkan URL ini untuk crawler tertentu?
- Generator hreflang
Tag hreflang apa yang menghubungkan versi bahasa sebuah halaman?
- UTM builder
Bagaimana membuat link UTM yang konsisten untuk setiap kampanye dan kanal?
- Generator QR code UTM
Booth, brosur, atau poster mana yang mendatangkan pengunjung — dan bagaimana menandai kode QR untuk masing-masing?