If you just want the TLDR:
1. Check that the size of your image is 1200 x 630 and ideally below 1 megabyte (not sure what the exact limit is as it is not mentioned anywhere - below this number has worked for me)
2. Change the name of the route of the URL you are trying to share to make Twitter think this is a new route
Opengraph is very easy. Define a route, style the component and we're good. However, my biggest struggle with opengraph images was X's cache. Once upon a time I was asked to create an opengraph image for an important URL linking to Julius' blog for a Founding Product Designer role. The "hardcoded" .png format image and specifying it inside of the individual route's metadata took 2 minutes. However, I committed a few mistakes that are barely mentioned anywhere on the web:
Posted the URL beforehand to see how it looks currently. Twitter cached the image related to the URL.
Did not check the size of the image. No one cares about opengraph image sizes - except for Twitter. I had a 9000(ish) by 7000(ish) resolution and a total size of about 7 megabytes. Turns out opengraph image won't work with Twitter above a certain size. Reducing it to the standard opengraph size of 1,200 x 630 did the trick.
I spent 4 hours trying to hunt down why was it not updating on Twitter. I redeployed the site multiple times after reducing the size of the image. The image finally worked on my dev deployment. But production still did not show an image. The final boss was to invalidate the cache by renaming my route to something slightly different to create a new cache for a new URL.