Gere uma imagem OG dinâmica para cada página no Next.js
Uma única rota pode renderizar uma imagem social com sua marca para cada página a partir do título e dos metadados — sem ferramenta de design, sem exportação manual. Veja o padrão.
Projetar uma imagem de compartilhamento separada para cada página não escala. O padrão melhor é uma única rota dinâmica que desenha um card com sua marca sob demanda, a partir do próprio título e dos metadados de cada página.
A rota opengraph-image
O Next.js lê um arquivo opengraph-image em um segmento de rota e serve o que quer que ele retorne como o og:image daquela rota. Renderizado com next/og, é apenas JSX desenhado em uma imagem.
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 },
);
}Deixe-a específica por página
- Puxe o título dos params da rota ou da sua camada de dados.
- Aplique ao card o tom de destaque da sua marca para que a rede pareça consistente.
- Mantenha-a dentro dos limites de tamanho da plataforma para que sempre carregue.
A habilidade de Imagem OG estrutura essa rota com o tema do seu site e conecta o openGraph.images em todas as páginas, para que nenhuma rota compartilhe a mesma prévia.