5 min lezen
Genereer een dynamische OG-afbeelding voor elke pagina in Next.js
Eén route kan per pagina een gebrande social-afbeelding renderen op basis van de titel en metadata — geen designtool, geen handmatige export. Dit is het patroon.
Voor elke pagina een aparte deelafbeelding ontwerpen schaalt niet. Het betere patroon is één dynamische route die op aanvraag een gebrande kaart tekent uit de eigen titel en metadata van elke pagina.
De opengraph-image-route
Next.js leest een opengraph-image-bestand in een routesegment en serveert wat het teruggeeft als de og:image van die route. Gerenderd met next/og is het gewoon JSX die naar een afbeelding wordt getekend.
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 },
);
}Maak het pagina-specifiek
- Haal de titel uit de params van de route of uit je datalaag.
- Geef de kaart je merkkleur mee zodat het netwerk consistent aanvoelt.
- Blijf onder de groottelimieten van het platform zodat hij altijd laadt.
De OG Image-skill zet deze route op in de stijl van je site en koppelt openGraph.images door je pagina's heen, zodat geen twee routes hetzelfde voorbeeld delen.