Website Bisnis

OG Image untuk Website Bisnis Indonesia: Cara Bikin Pratinjau Link yang Menaikkan CTR 2026

Admin·11 Mei 2026·0 kali dibaca·5 min baca

TL;DR: OG Image adalah gambar pratinjau yang muncul saat URL website dibagikan di sosmed dan aplikasi chat. Tanpa OG Image yang valid, link bisnis Anda tampil sebagai kotak abu-abu yang mudah diabaikan. Panduan ini membahas standar teknis (1200x630, JPG/PNG, di bawah 1 MB), implementasi dinamis di Next.js App Router, dan checklist QA untuk web bisnis Indonesia.

Sebagian besar konsultan dan UMKM yang saya audit punya masalah yang sama: mereka rajin share link artikel atau halaman layanan ke grup WhatsApp dan LinkedIn, tapi link itu tampil tanpa pratinjau gambar. Di feed yang penuh banner kompetitor, link telanjang seperti itu hampir selalu kalah.

Saat membangun Vetmo (pet care platform), kami pasang OG Image kustom per halaman layanan. Click-through rate share organik di Instagram dan Facebook naik signifikan dalam dua bulan pertama. Bukan keajaiban, hanya konsekuensi langsung dari first impression yang lebih kuat.

Apa yang Sebenarnya Dilihat Platform

Saat seseorang menempel URL website Anda ke Facebook, LinkedIn, WhatsApp, atau Slack, platform melakukan scraping ke <head> halaman tersebut. Mereka mencari tag Open Graph dengan urutan prioritas: og:image, lalu og:title, lalu og:description. Kalau tag-tag ini tidak ada, platform akan menebak dengan logo, gambar pertama yang ditemukan, atau tampilan default platform.

Tag minimum yang perlu ada di setiap halaman penting:

html

<meta property="og:title" content="Judul halaman" />
<meta property="og:description" content="Deskripsi singkat 140-200 char" />
<meta property="og:image" content="https://domain.com/og-image.jpg" />
<meta property="og:url" content="https://domain.com/halaman" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />

Spesifikasi Teknis yang Ketat

Standar industri yang aman dipakai lintas platform:

Aspek	Ketentuan
Dimensi	1200 x 630 piksel (rasio 1,91:1)
Ukuran file	Ideal di bawah 1 MB, maksimal 8 MB
Format	JPG atau PNG (hindari WebP untuk OG)
URL gambar	Absolut, pakai HTTPS
Teks dalam gambar	Maksimal 30% area, font minimal 60px
Alt text	Set `og:image:alt` untuk aksesibilitas

Twitter (X) butuh tag twitter:card terpisah. LinkedIn memberlakukan minimum 200x200 piksel, jadi gambar kecil yang lolos di Facebook bisa ditolak LinkedIn. WhatsApp cache lebih agresif, kadang butuh ganti URL gambar untuk paksa refresh.

Dynamic OG Image di Next.js

Untuk situs dengan ratusan halaman (artikel blog, katalog produk, profil konsultan), generate OG Image manual tidak skalabel. Next.js 13 App Router mendukung file opengraph-image.tsx di setiap segment route. Kombinasi dengan Vercel OG memungkinkan render OG Image dinamis on-demand di edge runtime.

Pola yang saya pakai untuk artikel blog di proyek client:

tsx

// app/artikel/[slug]/opengraph-image.tsx
import { ImageResponse } from 'next/og';

export const alt = 'Vito Atmo Article';
export const size = { width: 1200, height: 630 };

export default async function Image({ params }) {
  const article = await getArticle(params.slug);
  return new ImageResponse(
    <div style={{ fontSize: 64, background: '#0a0a0a', color: 'white', width: '100%', height: '100%', padding: 80 }}>
      <h1>{article.title}</h1>
      <p>Vito Atmo · Digital Marketing</p>
    </div>,
    size
  );
}

Hasilnya: setiap artikel punya OG Image unik tanpa Anda harus desain manual di Figma. Ini bagian dari pendekatan structured data menyeluruh yang juga termasuk JSON-LD untuk Google.

Studi Kasus: Nalesha Parfum

