Genera un'immagine OG dinamica per ogni pagina in Next.js
Una sola rotta può generare un'immagine social brandizzata per ogni pagina a partire dal suo titolo e dai suoi metadati — nessuno strumento di design, nessun export manuale. Ecco lo schema.
Progettare un'immagine di condivisione separata per ogni pagina non è scalabile. Lo schema migliore è un'unica rotta dinamica che disegna una card brandizzata su richiesta a partire dal titolo e dai metadati di ciascuna pagina.
La rotta opengraph-image
Next.js legge un file opengraph-image in un segmento di rotta e serve ciò che restituisce come og:image di quella rotta. Renderizzata con next/og, è semplicemente JSX disegnato in un'immagine.
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 },
);
}Rendila specifica per pagina
- Ricava il titolo dai params della rotta o dal tuo data layer.
- Personalizza la card con l'accento del tuo brand, così la rete di anteprime risulta coerente.
- Mantienila entro i limiti di dimensione delle piattaforme, così si carica sempre.
La skill Immagine OG imposta questa rotta con il tema del tuo sito e collega openGraph.images a tutte le tue pagine, così non ci sono due rotte che condividono la stessa anteprima.