generateMetadata not detected by Meta Debugger Console??

[jim-spr]

Generate async metadata with images in the openGraph property.
Example of og Image: https://cdndev.sooper.app/thumbnails/tmb-3a2b5d52-b5fd-4b5e-a730-7dab84b3b3c9/d5c3dc66-ed49-415f-8b73-a04c58cc9788

Sending the link in any other platform than whatsapp / meta works.

Current vs. Expected behavior
Expected Behavior
When sharing links to my site on WhatsApp, the metadata (title, description, image) should be correctly displayed in the link preview. Like any other og-graph testing site.

Actual Behavior
The metadata is not being detected by the Meta Debugger Console, and when links are shared on WhatsApp,Facebook or IG either no preview is shown or an incomplete/incorrect preview is displayed.

Provide environment information
Coolify deployed nextjs app.
15.3.4

Next start, ubuntu
Which area(s) are affected? (Select all that apply)
Metadata

Which stage(s) are affected? (Select all that apply)
Other (Deployed)

Additional context
Description
I'm experiencing an issue where the metadata generated by Next.js's generateMetadata function is not being properly detected by the Meta Debugger Console (Facebook/WhatsApp link preview system). When links to my site are shared on WhatsApp, the metadata (title, description, images) is not being rendered correctly.

What I've Tried

Implemented proper OpenGraph metadata in the root layout.tsx
Created dynamic metadata using generateMetadata in page components
Added explicit Twitter Card metadata as a fallback
Added explicit 'other' metadata with OpenGraph properties
Verified that the metadata is correctly generated in the source code
Tested with the Meta Debugger Console, but metadata is not detected
On the meta debugger not one opengraph or other metadata tag is there. So it's not actually image related I suppose?

Code examples:

Root Layout Metadata (src/app/layout.tsx)

export const metadata = {
title: {
default: 'MyApp',
template: '%s - MyApp',
},
description: 'App description here.',
openGraph: {
title: 'MyApp',
description: 'App description here.',
url: process.env.NEXT_PUBLIC_DOMAIN,
siteName: 'MyApp',
type: 'website',
locale: 'en_US',
images: [
{
url: ${process.env.NEXT_PUBLIC_DOMAIN}/assets/og/image.png,
width: 1200,
height: 630,
alt: 'App description here.',
},
],
},
twitter: {
card: 'summary_large_image',
title: 'MyApp',
description: 'App description here.',
images: [${process.env.NEXT_PUBLIC_DOMAIN}/assets/og/image.png],
},
other: {
'og:image': ${process.env.NEXT_PUBLIC_DOMAIN}/assets/og/image.png,
'og:image:width': '1200',
'og:image:height': '630',
'og:url': process.env.NEXT_PUBLIC_DOMAIN,
'og:title': 'MyApp',
'og:description': 'App description here.',
'og:type': 'website',
}
}
Dynamic Metadata in Content Page
export async function generateMetadata({
params: asyncParams,
}: {
params: Promise<{ id: string }>
}) {
const params = (await asyncParams);
const [id, title] = params?.id || [];
const contentId = content-${id};
const content = await getContentData(contentId);

const contentUrl = `${process.env.NEXT_PUBLIC_DOMAIN}/content/${contentId}/${slugify(content.title)}`;
const imageUrl = content.thumbnail || `${process.env.NEXT_PUBLIC_DOMAIN}/logo/default.png`;

return {
    title: content.title,
    description: content.description,
    openGraph: {
        title: content.title,
        description: content.description,
        url: contentUrl,
        siteName: 'MyApp',
        type: 'article',
        locale: 'en_US',
        images: [
            {
                url: imageUrl,
                width: 1200,
                height: 630,
                alt: content.title,
            },
        ],
    },
    twitter: {
        card: 'summary_large_image',
        title: content.title,
        description: content.description,
        images: [imageUrl],
    },
    other: {
        'og:image': imageUrl,
        'og:image:width': '1200',
        'og:image:height': '630',
        'og:url': contentUrl,
        'og:title': content.title,
        'og:description': content.description,
        'og:type': 'article',
    }
}

}
Project Structure

