opengraph data missing

Question

I have added the metadata object to my layout.jsx file with the og:title, og:description. Like so:

export const metadata = {
title: 'My Website',
description: 'My Description',
openGraph: {
title: 'My Website',
description: 'My Description',
url: 'https://my-domain.com',
siteName: 'My-Domain-com',
}
}

I also uploaded the opengraph-image.png in the route directory.

The opengraph data shows up in my <head>, but if I test it with Open Graph Checker or Facebook Sharing Debugger it doesn't show. Can someone help please?

Long-legged ant · Answer

I just ran into this -->
For me, this was caused by the pages getting rendered as "use client" (either directly or by accident --> by accident I noticed where i got a warning during npm run build && npm run start )

I fixed it by adding <Suspense> boundaries around the client components, which made sure that the pages (which included the meta header) were rendered server side safely.

To iterate (quickly) you can curl localhost:3000 | grep og and see that the og content is present, but it's in javascript code rather than in the <meta> tags in the header, and then once you get server side rendering working, then they'll show up at the top.

opengraph data missing

2 Replies