Hello! I'm using the generateMetadata inside a layout.tsx.
I have no errors in development, but when I deploy my application to Vercel and I try to preview those metadata either copy/paste inside an email, iMessage, etc or using a website like these (https://socialsharepreview.com/) (https://www.opengraph.xyz/) I have 0 preview.

Here is a link to test (https://fondazione-santarelli.vercel.app/collection/work/kline-monument).

It's very strange because I only used Next.js documentation (https://nextjs.org/docs/app/api-reference/functions/generate-metadata).

Here is the layout.tsx:

import ...

type Props = {
  params: {
    slug: string;
    locale: string;
  };
  children: ReactNode;
};

export async function generateMetadata({
  params,
}: Props): Promise<Metadata | null> {
  const locale = params.locale;

  const workMetadata = await clientFetch<TYPEMeta>(METADATA_QUERY, {
    slug: params.slug,
    locale: locale,
    next: { revalidate: 10 },
  });

  if (workMetadata === null) return null;

  const metadata = workMetadata.meta;
  const fallbackMetadata = workMetadata.fallbackMeta;
  const metaTitle = `${metadata.title}${SEO_SEPARATOR}${fallbackMetadata.title}`;

  const temporaryImage = workMetadata.image;

  return {
    title: metaTitle,
    openGraph: {
      title: metaTitle,
      description:
        metadata.description !== null
          ? metadata.description
          : fallbackMetadata.description,
      siteName: fallbackMetadata.title,
      url: WEBSITE_BASE_URL,
      locale: locale,
      images: {
        url: temporaryImage.url,
        secureUrl: temporaryImage.url, 
        type: "image/png",
        alt: metaTitle,
        width: temporaryImage.width,
        height: temporaryImage.height,
      },
    },
    keywords:
      metadata.keywords !== null
        ? metadata.keywords
        : fallbackMetadata.keywords,
  };
}

export default function Layout({ children }: Props) {
  return <>{children}</>;
}