src/app
├── layout.tsx # Root layout with static metadata
├── (sections)
│ └── [locale]
│ ├── (public)
│ │ ├── layout.tsx
│ │ └── page.tsx
│ └── (content)
│ ├── (shared)
│ │ ├── content
│ │ │ └── [...id]
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx # Dynamic metadata for content
│ │ └── profile
│ │ └── [handle]
│ │ └── (root)
│ │ ├── layout.tsx # Dynamic metadata for profiles
│ │ └── page.tsx
...
Additional Information
The same issue occurs across different page types (content pages, profile pages) I also tried static locally hosted og images, png/jpeg etc. Same result.
All URLs are properly configured with absolute paths
Images are properly sized and formatted according to Meta's recommendations
Any help or guidanceappreciated!

[SametDulger]

This issue with generateMetadata not being detected by the Meta Debugger Console (Facebook, WhatsApp, Instagram) is fairly common with Next.js dynamic metadata when using the App Router, especially in Next.js 15.x.

Here are the key points and steps to help troubleshoot and fix this:

Why does this happen?
Next.js App Router metadata is rendered on the server, but the metadata tags might be dynamically inserted client-side or streamed. Some crawlers and link preview scrapers (like Facebook’s Debugger) expect static HTML metadata at the initial response.

If metadata generation relies on async calls and streaming, the scraper might not see the final metadata since it often fetches only the initial HTML or times out waiting.

Meta Debugger tools do not execute JavaScript. They only see what the server sends in the initial response.

Things to check and try
Ensure absolute URLs for all OG images and URLs

All OpenGraph URLs must be fully qualified (with protocol and domain), not relative or environment variable placeholders.

Test with a static metadata page

Create a simple page with fully static export const metadata = { ... } (no async) to verify that static metadata is detected by the debugger.

Disable streaming (temporarily) for the page

Streaming responses can confuse some scrapers. You can force non-streaming by:

export const dynamic = 'force-static';

or

export const dynamic = 'error';

on the page to confirm if streaming affects metadata detection.

Add metadata to the Root layout

You already have a root layout with static metadata — that’s good. Make sure the dynamic page metadata extends the root metadata or completely replaces it correctly.

Verify the final HTML source in the browser

View source (not dev tools) on your deployed app page and confirm that the <meta property="og:image" ...> and others are actually present in the initial HTML response.

Avoid other for OpenGraph metadata

The other field is a fallback and might cause duplication or conflicts. Use only openGraph and twitter keys, as Next.js generates the correct meta tags from those.

Check for missing or misnamed metadata keys

E.g., images vs image in Twitter metadata — Next.js expects images as an array.

Check environment variables availability

Make sure process.env.NEXT_PUBLIC_DOMAIN is correctly set in production and the URLs are valid.

Use Facebook Sharing Debugger

After you deploy changes, always re-scrape the URL at https://developers.facebook.com/tools/debug/ to clear caches.

Example minimal working dynamic metadata function

export async function generateMetadata({ params }: { params: { id: string } }) {
  const content = await getContentData(params.id);

  const imageUrl = content.thumbnail
    ? `https://yourdomain.com${content.thumbnail}`
    : 'https://yourdomain.com/default-image.png';

  return {
    title: content.title,
    description: content.description,
    openGraph: {
      title: content.title,
      description: content.description,
      url: `https://yourdomain.com/content/${params.id}`,
      siteName: 'MyApp',
      type: 'article',
      images: [
        {
          url: imageUrl,
          width: 1200,
          height: 630,
          alt: content.title,
        },
      ],
    },
    twitter: {
      card: 'summary_large_image',
      title: content.title,
      description: content.description,
      images: [imageUrl],
    },
  };
}

Summary

• The metadata is probably generated correctly, but Meta Debugger doesn’t see it because the initial HTML sent doesn’t contain the tags (due to async, streaming, or environment issues).
• Test with static metadata, disable streaming, verify full absolute URLs, and check final HTML source.
• Remove the other property to avoid confusion.
• Clear caches in Meta Debugger and re-test.