I've got a NextJS app where users can share links to Reddit and the link preview in Reddit should show a different thumbnail based on the shared link. It works perfectly sharing to Slack or FB, but it always shows the exact same image on Reddit regardless of the link shared.
As you can see below, it should be sharing a different image based on the trade.id. However, on Reddit it always only shows the image for trade.id == 2 (this was the first one I shared for testing). I've tried using different accounts, but still the same problem.
const TradePage: React.FC<Props> = ({ trade }) => {
return (
<div>
<Head>
<meta
property='og:url'
content={`https://${URL}/trades/${trade.id}`}
/>
<meta
property='og:image'
content={`https://${URL}/images/Thumbnail${trade.id}.png`}
/>
<meta property='og:image:width' content='1200' />
<meta property='og:image:height' content='901' />
<meta
property='og:title'
content={`Verified ${trade.ticker} Trade`}
/>
<meta
property='og:image:alt'
content={`Verified ${trade.ticker} Trade`}
/>
<meta property='og:image:type' content='image/png' />
</Head>
<TradeComponent trade={trade} />
</div>
);
Reddit caches the OG image on the first request, as do a few other services like Twitter.
Twitter offers an OG testing tool to bust the cache - Reddit does not offer such a tool.
Unfortunately, your OG image is cached on Reddit for as long as they want to cache it or until they release a tool. However, it's been like this for a few years, and it doesn't look high on their priority.
A workaround is to change the URL for the page. For example, adding a trailing slash, query param, or renaming the route.