Apakah saya perlu menggunakan kedua tag OG dan tag Twitter card?

Secara teknis tidak — kebanyakan platform akan menggunakan tag og: jika tag twitter: tidak tersedia. Namun Twitter/X tidak akan menampilkan format gambar besar tanpa tag twitter:card yang diatur ke summary_large_image, jadi tambahkan itu tetap.

Ukuran gambar apa yang harus saya gunakan untuk og:image?

1200×630px adalah rekomendasi standar. Slack membutuhkan lebar minimal 600px untuk menampilkan gambar apa pun. Di bawah 200×200px dan kebanyakan platform melewatinya secara utuh.

Tag saya benar tetapi tampilan pra-lihat masih rusak. Sekarang apa yang harus saya lakukan?

Platform menyimpan data OG secara agresif. Gunakan Facebook Debugger (developers.facebook.com/tools/debug) atau LinkedIn Post Inspector untuk memaksa pemindaian yang baru. Untuk Slack, tambahkan parameter query untuk memecah URL yang disimpan.

Bisakah saya mengatur tag OG yang berbeda per halaman dalam aplikasi satu halaman?

Ya, tetapi ini membutuhkan rendering di sisi server atau layanan pra-render. Perubahan JavaScript di sisi klien terhadap tag meta tidak terdeteksi oleh kebanyakan crawler — mereka mengambil HTML mentah sebelum JavaScript dijalankan.

Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Tag Open Graph Hentikan Tautan Anda Terlihat Menyeramkan di Slack

Diperbarui pada 15 Mei 2026

Anda telah menghabiskan minggu-minggu membangun aplikasi tersebut. Pratinjau tautan di Slack menampilkan 'Tidak Berjudul' dan ikon yang rusak. Ini adalah masalah Open Graph. Berikut cara memperbaikinya dalam 10 menit.

Tag Open Graph: Hentikan Tautan Anda Tampak Buruk di Slack 1

IKLAN · HAPUS?

Anda menghabiskan tiga minggu membangun aplikasi tersebut. Pratinjau tautan di Slack menampilkan 'Tidak Berjudul' dan thumbnail logo kaki halaman Anda. Ini adalah masalah Open Graph dan membutuhkan sekitar 10 menit untuk memperbaikinya.

Apa itu tag Open Graph?

Open Graph (og:) adalah protokol yang diperkenalkan Facebook pada tahun 2010 yang sekarang digunakan oleh setiap platform utama untuk menghasilkan pratinjau tautan. Ketika Slack, Twitter, LinkedIn, atau iMessage membuka tautan Anda, mereka mengambil halaman tersebut, mencari <meta> tag dengan prefix og: , dan menggunakan tag-tag tersebut untuk membuat kartu.

Tidak ada tag → mereka menebak. Mereka biasanya menebak salah.

Tag yang benar-benar penting

Tag	Diperlukan?	Apa yang dilakukan
`og:title`	Ya	Judul yang ditampilkan di kartu pratinjau
`og:description`	Ya	Teks subjudul/summary (jaga di bawah 200 karakter)
`og:image`	Ya	Gambar pratinjau. Harus menggunakan URL absolut.
`og:url`	Ya	URL canonical untuk halaman tersebut
`og:type`	Disarankan	Uji dengan validator: `website` untuk kebanyakan halaman, `article` untuk postingan
`twitter:card`	Disarankan	Mengontrol ukuran kartu Twitter/X. Gunakan `summary_large_image`.
`twitter:title`	Opsional	Jika tidak ada, jatuh ke `og:title` pada kebanyakan klien
`twitter:description`	Opsional	Jika tidak ada, jatuh ke `og:description`
`twitter:image`	Opsional	Jika tidak ada, jatuh ke `og:image`

Yang paling sering mengecoh orang adalah og:image. Harus menggunakan URL absolut (tidak ada jalur relatif), idealnya ukuran 1200×630px, dan di bawah 8MB. Slack khususnya akan secara diam-diam melewatkan gambar yang tidak memenuhi syarat ukuran. Targetkan setidaknya 600px lebar agar gambar Anda muncul.

Himpunan lengkap tag OG

