Next.js Discord

Discord Forum

OpenGraph Image Works on OpenGraph.xyz but Not on WhatsApp

Unanswered
Miniature Schnauzer posted this in #help-forum
Open in Discord
Miniature SchnauzerOP
Hi everyone,

I’m using Next.js with the ImageResponse API from next/og to generate a dynamic OpenGraph image for my website. The issue I’m facing is that the OpenGraph image displays correctly on tools like [OpenGraph.xyz](https://www.opengraph.xyz/) and Facebook Sharing Debugger, but it does not show up when sharing the link on WhatsApp.

Here’s the relevant setup:

- OpenGraph Image URL: https://www.presupuestouniversitario.com.ar/opengraph-image?f1e1d2a5a4c83247
- The dynamic image is generated via the /opengraph-image route using ImageResponse from next/og.
- Meta tag used in the HTML:
  <meta property="og:image" content="https://www.presupuestouniversitario.com.ar/opengraph-image?f1e1d2a5a4c83247" />
  <meta property="og:image:type" content="image/png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  


Despite this, WhatsApp does not display the image preview when the link is shared. Here’s what I’ve checked:
- The image loads correctly in OpenGraph.xyz and Facebook Debugger.
- The image is served with the correct MIME type (image/png).
- The image URL uses HTTPS.
- The image dimensions are 1200x630 pixels, well within OpenGraph standards.

However, when sharing the link on WhatsApp, no image preview is generated.

### My Question:
Could the issue be related to the missing file extension (e.g., .png) in the URL? Do WhatsApp and similar platforms require an explicit .png or .jpg extension in the URL?

I also found that I needed to add metadataBase in my Next.js configuration for the OpenGraph image to work correctly, as mentioned in [this discussion](https://github.com/vercel/next.js/discussions/50546#discussioncomment-9155936). Could this have any additional impact on the WhatsApp preview?

Thanks for any insights or suggestions!

0 Replies