Implementar y verificar imágenes OG en una aplicación Next.js

Elija deliberadamente metadata basado en archivos o en código

• Next.js metadata y imágenes OG — Descripción general oficial de App Router
• generateMetadata API — Referencia dinámica oficial metadata
• Convención opengraph-image — Ficha oficial y referencia ImageResponse

Estático metadata con metadataBase

metadataBase resuelve URLs relativas de metadata; una URL absoluta y pública como https://starterpackai.com/og/home.png facilita la verificación fuera de la aplicación.

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'],
  },
}

Con reconocimiento de ruta generateMetadata en Next.js 16

En el App Router de Next.js 16, params es una Promise: ejecuta await params antes de cargar los datos de la ruta y devolver 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] },
  }
}

Dinámico opengraph-image con ImageResponse

En opengraph-image.tsx del servidor, ejecuta await params y devuelve una ImageResponse con dimensiones 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 verificación de verificación de implementación

• ✓Confirme que metadata o generateMetadata se ejecuta en un segmento de ruta de componente del servidor.
• ✓Abra el HTML implementado y verifique los valores finales de og:title, og:description y og:image.
• ✓Abra la imagen pública absoluta URL en una sesión separada y verifique una respuesta de imagen exitosa.
• ✓Compruebe la composición renderizada de 1200×630 en un tamaño de tarjeta de enlace pequeño.
• ✓Ejecute un verificador público metadata y luego use depuradores específicos de la plataforma cuando los cachés no estén de acuerdo.