Open Graph Protocol for Facebook Explained with Examples

What is Open Graph Protocol and Why Do You Need It?

Open graph protocol is a protocol (i.e. set of rules) which is used to integrate any web page into the social graph.

For example Facebook can be your social graph or social circle.

Once the web page is integrated it behaves like the object of the social graph (facebook) i.e. it has same functionality as a facebook page.

Through open graph protocol you can tell Facebook how your shared contents should be displayed on Facebook.

This protocol tells facebook which title, URL, image and description of your blog post/page should be used when your content is shared on facebook.

Open Graph Protocol Meta Tags

To turn your web page into a graph object, you need to use open graph protocol meta tags and the ‘like’ button.

Following are examples of such Meta tags:

  1. <meta property=”og:title” content=” “/>
  2. <meta property=”og:type” content=””/>
  3. <meta property=”og:url” content=””/>
  4. <meta property=”og:image” content=””/>
  5. <meta property=”fb:admins” content=””/>
  6. <meta property=”og:site_name” content=””/>
  7. <meta property=”og:description” content=””/>

Get the E-book (52 Pages)

Get the E-Book (37 Pages)

The Easiest Way to Implement Open Graph Protocol

If you are using wordpress, you can use wordpress for SEO Plugin by Yoast to add open graph protocol Meta tags on your website.

Once you have added the plugin, follow the steps below:

  1. Go to plugin settings (SEO > Social)
  2. Click on the checkbox ‘Add Open Graph Meta Data’
  3. Click on ‘Add Facebook Admin Button’
  4. Click on ‘Save Settings’ button.

Manually Implementing Open Graph Protocol

If you don’t use wordpress or you want to add these Meta tags manually then follow the steps below:

Step-1: Create a Facebook Page or Facebook Application and then claim your domain by associating it with Facebook Page/App. In this way you can use Facebook Page/App insight.

Step-2: Note down the value of the application ID if you have created Facebook App. Otherwise just note down the value of Facebook Admin ID which you can determine from your Facebook Insight Page.

Step-3: Open your theme’s header file (generally header.php) and add following code just before the <head> tag on your web page:

<html xmlns="" xmlns:og="" xmlns:fb="">

Step-4: Copy-paste the following code at the bottom of your functions.php file and upload it to the server. This code will get the first image from the post and display it.

function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];

  if(empty($first_img)){ //Defines a default image
    $first_img = "/images/default.jpg";
  return $first_img;


Step-5: Add following open graph protocol meta tags in the head section (<head>…</head>) of your header.php page:

<?php if (have_posts()):while(have_posts()):the_post(); endwhile; endif;?>  
<meta property="fb:admins" content="your_fb_admin_id" />  
$facebook_image= catch_that_image();  
<?php if (is_single()) { ?>  
<meta property="og:url" content="<?php the_permalink() ?>"/>  
<meta property="og:title" content="<?php single_post_title(''); ?>" />  
<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />  
<meta property="og:type" content="article" />  
<meta property="og:image" content="<?php if (function_exists('wp_get_attachment_thumb_url')) {echo wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); }?>" />  

<?php } else { ?>  
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />  
<meta property="og:description" content="<?php bloginfo('description'); ?>" />  
<meta property="og:type" content="website" />  
<meta property="og:image" content="<?php echo $facebook_image;?>" /> <?php } ?>

Replace ‘your_fb_admin_id’ with your Facebook Admin ID.

Note: og:type means type of the object. Since our object is a piece of content (article, blog post, video, photo etc) I have used ‘article’ as object type. You can see the complete list of supported object types here.

Step-6: Once you have added your special meta tags, you can now add the ‘Facebook like’ button code into the body section (<body>..</body>) of your web pages. You can get the ‘like’ button code from here.

You can either add the HTML 5 code or XFBML (Extensible facebook markup language) code to add ‘like’ button to your web page. Through ‘like’ button, facebook users can share your web page contents with other facebook users.

If a facebook user (who ‘liked’ you content) happens to be your friend and you are already logged into the facebook, then the like button will display the name and photo of that friend.

If you are logged out of facebook, then the ‘like’ button will look like this:

Step-7: Test your open graph meta tags here:

That’s it. You have successfully used the open graph protocol :)

Example of a Web Page Which Uses The Open Graph Protocol

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> 
<html xmlns="" xmlns:og="" xmlns:fb="">
<title>Himanshu's Open Graph Protocol</title>
<meta http-equiv="Content-Type" content="text/html;charset=WINDOWS-1252" />
<meta http-equiv="Content-Language" content="en-us" />
<link rel="stylesheet" type="text/css" href="event-education.css" />
<meta name="verify-v1" content="so4y/3aLT7/7bUUB9f6iVXN0tv8upRwaccek7JKB1gs=" >
<meta property="og:title" content="Himanshu's Open Graph Protocol"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content=""/>
<meta property="og:image" content=""/>
<meta property="fb:admins" content="himanshu160"/>
<meta property="og:site_name" content="Event Education"/>
<meta property="og:description" content="Event Education provides free courses on event planning and management to event professionals worldwide."/>



<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); = id;
js.src = "//";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Related Articles

Most Popular E-Books from OptimizeSmart

Learn to read e-commerce reports book banner

How to learn and master Web Analytics and Google Analytics?

Take the Course

Check out my best selling books on Web Analytics and Conversion Optimization on Amazon

How to get lot more useful information?

I share lot more useful information on Web Analytics and Google Analytics on LinkedIn then I can via any other medium. So there is really an incentive for you, to follow me there.

Himanshu Sharma

Certified web analyst and founder of

My name is Himanshu Sharma and I help businesses find and fix their Google Analytics and conversion issues. If you have any questions or comments please contact me.

  • Over twelve years' experience in SEO, PPC and web analytics
  • Google Analytics certified
  • Google AdWords certified
  • Nominated for Digital Analytics Association Award for Excellence
  • Bachelors degree in Internet Science
  • Founder of and

I am also the author of four books:

error: Alert: Content is protected !!