OG Image not displaying on WhatsApp despite correct metadata (Next.js 15 + Vercel)

[viv149]

Summary

Hi everyone 👋

I’m facing an issue with Open Graph images on my Next.js 15 project deployed on Vercel.

On my blog page, I set metadata using generateMetadata and the output in the is correct. Example:

When I view page source, all meta tags are present and correct.
But when I share the blog URL on WhatsApp or Facebook, title and description show, but the image does not load.

✅ Things I’ve checked:

The image URL is correct and opens in browser.

The og:image URL is absolute HTTPS.

Metadata is rendered server-side via generateMetadata.

No errors in Next.js logs.

❌ Problem persists only with the image not appearing on social previews.

📝 URL: https://apoorvaproducts-j8on.vercel.app/blog

I suspect this might be related to how the image is hosted (different domain from the Vercel app), or possibly scraper access to the image server.

Has anyone faced a similar issue with OG images on a different domain or with WhatsApp previews? Any reliable way to fix this without moving the image hosting?

Thanks 🙏
page.js
page.js

Additional information

// Function to fetch blog page SEO data (keep this as is)
export async function fetchBlogPageSeo() {
    const response = await fetch(`${API_URL}/blog`, {
        next: { revalidate: 10 },
        headers: { Accept: "application/json" }
    });
    const websiteResponse = await fetch(`${API_URL}/website-setup`, {
        next: { revalidate: 10 },
        headers: { Accept: "application/json" }
    });
    const data = await response.json();
    const websiteData = await websiteResponse.json();

    if (!data?.seoSetting) {
        return {
            page_name: "Seo Not Found", // Renamed to match the key from API response
            seo_description: "The requested Seo data does not exist.", // Renamed
            seo_title: "Seo Not Found", // Renamed
            openGraphImage: `${WEB_URL}/assets/images/apoorva_logo.png`, // Fallback for image
        };
    }
    return {
        page_name: data.seoSetting.page_name || "Apoorva Products - Blog",
        seo_description: data.seoSetting.seo_description || "Read our latest blogs.",
        seo_title: data.seoSetting.seo_title || "Apoorva Products - Blog",
        openGraphImage:
            `${BASE_URL}/${websiteData?.setting?.logo}` || `${WEB_URL}/assets/images/apoorva_logo.png`, // Ensure absolute URL
    };
}


// NEW: Define generateMetadata async function
export async function generateMetadata() {
    const seo = await fetchBlogPageSeo();
    
    return {
        title: "Apoorva Products | " + seo.page_name, // Use seo.page_name
        description: seo.seo_description,
        openGraph: {
            title: seo.seo_title,
            description: seo.seo_description,
            images: [seo.openGraphImage],
            type: "website",
            locale: "en_US",
            siteName: "Apoorva Products",
        },
        twitter: {
            card: "summary_large_image",
            title: seo.seo_title,
            description: seo.seo_description,
            images: [seo.openGraphImage],
        },
    };
}

Example

No response

[LeeWxx]

I think the OG image issue might be happening because this expression always returns a (truthy) string, so the fallback never runs.

const logo = websiteData?.setting?.logo;
const openGraphImage = logo
  ? new URL(logo, BASE_URL).toString()
  : `${WEB_URL}/assets/images/apoorva_logo.png`;

Try checking the logo first like this, so BASE_URL is only added when it actually exists.

[icyJoseph]

This might be it, since they do

`${BASE_URL}/${websiteData?.setting?.logo}` || `${WEB_URL}/assets/images/apoorva_logo.png`, 

Tihs likely turns into undefined or null suffixed BASE_URL, so it never hits the second branch