Open Graph

Updated: 08/02/2020 by Computer Hope
Facebook logo

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 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 meta tags, you'll immediately 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 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.

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, the locale value is en_US and is not needed 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.

Facebook, Internet terms, SEO terms, Web design terms