How to Optimize Social Media with Facebook’s Open Graph Protocol

By Ric Shreves, Michelle Krasniak

Facebook is the leading social media site in the world. If you hope to optimize social media, you will need to know about Facebook’s Open Graph Protocol. The Open Graph protocol is a semantic markup standard introduced by Facebook in 2010 and now widely accepted. Some people view Open Graph as being in competition with Schema.org, but in reality, the two standards are complementary.

It’s possible to implement both the Schema.org microdata and the Open Graph markup. The standards don’t conflict.

Both these standards have the same goal: to better describe the information on a web page. The key differences can be summarized this way:

  • Open Graph metadata describes the page as a whole.

  • Schema.org microformats describe specific elements on the page.

Open Graph markup contains less information than the Schema.org ­microdata does but is easier to implement. To make your web page Open Graph–compliant, you need to add basic metadata to your page. Like traditional metadata, the Open Graph metadata goes into the <head> tag of the web page.

In Open Graph–speak, a web page is an Open Graph object.

Open Graph has four required properties:

  • og:title: The title of the page as you want it to appear in any system that reads the Open Graph data.

    It’s best to keep the title tag shorter than 88 characters. Although you can add more characters, Facebook displays only the first 88.

  • og:type: The type of your object. Types are specified by the protocol and are fairly numerous.

    type is an interesting property, as it controls where the share appears in the user’s interests on Facebook. If, for example, you set type of the object to “movie” and the user shares the object, the share shows up as one of the user’s interests below the heading Movies in the person’s Facebook profile.

    Check here to find out about all the various object types.

  • og:image: The URL of the image you want to represent the page.

    image is an important tag, because a good image can help your content spread. Use this tag to control what appears when your content is shared and make sure that it’s optimized to fit nicely in Facebook. (A ratio of 1.9:1 works best. Keep it larger than 400 × 209 pixels.)

    Don’t leave this tag blank. If you do, Facebook will simply pull some other image from the page — possibly leading to inappropriate results.

  • og:url: The URL of the page. The content of the url tag determines where the user goes when he clicks the Share button.

Some of the required elements have additional optional attributes, and you can provide multiple values for some of them if you so desire.

The options include

  • og:audio: If you want an audio file to accompany the object, use this tag and specify the URL of the file.

  • og:description: Use this tag to provide a one‐ or two‐sentence description of the object.

    Facebook displays only the first 300 characters of your description.

  • og:determiner: This tag allows you to specify the word that precedes the object’s title in a sentence — typically, a, an, or the.

  • og:locale: This tag specifies the locale for the page — in other words, the language on the page. If your content is in American English, for example, the value for this tag would be en_us.

  • og:locale:alternate: If the page is offered in multiple languages, you can list all of them by using this tag.

  • og:site_name: If the web page is part of a larger site that has a different name, use this tag to specify the site’s name.

  • og:video: If you have a video file to include, use this tag to specify the file’s URL.

Using the tags is easier to grasp with an example. In the following example, you see how you can implement the Open Graph markup for a web page about a book titled HowTo: WordPress 4:

<meta property=“og:title” content=“HowTo: WordPress 4”>
<meta property=“og:type” content=“book”>
<meta property=“og:url” content=“http://wordpresshowtobook.com”>
<meta property=“og:image” content=“http://wordpresshowtobook.com/ photo-
200x300.png”> <meta property=“og:locale” content=“en_us”> <meta property=“og:description” content=“Learn to how to use WordPress with this practical how to book filled with WordPress tutorials and solutions to the most common WordPress CMS issues.
Written by Ric Shreves and published by water&stone digital. Available now on Amazon.com, Google Play Store and on this website. Published in ePub, Mobi and PDF versions.”> <meta property=“og:site_name” content=“WordPress How To Book”>

Your Open Graph tags go in the <head> tag of the page. Note that if you’re using a popular content management system (such as WordPress, Joomla!, or Drupal), plug‐ins will handle this task for you so that you don’t have to write any code.

The result of implementing the Open Graph metadata is controlling what’s displayed when someone shares the content on the web page. If someone shares the page with the markup shown in the preceding code, this is what it looks like.

Sample Facebook share output.

Sample Facebook share output.

If you’re not sure that you did one your Open Graph markup correctly, test it with Facebook’s handy Open Graph Debugger.

Although the Open Graph metadata is key to your content’s success on Facebook, it’s also used by several other important social sites, including Twitter, Pinterest, LinkedIn, and Google+.

Does Open Graph markup work? It certainly does! E‐book site Kobo claims to have achieved a 50 percent increase in traffic from Facebook after implementing Open Graph tags.