What is the open chart?(What is, Concept and Definition)

Open Graph is a technology first introduced by Facebook in 2010 that enables integration between Facebook and your user data and a website.By integrating Open Graph meta tags into the content of your page, you can identify which elements of your page you want to show when someone shares your page.

For example, you could use the og: image tag to specify which image you want Facebook to use when sharing your page.By specifying Open Graph information, Facebook doesn't have to guess what information to use when sharing your page.

Example of Open Graph meta tags

Below is an example of how Open Graph meta tags appear on this page so you better understand how they can be used.If you are familiar with HTML meta tags, you will immediately notice that the only real difference between meta tags and Open Graph tags are the property attributes available.

How to add Open Graph meta tags

Like other meta tags, Open Graph tags must be in the header 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 list of the main Open Graph meta tag properties that can be used with a short description.We have tried to list each of these by importance level.Also, please note that not all of these Tags are necessary, but they can help to correctly identify the parts of your page.

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 useful if your page has multiple images and you want a particular image to be used.

Note

Facebook does not use any image smaller than 300 px width and 200 px height.

og: description

The description of the page.

og: type

The type of 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 required unless the language is not English or outside the United States.

How to test the Open Graph integration of your website

Facebook offers an Open Graph debugger that allows anyone to test their page and see how it looks when it is shared on Facebook.Using this tool can help verify that your Open Graph is detected correctly and that there are no other errors don't know on the page.