Saat awal launching Nalesha (e-commerce parfum lokal), default Shopify menampilkan logo brand sebagai OG Image untuk semua halaman, termasuk halaman produk. Setiap link parfum yang dishare ke WhatsApp Story atau grup penggemar tampil sama persis. Tidak ada diferensiasi.

Setelah migrasi ke Next.js dengan dynamic OG Image yang menampilkan foto produk, nama parfum, dan harga, share organik dari customer naik. Dalam audit 30 hari, traffic dari referral WhatsApp dan LinkedIn naik sekitar 45% dibanding bulan sebelumnya. Bukan karena algoritma, tapi karena link yang dishare lebih layak diklik.

Bagi konsultan Indonesia yang membangun otoritas niche, OG Image konsisten juga jadi sinyal personal brand. Setiap link artikel yang dishare ke LinkedIn ikut membangun visual identity Anda di feed jaringan profesional.

Pertanyaan Umum

Bagaimana cara paksa refresh OG Image yang sudah dicache platform?

Untuk Facebook, pakai Facebook Sharing Debugger (developers.facebook.com/tools/debug). Untuk LinkedIn, pakai Post Inspector (linkedin.com/post-inspector). Untuk WhatsApp, ubah URL gambar dengan menambah query string seperti ?v=2. Cache WhatsApp paling agresif, kadang butuh beberapa hari.

Apakah OG Image mempengaruhi SEO Google?

Tidak langsung. OG Image tidak jadi faktor ranking. Tapi CTR yang lebih tinggi dari traffic referral sosmed bisa jadi sinyal engagement positif. Untuk SEO langsung, fokus ke meta description, structured data, dan Core Web Vitals.

OG Image apa yang cocok untuk halaman About atau Service?

Untuk halaman About, pakai foto profesional Anda dengan teks nama, jabatan, dan tagline. Untuk Service, pakai layout kartu dengan judul layanan dan benefit utama. Hindari OG Image yang terlalu padat teks. Kalau ingin paham anatomi halaman service yang efektif, baca Service Page Konsultan Indonesia.

Tool apa untuk preview OG Image sebelum publish?

Gunakan OpenGraph.xyz, MetaTags.io, atau langsung pakai LinkedIn Post Inspector. Untuk testing produksi, pasang halaman ke staging URL lalu paste ke Slack atau WhatsApp pribadi.

Insight Aplikatif

OG Image bukan elemen kosmetik. Untuk web bisnis Indonesia yang mengandalkan distribusi via WhatsApp grup dan LinkedIn, pratinjau link adalah etalase 90% pertama keputusan klik. Lihat panduan resmi di Open Graph Protocol dan Google Search Central untuk standar terbaru. Bangun sekali dengan dynamic generation, monitor lewat Sharing Debugger, dan pastikan setiap halaman penting punya OG Image yang relevan dengan kontennya.

Cara Marketer Indonesia Pasang CSS interpolate-size di Next.js untuk Animasi Height Auto pada Accordion FAQ, Pangkas 24 Baris JavaScript dan Hilangkan ResizeObserver di 2026

Panduan praktis pasang CSS interpolate-size di Next.js untuk animasi height auto pada accordion FAQ. Hilangkan ResizeObserver dan 24 baris JavaScript di 2026.

Website Bisnis

Cara Marketer Indonesia Pasang CSS text-box-trim di Next.js untuk Typography Presisi, Pangkas 2 Override line-height dan Hilangkan Padding Manual di Heading 2026

Pasang CSS text-box-trim di Next.js untuk hilangkan whitespace di atas dan bawah heading, hasil typography presisi tanpa override line-height dan tanpa padding manual.

Website Bisnis

Cara Marketer Indonesia Pasang CSS text-spacing-trim di Next.js untuk Hero & Heading CJK, Pangkas Kerning Manual dan Hilangkan 4 Override Tailwind di 2026

CSS text-spacing-trim merapikan spasi awal dan akhir karakter CJK secara otomatis. Pasang di Next.js dengan 1 baris CSS, pangkas kerning manual dan override Tailwind.

#og-image#open-graph#next-js#website-bisnis#konversi#social-media

Butuh website yang benar-benar bekerja?

Hubungi Vito untuk konsultasi gratis 15 menit.

WhatsApp Sekarang