Open Graph was first introduced by Facebook in 2010. It promotes integration between Facebook and other website. By integrating Open Graph meta tags into your page’s content, you can identify which elements of your page you want to show when someone share’s your page.

For example, you could use the og:image tag to specify what image you want Facebook to use when your page is shared.

How to add Open Graph meta tags?

Like other meta tags, the Open Graph tags must be in the head of an HTML page. If you change the HTML yourself, these tags can be added using any HTML editor. If you are using a CMS like WordPress, you can change the template or use a plugin like Yoast to manage these tags.

Overview of Open Graph meta tags

Below is a listing of the top Open Graph meta tag properties that can be used with a brief description.

og:title
The title of the page.

og:image
The image you want to use when the page is shared. Using the og:image property is helpful if your page has several pictures and you want a particular image to be used.

og:description
The description of the page.

og:type
The type of the object or page you are describing. Some of the types that could be used include article, music.album, video.movie, and website.

og:url
The canonical URL of the object or page.

og:locale
The location of the information. By default, the locale value is en_US and is not needed unless the language is not English or it is outside the United States.

See the Open Graph protocol  here to have a better look.

How to test your website’s Open Graph integration?

To make life easier, Facebook has created a tool called Sharing Debugger. Using this tool can help verify your Open Graph is properly detected, and that there are no other errors you may not be aware of on the page.

Source- Computerhope and Neil Patel