Desain thumbnail OGP 2025 — Terbaca, ringan, tidak terpotong

Pendahuluan

Untuk OGP, tiga hal terpenting: jangan terpotong, tetap terbaca, dan ringan. Jika font, jumlah teks, margin, dan rasio aspek dijaga konsisten, kita dapat menyerap perbedaan tiap platform. Panduan ini merangkum praktik aman 2025 sambil menggunakan Pembuat Thumbnail OGP. Untuk SEO dan data terstruktur, lihat SEO Gambar 2025 — Alt text, data terstruktur, dan sitemap secara praktis.

TL;DR

Spesifikasi (dasar praktis)

• Ukuran dasar: 1200×630 px (dalam rentang rekomendasi Open Graph)
• Alternatif: 1200×628 px (menyerap perbedaan platform)
• Area aman: 10% per sisi (min 8%); simpan teks di persegi 60% tengah
• Foto latar: tempatkan wajah/logo dan objek utama dalam 50% tengah
• Warna: target rasio kontras ≥ 7:1 (acuan WCAG AAA)
• Bobot: 200–400 KB (OGP statis); hingga ~500 KB bila dinamis
• Format: utamakan WebP; coba AVIF bila kualitasnya oke

Perilaku crop platform berubah sedikit setiap tahun. Dengan margin aman 10% di semua sisi, sebagian besar auto-trim/pratinjau aman dari masalah.

Pola tata letak

Pisahkan 1) judul, 2) sub/deskriptor, 3) area brand. Simpan elemen utama dalam 60% tengah. Pakai spasi dan line-height cukup untuk keterbacaan pada pratinjau sempit.

Tipografi dan keterbacaan

Untuk Jepang, sans yang bersih (gothic) aman. Atur tracking sesuai lebar yang ada dan perhatikan perbedaan glyph saat lokaliasi. Untuk uji cepat, kontrol geser perbandingan membantu (lihat Penggeser perbandingan).

Pembuatan dan optimasi gambar

Buat gambar dasar dengan Pembuat Thumbnail OGP, lalu kompres keluaran akhir ke 200–400 KB dengan Kompresor gambar. Ikuti panduan warna/kontras di Manajemen Warna & Strategi Profil ICC 2025 — Panduan Praktis untuk Konsistensi Warna Web.

Alur otomatis (Node.js/sharp)

Contoh minimal untuk menghasilkan OGP dari template saat deploy.

// scripts/build-ogp.mjs
import sharp from 'sharp'
import fs from 'node:fs/promises'
import path from 'node:path'

const WIDTH = 1200, HEIGHT = 630
const OUT = 'public/ogp'
await fs.mkdir(OUT, { recursive: true })

const entries = [
  { slug: 'ogp-thumbnail-design-2025', title: 'Desain thumbnail OGP 2025', brand: 'Unified Image Tools' },
]

const base = sharp({ create: { width: WIDTH, height: HEIGHT, channels: 4, background: '#0b0f15' } })
for (const e of entries) {
  const svg = `<svg width="${WIDTH}" height="${HEIGHT}" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="100%" height="100%" fill="#0b0f15"/>
    <rect x="${WIDTH*0.1}" y="${HEIGHT*0.1}" width="${WIDTH*0.8}" height="${HEIGHT*0.8}" fill="none"/>
    <text x="50%" y="45%" font-size="72" text-anchor="middle" fill="#fff" font-family="'Inter','Noto Sans JP',sans-serif">${e.title}</text>
    <text x="50%" y="65%" font-size="36" text-anchor="middle" fill="#9aa4b2" font-family="'Inter','Noto Sans JP',sans-serif">${e.brand}</text>
  </svg>`
  const img = await base
    .composite([{ input: Buffer.from(svg) }])
    .webp({ quality: 82 })
    .toBuffer()
  await fs.writeFile(path.join(OUT, `${e.slug}.webp`), img)
}

Catatan:

• Di produksi, gunakan template SVG dengan variabel
• Mulai WebP q≈80 dan sesuaikan setelah cek fringing/banding
• Atur tracking/leading sebelum rasterisasi; upayakan judul ≤ 2 baris

Kesalahan umum

• Terpotong di tepi: margin aman kurang; tetapkan di template
• Teks tidak terbaca: ukuran di bawah minimum/kontras rendah
• Ukuran file besar: tidak resize/dekorasi berlebihan; terapkan dulu Workflow pengubahan ukuran 2025 — Pangkas 30–70% bytes dengan berpikir mundur dari layout

Integrasi Next.js (metadata)

Sajikan OGP secara konsisten via app/[locale]/layout.tsx (contoh konseptual).

// export const generateMetadata = async (): Promise<Metadata> => ({
//   openGraph: {
//     type: 'article',
//     images: [
//       { url: `/ogp/ogp-thumbnail-design-2025.webp`, width: 1200, height: 630, alt: 'Desain thumbnail OGP 2025' }
//     ],
//   },
//   twitter: {
//     card: 'summary_large_image',
//     images: ['/ogp/ogp-thumbnail-design-2025.webp']
//   }
// })

Catatan penting:

• Lebih baik pakai URL absolut agar tidak gagal saat dibagikan eksternal
• Gunakan summary_large_image untuk visibilitas maksimal
• Di situs multibahasa, ganti OGP per locale dan selaraskan dengan hreflang

Resep CLI (cwebp/avifenc)

cwebp input.png -q 82 -m 6 -mt -o ogp.webp
avifenc --min 26 --max 32 --speed 6 input.png ogp.avif

Mendeteksi artefak:

• Guratan Jepang tipis hilang → naikkan kualitas atau pindah ke WebP
• Banding pada gradasi datar → tambah noise tipis atau longgarkan parameter AVIF

Daftar periksa QA (sebelum terbit)

• 1200×630 atau 1200×628; rasio 1,91:1
• Judul/logo/wajah berada dalam area aman 10%
• Ukuran huruf ≥ 40–48 px, judul ≤ 2 baris
• Rasio kontras ≥ 7:1; blur/masking bila latar sibuk
• 200–400 KB (dinamis ≤ ~500 KB)
• Cek visual WebP/AVIF (fringing/jaggies/banding)
• Verifikasi metadata Open Graph/Twitter Card pada halaman
• Uji di perangkat dan platform utama agar pratinjau tidak terpotong

Ringkasan

Stabilkan produksi dengan dua sumbu: templating dan keluaran ringan. Jaga proses dari pembuatan hingga ekspor akhir dalam satu lintasan konsisten untuk menghindari rework.