What each tag controls
Each tag is a line like <meta property="og:title" content="PPI Calculator"> in the page head. They feed the parts of the card:
og:titleis the headline.og:descriptionis the line or two under it.og:imageis the picture.og:urlis the canonical address, the permanent ID of the page.og:typeis the kind of thing the page is. Leave it out and Facebook treats the page aswebsite.articlesuits a post.og:site_name,og:image:alt,og:image:widthandog:image:heightare optional extras.
The protocol says a page with an og:image should also give og:image:alt. Facebook adds that giving the image width and height helps it load properly the first time the link is shared.
Image size and the safe zone
The common size is 1200x630 pixels, a 1.91:1 shape. Facebook asks for images of at least 1200x630 so they look sharp on high-resolution screens. The smallest allowed is 200x200, a large preview wants at least 600x315, the ratio should stay close to 1.91:1, and the file can't pass 8 MB.
Other apps crop to their own shapes. Keep text and logos in the center 600x315 of a 1200x630 image and they survive. The image size guide lists the platforms.
Why a preview doesn't update
Platforms fetch your page and cache what they find. Facebook's documentation says images are cached by URL and won't update unless the URL changes, so a replaced image needs a new file name. Its Sharing Debugger fetches the page again on request. Fix the tags first, then ask the platform to scrape the page again. The OG debugger guide lists the current tools.
Open Graph beside other meta tags
The tags use a property attribute, not name, because the protocol is based on RDFa. Twitter cards have their own twitter: tags, and the Open Graph and Twitter tags guide covers how the two interact.
Open Graph only shapes link previews. Telling a search engine what a page is about is the job of JSON-LD, and most pages want both.