OG image not working in social share

[thenawaraj]

OG image not working in social share

[icyJoseph]

Hi, is this happening everywhere, or just Slack/Facebook?

Have you debugged and verified that the metadata is in the HTML? Note that since 15.2, https://nextjs.org/blog/next-15-2#streaming-metadata metadata is streamed to certain clients, so you might find metadata in the body of the page. See, #79404, for a bit more in-depth explanation.

[icyJoseph]

Yeah, you shouldn't just use that... it can make or app slower. Streaming Metadata exists for a reason.

I think, the important part is, can you find the open graph image tag in the HTML?

[icyJoseph]

Can you try your URL here? https://www.opengraph.xyz/

[icyJoseph]

Could you share a screenshot of the metadata stuff? try to blur sensitive data

Also, do you have inlined CSS? like <style> tags before the metadata?

[icyJoseph]

@thenawaraj did you manage to resolve it?

[zainshahbaz786]

I also deal with same issue, OG image won’t work if it’s rendered client-side — social media bots don’t run JavaScript.
Use SSR (getServerSideProps) or SSG (getStaticProps) with in Next.js to include OG tags in the initial HTML.
Make sure the OG image URL is absolute and publicly accessible.
Also , use Next Js default tag library rather then third Party .

[thenawaraj]

not working only in facebook

[icyJoseph]

yeah, OP's issue, I think is more related to this: #79263

Not necessarily because style tags, but because there's just too much HTML, above the meta tags, and Facebook bails out when it has parsed "too many" bytes