Membuat gambar OG dinamis untuk setiap halaman di Next.js
Satu rute bisa merender gambar sosial berlogo per halaman dari judul dan metadatanya — tanpa alat desain, tanpa ekspor manual. Berikut polanya.
Mendesain gambar berbagi terpisah untuk setiap halaman tidak akan sanggup mengimbangi skala. Pola yang lebih baik adalah satu rute dinamis yang menggambar kartu berlogo sesuai permintaan dari judul dan metadata milik masing-masing halaman.
Rute opengraph-image
Next.js membaca file opengraph-image di dalam sebuah segmen rute dan menyajikan apa pun yang dikembalikannya sebagai og:image rute tersebut. Dirender dengan next/og, itu hanyalah JSX yang digambar menjadi sebuah gambar.
import { ImageResponse } from "next/og";
export default function Image() {
return new ImageResponse(
<div style={{ fontSize: 64, padding: 60 }}>Your title</div>,
{ width: 1200, height: 630 },
);
}Buat jadi per-halaman
- Ambil judul dari params rute atau lapisan datamu.
- Beri tema kartu dengan warna aksen merekmu supaya jaringannya terasa konsisten.
- Jaga ukurannya di bawah batas platform supaya selalu bisa dimuat.
Skill OG Image menyiapkan kerangka rute ini bertema sesuai situsmu dan menyambungkan openGraph.images ke seluruh halamanmu, jadi tak ada dua rute yang berbagi pratinjau yang sama.