La imagen Open Graph de Next.js no funciona

Por qué falta o es incorrecta la vista previa de Next.js

• Rutas de imagen relativas sin metadataBase. Una URL relativa en un campo de metadatos basado en URL sin metadataBase provoca un error de compilación y, de todos modos, las plataformas no pueden obtener rutas relativas.

• Una página sobrescribe openGraph y pierde la imagen. Los metadatos de los layouts y las páginas se combinan superficialmente, por lo que el objeto openGraph de una página reemplaza todo el openGraph del layout, incluida la imagen.

• El archivo de imagen es demasiado grande. opengraph-image debe ocupar menos de 8 MB y twitter-image menos de 5 MB, o la compilación fallará.

• Has realizado pruebas en localhost o en un despliegue de vista previa protegido. Las plataformas obtienen la información desde sus propios servidores y no pueden acceder a él.

• La plataforma ha almacenado en caché un despliegue anterior. Actualízala después de aplicar la solución.

Cómo solucionarlo

1. En app/layout.tsx, define metadataBase: new URL('https://tu-dominio.com').

2. Cuando una página defina openGraph, incluye images de nuevo o propaga las imágenes principales desde generateMetadata.

3. O añade un archivo opengraph-image.png al segmento de ruta. Next.js añadirá og:image, su tipo, ancho y alto por ti.

4. Para imágenes generadas, utiliza ImageResponse de next/og con size = { width: 1200, height: 630 }.

5. Despliega y, a continuación, comprueba la URL pública con el comprobador de etiquetas meta.

Etiquetas que Next.js debería generar

• og:title, og:description, og:url

• og:image con og:image:width, og:image:height y og:image:type

• og:image:alt desde opengraph-image.alt.txt

• twitter:card y twitter:image (URL absoluta)

Puedes escribirlas a mano con el generador de etiquetas meta y compararlas con tu compilación.

Reglas de tamaño de imagen

• opengraph-image: .jpg, .jpeg, .png o .gif, máx. 8 MB

• twitter-image: los mismos tipos, máx. 5 MB

• 1200 x 630 px es el tamaño que Next.js utiliza en sus ejemplos

Metadatos en streaming y rastreadores

Las versiones más recientes de Next.js pueden transmitir metadatos en streaming desde generateMetadata hacia el body. Para bots con soporte HTML limitado como facebookexternalhit, Next.js sigue bloqueando el renderizado y coloca las etiquetas en el head. Detecta estos bots mediante el user agent. Puedes anular la lista con htmlLimitedBots en next.config.

Cómo forzar una actualización

Next.js no puede borrar la caché de otra plataforma. Tras el despliegue, actualiza cada plataforma: Post Inspector para LinkedIn, el Sharing Debugger para Facebook, un nuevo parámetro de consulta para X, Slack y Discord. La herramienta de actualización incluye todas ellas.

Fuentes

• Next.js generateMetadata

• opengraph-image y twitter-image