Open Graph
Open Graph is a technology introduced by Facebook in 2010 that allows integration between Facebook and its user data and a 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. By specifying Open Graph information, Facebook doesn't have to guess what information to use when your page is shared.
Example of Open Graph meta tags
Below is an example of how Open Graph meta tags appear on this page to give you a better understanding of how they could be used. If you are familiar with HTML (hypertext markup language) meta tags, notice that the only real difference between meta tags and Open Graph tags is the available property attributes.
<meta property="og:title" content="What is Open Graph?"/> <meta property="og:description" content="Computer dictionary definition of what Open Graph means, including related links, information, and terms."/> <meta property="og:type" content="article"/> <meta property="og:image" content="https://www.computerhope.com/comp/logos/facebook.gif"/>
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 by added using any HTML editor. If you are using a CMS (content management system) 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. We've tried to list each of these by the level of importance. Also, it should be noted not all of these tags are required, but helps with properly identifying 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 helpful if your page has several pictures and you want a particular image to be used.
Facebook does not use any image smaller than a width of 300px and height of 200px.
og:description
The description of the page.
og:type
The type of the object or page you are describing. Types that could be used include article, music.album, video.movie, and website.
og:url
The canonical URL (uniform resource locator) of the object or page.
og:locale
The location of the information. By default, the locale value is en_US and is unnecessary unless it is not English or is outside the United States.
How to test your website's Open Graph integration
Facebook offers an Open Graph debugger that allows anyone to test their page and view how it looks when shared on Facebook. Using this tool helps verify your Open Graph is detected, and that there are no other errors you may not be aware of on the page.