1. What Is It?

"The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

og:title - The title of your object as it should appear within the graph, e.g., "The Rock".

og:description - A one to two sentence description of your object.

og:image - An image URL which should represent your object within the graph."

Source: https://ogp.me/ 

2. What Needs To Be Set?

If you share this URL to (https://www.slicedbread.agency/blogs/web-development/show-newsletter-popup-after-3-days) on Facebook, you'll get something like:

You can test how various other pages look when shared on Facebook by using: https://developers.facebook.com/tools/debug/ 

A lot of pages have <title> tag set up, and most pages have meta descriptions. Facebook "knows" how to take the OG:title and OG:description from the meta titles and meta descriptions, so you don't necessarily need to specify a dedicated tag for these.

On the other hand, the OG:image tag gets a bit complicated. If you don't specify it, Facebook and other platforms will try to detect a large image within an article automatically, but this might fail, especially in the cases when a large enough image within the article isn't present.

3. How To Create An OG:image

You can manually create an image with this resolution: 1200x630 pixels.

You can also create an account with https://www.canva.com/ and create a Facebook Ad/Facebook Shop Ad.

Some tips:

• Make sure the image you end up with is at least 1200x628 pixels. If you make it larger than this it won’t be helpful.
• Consider adding text to the photo, like a title, a call to action, or a logo.
• Of course, create a design that looks nice.

The image below is a good example:

Most content is shared as a URL, so it's important that you mark up your website with open graph tags to take control over how your content appears on social.