Open Graph

Open Graph is a technology first 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 what 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 meta tags, you'll immediately notice that the only real difference between meta tags and Open Graph tags is the available property attributes.

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 modify the HTML yourself these tags can by 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. We've tried to list each of these by the level of importance, and it is important to realize not all of these tags are required, but can help 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. Note: 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. 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, this 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 page for a full listing of available metadata

How to test your website's Open Graph integration

Facebook offers an Open Graph debugger that allows anyone to test their page and determine how it will appear when shared on Facebook. 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.