How to force vercel to refresh metadata / opengraph image?

[TamirCode]

Summary

When I replace my opengraph image with another one in one of my routes, it doesnt update in vercel even though github and localhost updated it properly, vercel seems to have kept it cached and even after redeployment it keeps the old one. How do I force vercel to update my metadata opengraph image without waiting days/weeks?

Steps to Reproduce

have a project, replace file in one of the routes opengraph-image.png with a different image but same name (nextjs) and then push to github which should trigger a deploy to vercel. But then the image doesnt update, when checking in inspector tools, and using vercel's opengraph inspector and other meta inspecting websites

[TamirCode]

I even tried removing the file, deploying, then it succesfully removes the opengraph image. then adding the file again, then deploying, and it somehow still keeps the old image. thats insane

[peguerosdc]

I have the same problem.

[TamirCode]

I think adding a new route with a fresh opengraph refreshes the other routes. Not sure if thats the cause tho after my thing updating a week later

Edit: this doesnt work

[renenielsendk]

I have the same issue, its caching an image i had like 3-4 versions ago. Its annoying when i wanna share stuff, and i can't get rid of it

[renenielsendk]

I seem to have found a way to "force" it to refresh.

Steps:

1. First commit

• Remove the opengraph-image.png and twitter-image.png from app folder
• add image to public/social.png (or similar)
• Add images in opengraph next14 seo https://nextjs.org/docs/app/api-reference/functions/generate-metadata#opengraph

images: [
  {
   url: 'https:/your_domain/social.png',
   width: 1200,
   height: 630,
  },
]

• push and deploy this

2. Check opengrah for deployment (Mine has now changed to the new)
3. revert step 1 so you are back with the opengraph-image.png and twitter-image.png

After doing step 1-3, vercel now sees my new opengrah image.
Twitter does still have my old cached version, but that is a twitter issue.

[myudak]

still doesnt work for me

[cameronlockey]

I have this same issue. There is a ?someidorcode at the end of the opengraph_image.png url if I look at the opengraph metadata in the deployment on vercel. That usually indicates a timestamp or cache reference. There does not appear to be a way (other than maybe the previous post) to force it to refresh. Very annoying.

[blooser]

Same here, I'm using opengraph-image.png format, and updaing the file does not update open graph image. It shows old one.

Does anybody find a solution for that? 😿

[TamirCode]

Pls fix this vercel, this silly bug is hindering my progress. I have to wait weeks before the corrected image updates.

[martin-dimi]

+1 this is a problem for us too. Please provide a way to invalidate this metadata

[hassaanp]

This needs to be fixed!

[GulinaTayier]

+1, anyone find workaround?

[cameronlockey]

+1, anyone find workaround?

Delete your opengraph_image.png. Then put an image array of full URLs into the opengraph metadata as if you were doing a page specific override.

[paquino11]

Same issue on my side.

[paquino11]

This worked for me on a NextJS project:

Add opengraph-image.png to public folder and use the following code.

const title = 'Project Title';
const description = 'Project Description';

export const metadata: Metadata = {
metadataBase: new URL(getURL()),
title: title,
description: description,
openGraph: {
title: title,
description: description,
images: [
{
url: '/opengraph-image.png',
width: 1200,
height: 630,
alt: ''
}
]
}
};

[myudak]

same mann that is insane, i tried everything delething cache

[myudak]

ok i solved the problem by changing its png to jpg

[samcx]

Hey everyone—

This has been fixed here for Next.js → vercel/next.js#66714!

Let me know if there are still issues with this!

[github-actions[bot]]

This discussion was automatically locked because the community moved to a new site. Please join us at vercel.community