5 Min. Lesezeit
Ein dynamisches OG-Image für jede Seite in Next.js erzeugen
Eine einzige Route kann pro Seite ein gebrandetes Social-Image aus Titel und Metadaten rendern — kein Design-Tool, kein manueller Export. Hier ist das Muster.
Für jede Seite ein eigenes Share-Bild zu gestalten, skaliert nicht. Das bessere Muster ist eine einzige dynamische Route, die bei Bedarf eine gebrandete Karte aus dem eigenen Titel und den Metadaten jeder Seite zeichnet.
Die opengraph-image-Route
Next.js liest eine opengraph-image-Datei in einem Routen-Segment und liefert deren Rückgabe als og:image dieser Route aus. Mit next/og gerendert, ist es einfach JSX, das zu einem Bild gezeichnet wird.
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 },
);
}Mach es seitenspezifisch
- Zieh den Titel aus den params der Route oder deiner Datenschicht.
- Gib der Karte deinen Marken-Akzent, damit sich das Netzwerk stimmig anfühlt.
- Halte sie unter den Größengrenzen der Plattform, damit sie immer lädt.
Das Tool OG-Image gerüstet diese Route im Stil deiner Website und verdrahtet openGraph.images über deine Seiten hinweg, sodass keine zwei Routen sich eine Vorschau teilen.