Genera una imagen OG dinámica para cada página en Next.js
Una sola ruta puede renderizar una imagen social con tu marca por página a partir de su título y metadatos: sin herramienta de diseño, sin exportar a mano. Aquí tienes el patrón.
Diseñar una imagen para compartir distinta por cada página no escala. El mejor patrón es una única ruta dinámica que dibuja una tarjeta con tu marca bajo demanda a partir del título y los metadatos de cada página.
La ruta opengraph-image
Next.js lee un archivo opengraph-image en un segmento de ruta y sirve lo que devuelva como el og:image de esa ruta. Renderizada con next/og, no es más que JSX dibujado en una imagen.
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 },
);
}Hazla específica por página
- Extrae el título de los params de la ruta o de tu capa de datos.
- Aplica el color de acento de tu marca a la tarjeta para que todo se sienta coherente.
- Mantenla por debajo de los límites de tamaño de la plataforma para que siempre cargue.
La skill de Imagen OG monta esta ruta con el tema de tu sitio y conecta openGraph.images en todas tus páginas, de modo que no haya dos rutas que compartan la misma vista previa.