Letakkan di <head> halaman Anda. Ganti nilai placeholder:

<!-- Primary Open Graph tags -->
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A clear, specific description under 200 characters. No fluff." />
<meta property="og:image" content="https://yourdomain.com/images/og-image.png" />
<meta property="og:url" content="https://yourdomain.com/your-page" />
<meta property="og:type" content="website" />

<!-- Twitter/X card (falls back to og: tags if omitted) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="A clear, specific description under 200 characters." />
<meta name="twitter:image" content="https://yourdomain.com/images/og-image.png" />

Untuk artikel atau blog, ubah og:type ke article dan tambahkan penulis dan tanggal publikasi:

<meta property="og:type" content="article" />
<meta property="article:author" content="https://yourdomain.com/about" />
<meta property="article:published_time" content="2026-04-25T00:00:00Z" />

Cara memverifikasi tag Anda tanpa menerapkan perubahan

Cara tercepat: tempel URL Anda ke IO Tools Open Graph Checker. Hal ini mengambil halaman, memarsing tag, dan menampilkan tepat apa yang akan dilihat Slack (atau platform lain) — termasuk pratinjau bagaimana kartu akan ditampilkan. Tidak perlu login, tidak perlu menginstal ekstensi.

Jika Anda ingin memeriksa URL localhost atau lingkungan staging yang tidak dapat diakses secara publik, checker tidak akan dapat mengaksesnya. Dalam kasus ini, lihat sumber kode halaman Anda dan verifikasi secara manual bahwa tag terdapat di <head>. Setelah di-deploy, jalankan checker lagi untuk memastikan versi hidup sesuai.

Pemeriksa khusus platform (untuk saat Anda perlu memperbarui cache):

Facebook/Meta: developers.facebook.com/tools/debug — juga membersihkan cache Facebook dari tag OG Anda
LinkedIn: linkedin.com/post-inspector — berguna saat pratinjau Anda sudah usang setelah pembaruan
Twitter/X: cards-dev.twitter.com/validator — lebih lambat diperbarui tetapi baik untuk memastikan format kartu

Slack meng-cache secara agresif. Jika Anda memperbaiki tag Anda dan pratinjau lama masih muncul, Anda dapat memaksa pengambilan ulang dengan menambahkan string query (misalnya, ?v=2) ke URL sebelum dibagikan — tidak ideal untuk tautan produksi, tetapi cukup untuk QA.

Menghasilkan tag

Jika Anda ingin menghasilkan himpunan lengkap tag secara interaktif daripada menulis secara manual, IO Tools HTML Meta Tag Generator mengatasi tag OG, kartu Twitter, dan tag meta standar dalam satu langkah. Salin hasilnya ke dalam <head>.

Kesalahan umum yang perlu dihindari

URL gambar relatif. /images/og.png tidak berfungsi. Setiap platform mengambil tag OG dari server eksternal yang tidak memiliki konteks URL dasar Anda. Selalu gunakan jalur lengkap. https:// path.
Menggunakan gambar yang sama untuk semua halaman. Avatar 300×300 sebagai gambar OG secara teknis akan muncul — sebagai thumbnail kecil dan tidak menarik. Buat gambar 1200×630 yang sesuai untuk setiap halaman penting.
Tidak mengatur og:url. Tanpa itu, beberapa platform menggunakan URL yang mereka ambil, sementara yang lain membuat URL sendiri. Tetapkan secara eksplisit.
Lupa untuk menghapus cache. Sebagian besar platform meng-cache tag OG selama 24–72 jam. Jika Anda memperbarui tag pada halaman hidup, gunakan pemeriksa platform di atas untuk memaksa pengambilan ulang.
Menggabungkan property dan name atribut. Tag OG menggunakan property=. Tag Twitter menggunakan name=. Menggabungkannya menyebabkan beberapa parser mengabaikan tag tersebut secara keseluruhan.

Tag Open Graph adalah hal yang membutuhkan lima menit untuk ditambahkan dan terlihat memalukan ketika hilang. Perbaiki sekali, verifikasi dengan Pemeriksa Open Graph, dan lanjutkan.