Tag og:image termasuk metatag paling berpengaruh di halaman Anda: ia adalah thumbnail yang muncul ketika seseorang membagikan URL Anda di Facebook, LinkedIn, WhatsApp, Slack, Discord, atau X. Namun ada satu aturan yang terus menjebak pengembang: URL yang Anda taruh di og:image **harus absolut**. Jalur relatif akan gagal secara diam-diam dan pratinjau tautan Anda tidak akan menampilkan gambar sama sekali. Panduan ini menjelaskan mengapa syarat itu ada, apa arti sebenarnya "URL absolut", dan cara menyetelnya dengan tepat.
Apa itu og:image dan mengapa penting?
Open Graph adalah protokol yang diperkenalkan Facebook pada 2010 yang memungkinkan Anda mengatur tampilan sebuah URL saat dibagikan di platform sosial. Metatag `og:image` menentukan gambar pratinjau: thumbnail besar yang menarik perhatian di feed, pesan obrolan, atau kartu tautan. Kini ia didukung hampir semua platform yang menampilkan pratinjau tautan: Facebook, LinkedIn, WhatsApp, Telegram, Discord, Slack, iMessage, dan lainnya.
Tanpa og:image yang valid, platform tidak menampilkan gambar sama sekali atau mencoba mengambil gambar acak dari halaman, biasanya sesuatu yang tidak relevan atau terlalu kecil untuk dirender dengan baik. og:image yang dirancang matang dapat meningkatkan rasio klik konten yang dibagikan secara drastis, menjadikannya salah satu metatag paling berdampak yang bisa Anda tambahkan.
Sintaks dasarnya
<meta property="og:image" content="https://example.com/images/article-cover.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="A descriptive alt text for the preview image" />Note
Mengapa og:image memerlukan URL absolut
Saat pengguna membagikan tautan di Facebook, LinkedIn, atau WhatsApp, crawler platform mengunjungi URL tersebut untuk membaca metatagnya. Kuncinya: crawler adalah klien HTTP independen yang tidak memiliki konsep "dari halaman mana ia berasal". Ketika membaca jalur relatif seperti `/images/cover.jpg`, ia tidak punya URL basis untuk menyelesaikannya, sehingga ia mengabaikan tag itu atau memunculkan error.
Sebaliknya, URL absolut bersifat mandiri. Ia memuat protokol, domain, dan jalur lengkap - semua yang dibutuhkan crawler untuk mengambil gambar dari konteks apa pun, tanpa bergantung pada halaman yang baru saja dibacanya. Inilah alasan dokumentasi Open Graph secara eksplisit menyatakan og:image harus berupa URL absolut, dan mengapa semua platform besar menegakkan syarat ini.
URL og:image harus berupa URL absolut. URL relatif, URL relatif protokol, dan data URI tidak didukung.
Tiga format URL dan mana yang berfungsi
| Format URL | Contoh | Berfungsi sebagai og:image? |
|---|---|---|
| URL absolut | https://example.com/og.jpg | ✓ Ya - selalu berfungsi |
| URL relatif protokol | //example.com/og.jpg | ✗ Tidak - skema hilang |
| Jalur relatif root | /images/og.jpg | ✗ Tidak - tanpa domain |
| Jalur relatif | images/og.jpg | ✗ Tidak - tanpa domain dan root |
| Data URI | data:image/png;base64,… | ✗ Tidak - bukan URL |
Warning
Apa arti sebenarnya "URL absolut"
URL absolut adalah URL yang mengidentifikasi lokasi sumber daya di internet secara lengkap, terlepas dari konteks kemunculannya. Ia terdiri atas empat komponen yang semuanya harus ada:
- Skema - protokolnya: `https://` (selalu gunakan HTTPS; gambar HTTP dapat diblokir aturan konten campuran di halaman HTTPS)
- Host - nama domain Anda: `example.com` atau `www.example.com`
- Jalur - lokasi berkasnya: `/images/og-cover.jpg`
- Opsional: port - hanya diperlukan bila berjalan di port non-standar (mis. `:8080`). Jangan sertakan untuk situs produksi.
https://example.com/images/og-cover.jpg
│ │ │
│ │ └-- jalur ke berkas gambar
│ └-------------- nama host (domain Anda)
└---------------------- skema (selalu https://)HTTPS vs HTTP
Selalu gunakan `https://` pada URL og:image Anda. Jika og:image menunjuk ke URL HTTP sementara halaman Anda disajikan lewat HTTPS, browser dan sebagian crawler akan memblokir permintaan konten campuran itu. Facebook, LinkedIn, dan WhatsApp mengambil gambar lewat HTTPS dan akan gagal diam-diam atau tidak menampilkan gambar bila URL Anda memakai HTTP.
Tip
Cara membuat URL absolut yang benar di berbagai framework
Penyebab paling umum bug URL relatif adalah pengembang menyusun nilai og:image lewat penggabungan string tanpa menyertakan origin secara eksplisit. Berikut pola yang benar untuk framework dan lingkungan paling populer.
Next.js (App Router)
Di Next.js 13+ dengan App Router, gunakan properti `metadataBase` pada layout root Anda. Ini memberi tahu Next.js origin mana yang harus dipakai saat menyelesaikan jalur gambar relatif di `openGraph.images`.
import type { Metadata } from 'next';
export const metadata: Metadata = {
metadataBase: new URL('https://example.com'), // ← menetapkan basis
openGraph: {
images: ['/images/og-cover.jpg'], // Next.js menyelesaikan ke URL absolut
},
};Tanpa `metadataBase`, Next.js akan menuliskan jalur relatif di HTML dan crawler sosial gagal memuat gambar. Ini salah satu konfigurasi yang paling sering terlewat pada deployment Next.js.
Next.js (Pages Router)
Di Pages Router dengan `next/head`, Anda harus menyusun URL absolut lengkap secara manual, biasanya memakai variabel lingkungan untuk origin situs.
const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? 'https://example.com';
<Head>
<meta
property="og:image"
content={`${SITE_URL}/images/og-cover.jpg`}
/>
</Head>HTML biasa / situs statis
Tidak ada sihir framework di sini: tulis URL lengkapnya langsung. Satu-satunya variabel yang perlu dijaga adalah memastikan Anda memakai domain produksi, bukan localhost.
<meta property="og:image" content="https://example.com/images/og-cover.jpg" />WordPress
Plugin seperti Yoast SEO, Rank Math, dan All in One SEO otomatis menghasilkan URL absolut og:image dengan menggabungkan `home_url()` dan jalur gambar yang diunggah. Jika Anda menyetel og:image manual di tema, gunakan `get_site_url()` untuk membangun URL absolut alih-alih menuliskan domain di kode.
$og_image = get_site_url() . '/wp-content/uploads/og-cover.jpg';
echo '<meta property="og:image" content="' . esc_attr($og_image) . '" />';Pendekatan variabel lingkungan (disarankan untuk stack apa pun)
Menuliskan domain langsung di kode itu rapuh: staging dan produksi memakai domain berbeda, dan satu salah ketik membuat semua pratinjau rusak. Pola paling bersih adalah menyimpan URL basis situs Anda di variabel lingkungan dan merujuknya saat menyusun nilai og:image.
NEXT_PUBLIC_SITE_URL=https://example.comexport const SITE_URL =
process.env.NEXT_PUBLIC_SITE_URL ?? 'https://example.com';
export function absoluteOgImage(path: string): string {
// Pastikan jalur diawali /
const normalized = path.startsWith('/') ? path : `/${path}`;
return `${SITE_URL}${normalized}`;
}
// Penggunaan:
// absoluteOgImage('/images/og-cover.jpg')
// → 'https://example.com/images/og-cover.jpg'Pengoptimal Teks Pratinjau Open Graph
Periksa panjang og:title dan og:description, risiko pemotongan, dan kualitas teks pratinjau sosial - langsung di browser Anda.
Persyaratan khusus WhatsApp untuk og:image
Pratinjau tautan WhatsApp dibuat oleh crawler-nya sendiri, yang di beberapa aspek lebih ketat daripada Facebook atau LinkedIn. Jika og:image Anda berfungsi di Facebook tetapi tidak di WhatsApp, biasanya salah satu batasan berikut penyebabnya.
- URL HTTPS absolut - sama seperti platform lain; WhatsApp tidak mengikuti pengalihan dari HTTP ke HTTPS.
- Gambar harus dapat diakses publik - tanpa autentikasi, tanpa proteksi bot yang memblokir rentang IP crawler WhatsApp.
- Ukuran minimum gambar: 300×200 px - gambar lebih kecil sering diabaikan perender pratinjau WhatsApp.
- Ukuran berkas maksimum: ~300 KB - crawler WhatsApp punya timeout singkat untuk mengambil gambar. Berkas besar akan timeout atau dilewati.
- Format JPEG atau PNG - dukungan WebP bervariasi menurut versi dan platform WhatsApp. Gunakan JPEG untuk kompatibilitas maksimal.
- og:image:width dan og:image:height sangat disarankan - keduanya memungkinkan WhatsApp menentukan ukuran kontainer pratinjau sebelum mengambil gambar.
Warning
Penyiapan og:image yang disarankan untuk WhatsApp
<!-- og:image inti - harus berupa URL HTTPS absolut -->
<meta property="og:image" content="https://example.com/og/article-cover.jpg" />
<!-- Pelengkap yang sangat disarankan -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="Judul artikel atau deskripsi singkat" />
<!-- Diperlukan agar WhatsApp menampilkan kartu tautan lengkap (bukan hanya URL) -->
<meta property="og:title" content="Judul Halaman Anda" />
<meta property="og:description" content="Deskripsi singkat isi halaman." />
<meta property="og:url" content="https://example.com/halaman-anda" />Pembuat Metatag
Hasilkan blok lengkap Open Graph, Twitter Card, dan metatag standar dalam hitungan detik - dengan pratinjau waktu nyata dan peringatan audit SEO.
Kesalahan umum dan cara memperbaikinya
Bahkan pengembang berpengalaman mengulangi kesalahan og:image yang sama. Berikut masalah paling sering dan solusi tepatnya.
Kesalahan 1: memakai jalur relatif
<meta property="og:image" content="/images/og-cover.jpg" /><meta property="og:image" content="https://example.com/images/og-cover.jpg" />Kesalahan 2: memakai localhost di build produksi
Ini biasanya terjadi ketika variabel lingkungan staging atau pengembangan lokal ter-commit tanpa ditimpa untuk produksi.
<meta property="og:image" content="http://localhost:3000/og.jpg" />Kesalahan 3: sama sekali tidak ada og:image
Bila tidak ada og:image, platform akan mencoba menemukan gambar di konten halaman, biasanya dengan hasil buruk. Selalu sediakan og:image eksplisit di setiap halaman yang kemungkinan dibagikan. Anda dapat memakai Penganalisis Metatag Aback untuk mengaudit URL aktif mana pun seketika dan memastikan og:image ada dan formatnya benar.
Kesalahan 4: gambar mengembalikan status 4xx atau 5xx
URL absolut yang benar secara bentuk tetapi rusak dalam praktik (404, 403, 500) akan memberi hasil sama seperti tanpa gambar: pratinjau kosong. Selalu verifikasi bahwa URL gambar mengembalikan 200 OK dengan header `Content-Type` yang benar.
Kesalahan 5: gambar berada di balik autentikasi
Crawler sosial tidak mengirim cookie atau header autentikasi. Jika URL og:image Anda memerlukan login, atau berada di server staging yang dilindungi autentikasi dasar HTTP, crawler akan menerima 401 atau HTML halaman login alih-alih gambar. Berkas og:image harus selalu dapat diakses publik, bahkan ketika halamannya sendiri berada di balik paywall.
Kesalahan 6: dimensi gambar salah
Gambar yang terlalu kecil (di bawah 200×200 px) mungkin diabaikan. Gambar dengan rasio aspek tidak lazim dapat tampil terpotong atau berbingkai. Dimensi aman universal adalah 1200×630 px dengan rasio 1,91:1. Anda dapat membuat og:image berukuran tepat dalam hitungan detik dengan Pembuat Gambar OG.
| Masalah | Gejala | Solusi |
|---|---|---|
| Jalur relatif | Tidak ada gambar saat dibagikan | Awali dengan https://domainanda.com |
| URL localhost | Tidak ada gambar saat dibagikan | Pakai domain produksi; periksa variabel lingkungan |
| HTTP (bukan HTTPS) | Tidak ada gambar atau error konten campuran | Sajikan gambar lewat HTTPS |
| Gambar 404/403 | Tidak ada gambar saat dibagikan | Perbaiki jalur gambar atau izin akses |
| Gambar dilindungi autentikasi | Tidak ada gambar saat dibagikan | Pindahkan gambar ke jalur CDN publik |
| Dimensi salah | Pratinjau terpotong atau hilang | Gunakan JPEG atau PNG 1200×630 px |
| Tanpa og:image:width/height | Pratinjau lambat atau hilang di WhatsApp | Tambahkan og:image:width dan og:image:height |
Cara memverifikasi og:image Anda sudah benar
Menyetel tag dengan benar di kode adalah satu hal; memastikan ia benar-benar bekerja adalah hal lain. Berikut cara tercepat untuk memverifikasi.
Gunakan Penganalisis Metatag
Penganalisis Metatag di Aback Tools memungkinkan Anda memasukkan URL aktif mana pun dan melihat semua metatag yang dikeluarkan halaman, termasuk og:image. Alat ini memeriksa keberadaan nilai, apakah URL-nya absolut, dan menandai masalah format umum. Ini pemeriksaan awal tercepat.
Gunakan Sharing Debugger Facebook
Sharing Debugger Facebook (`developers.facebook.com/tools/debug`) mengambil dan merender data Open Graph untuk URL mana pun, menunjukkan tepatnya gambar apa yang akan muncul, dan memungkinkan Anda memaksa pengambilan ulang untuk membersihkan cache. Ini sumber resmi untuk pratinjau Facebook dan Instagram.
Gunakan Post Inspector LinkedIn
Post Inspector LinkedIn (`linkedin.com/post-inspector`) menjalankan fungsi yang sama untuk pratinjau LinkedIn. Alat ini sangat berguna karena perilaku crawler LinkedIn berbeda dari Facebook dalam menangani cache dan pengalihan HTTPS.
Periksa langsung sumber HTML
Lihat sumber halaman (`Ctrl+U` / `Cmd+U`) atau gunakan DevTools browser untuk membaca HTML mentah. Temukan metatag `og:image` dan salin nilainya. Jika tidak diawali `https://`, ia akan gagal di crawler mana pun.
Uji URL gambar secara terpisah
Tempelkan URL og:image langsung ke tab browser. Jika Anda mendapat 404, halaman login, atau apa pun selain gambarnya, crawler akan menerima respons yang sama. URL harus mengembalikan gambar mentah dengan 200 OK.
Penganalisis Metatag
Audit URL aktif mana pun untuk keberadaan og:image, format URL absolut, tag Twitter Card, dan 15+ sinyal SEO lain dalam satu pemindaian.
og:image di berbagai platform
Setiap platform menangani og:image sedikit berbeda. Memahami perbedaan ini membantu Anda menulis satu metatag yang berfungsi di mana saja.
| Platform | Ukuran min. | Ukuran disarankan | Format | Caching |
|---|---|---|---|---|
| Facebook / Instagram | 200×200 px | 1200×630 px | JPG, PNG, GIF | Persisten; pakai Debugger untuk membersihkan |
| 200×200 px | 1200×627 px | JPG, PNG | Persisten; pakai Post Inspector | |
| 300×200 px | 1200×630 px | JPG, PNG | Per perangkat; sulit dibersihkan | |
| Telegram | 200×200 px | 1200×630 px | JPG, PNG, WebP | Berumur panjang; dibuat ulang saat dibagikan lagi |
| Discord | 256×256 px | 1200×630 px | JPG, PNG, GIF | Berumur pendek; menyegar otomatis |
| Slack | 500×500 px | 1200×630 px | JPG, PNG | Per ruang kerja; bersih setelah ~30 hari |
| X (Twitter) | 144×144 px | 1200×600 px | JPG, PNG, WebP | ~7 hari; pakai Card Validator untuk membersihkan |
Note
og:image dinamis
Pola yang makin populer adalah membuat og:image secara dinamis per halaman: misalnya og:image sebuah artikel memuat judul dan nama penulis yang dihasilkan di sisi server sebagai PNG. Framework seperti Next.js mendukungnya dengan API `ImageResponse` (`next/og`). Hasilnya tetap URL absolut: pembuatan dinamis terjadi di server dan crawler hanya melihat URL gambar `https://` biasa.
Jika Anda lebih suka pendekatan tanpa kode, Pembuat Gambar OG memungkinkan Anda merancang gambar pratinjau sosial 1200×630 px dengan teks, warna, dan tata letak sendiri, lalu mengunduhnya sebagai PNG - siap diunggah ke CDN Anda dan dirujuk sebagai URL absolut.
og:image bersama set lengkap tag Open Graph
og:image jarang bekerja sendirian. Platform memakai seluruh set tag Open Graph untuk memutuskan apakah menampilkan kartu tautan kaya atau sekadar URL biasa. Jika Anda menambahkan og:image ke sebuah halaman, berikut tag lain yang sebaiknya disertakan bersamaan:
- og:title - judul kartu tautan (biasanya sama dengan `<title>` tetapi bisa lebih pendek)
- og:description - ringkasan 1-2 kalimat yang muncul di bawah judul; periksa panjangnya dengan Pengoptimal Teks Pratinjau OG
- og:url - URL kanonis halaman (gunakan URL yang sama seperti di `<link rel="canonical">`)
- og:type - `website` untuk sebagian besar halaman; `article` untuk postingan blog
- og:site_name - nama situs atau merek Anda
- og:image - URL absolut gambar pratinjau Anda (fokus artikel ini)
- og:image:width dan og:image:height - sangat disarankan agar rendering lebih cepat
- og:image:alt - teks alt deskriptif untuk aksesibilitas dan konteks yang terbaca AI
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:title" content="Your Article Title" />
<meta property="og:description" content="A brief, compelling description under 155 characters." />
<meta property="og:url" content="https://example.com/blog/your-article" />
<meta property="og:image" content="https://example.com/og/your-article.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="Visual description of the preview image" />
<!-- Cadangan Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og/your-article.jpg" />Anda dapat membuat dan memvalidasi seluruh blok ini, termasuk og:image dengan pemeriksaan URL absolut, memakai Pembuat Metatag, atau memvalidasi halaman yang ada dengan Penganalisis Metatag.
Key takeaways
- og:image harus berupa URL absolut: jalur relatif, URL relatif protokol, dan data URI semuanya gagal diam-diam.
- Selalu gunakan https://: gambar HTTP diblokir aturan konten campuran dan banyak crawler menolaknya.
- Ukuran og:image yang disarankan adalah 1200×630 px (rasio 1,91:1) dengan berat di bawah ~300 KB sebagai JPEG.
- Sertakan og:image:width dan og:image:height untuk mempercepat rendering pratinjau di WhatsApp dan Telegram.
- Di Next.js App Router, setel metadataBase agar tidak menghasilkan jalur relatif; di Pages Router, susun URL lengkap dengan variabel lingkungan.
- Verifikasi dengan Penganalisis Metatag, Facebook Sharing Debugger, dan LinkedIn Post Inspector sebelum menerbitkan.
- Crawler tidak dapat menjangkau localhost, server staging di balik autentikasi, atau gambar yang mengembalikan 4xx/5xx - berkas og:image harus dapat diakses publik.