Implemente e verifique imagens OG em um aplicativo Next.js

Escolha metadata baseado em arquivo ou código deliberadamente

• Next.js metadata e imagens OG — Visão geral oficial do App Router
• API generateMetadata — Referência dinâmica oficial metadata
• Convenção opengraph-image — Arquivo oficial e referência ImageResponse

Estático metadata com metadataBase

metadataBase resolve URLs relativas de metadata; uma URL pública absoluta como https://starterpackai.com/og/home.png facilita a auditoria fora do aplicativo.

import type { Metadata } from 'next'

export const metadata: Metadata = {
  metadataBase: new URL('https://starterpackai.com'),
  title: 'A clear page title',
  description: 'A concise share description',
  openGraph: {
    images: ['https://starterpackai.com/og/home.png'],
  },
}

generateMetadata com reconhecimento de rota em Next.js 16

No App Router do Next.js 16, params é uma Promise: faça await params antes de carregar os dados da rota e retornar generateMetadata.

import type { Metadata } from 'next'

type Props = { params: Promise<{ slug: string }> }

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params
  const post = await getPost(slug)

  return {
    title: post.title,
    openGraph: { images: [post.ogImageUrl] },
  }
}

opengraph-image dinâmico com ImageResponse

No opengraph-image.tsx do servidor, faça await params e retorne uma ImageResponse com dimensões explícitas.

import { ImageResponse } from 'next/og'

export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'

export default async function Image({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return new ImageResponse(
    <div style={{ display: 'flex', padding: 80 }}>{slug}</div>,
    size
  )
}

Lista de verificação de verificação de implantação

• ✓Confirme se metadata ou generateMetadata é executado em um segmento de rota do componente de servidor.
• ✓Abra o HTML implantado e verifique os valores finais og:title, og:description e og:image.
• ✓Abra a imagem pública absoluta URL em uma sessão separada e verifique uma resposta de imagem bem-sucedida.
• ✓Verifique a composição 1200×630 renderizada em tamanho pequeno de cartão de link.
• ✓Execute um verificador público metadata e use depuradores específicos da plataforma quando os caches discordarem.