OpenGraph Image Works on OpenGraph.xyz but Not on WhatsApp
Unanswered
Miniature Schnauzer posted this in #help-forum
Miniature SchnauzerOP
Hi everyone,
I’m using Next.js with the
Here’s the relevant setup:
- OpenGraph Image URL:
- The dynamic image is generated via the
- Meta tag used in the HTML:
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 (
- 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.,
I also found that I needed to add
Thanks for any insights or suggestions!
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!