Open Graph Protocol for Facebook Explained with Examples

What is Open Graph Protocol?

Open Graph protocol is a protocol (i.e. a set of rules) that 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 the same functionality as a Facebook page.

Through the Open Graph protocol, you can tell Facebook how your shared content 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.

Why Do You Need Open Graph Protocol for Facebook?

Open Graph Protocol promotes the integration between Facebook and the website by allowing you to create rich medial social graph objects.

Most social networks try to create a preview of your content to show you how it will be displayed on the website. Now imagine a scenario where you do not have Open Graph Protocol available on the website; it won’t provide much information about the page and if somebody shares the URL on the social networks then it won’t be appealing.

If you look at the below image, it shows how Facebook will display your content if shared without Open Graph Protocol.

As you can see the preview mode does not provide any image preview, article description, or content title. If you share such a URL on Facebook, you are not going to get much traffic since it does not provide any information or feel appealing.

If you use the Open Graph protocol, the same URL will look like below:

You can see from the above image that:

  • Point 1 shows the image used for the article.
  • Point 2 shows the title of the article
  • Point 3 shows the description of the article and its content.

With the Open Graph Protocol, it is very easy for a user to understand what this post is about and there is a high chance that they will interact with the post.

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:

<meta property=”og:title” content=” “/>
This represents the title of the object and how it will appear in the graph.

<meta property=”og:type” content=””/>
This represents the type of object, for example, a book, video, audio, or article.

<meta property=”og:url” content=””/>
This represents the canonical URL of the object that will be shown in the graph.

<meta property=”og:image” content=””/>
This represents an image URL that will represent your object in the graph.

<meta property=”fb:admins” content=””/>
This represents the users who are allowed to view insight about the graph.

<meta property=”og:site_name” content=””/>
This represents the part of the website like the main domain or subdomain. If you have a larger website this tag will represent the part of the website.

<meta property=”og:description” content=””/>
This represents the description of the objects in the graph.

Optional Meta Tags

The following meta tags are optional for the objects that you can use:

<meta property=”og:audio” content=” “/>
This represents the URL to an audio file in the graph.

<meta property=”og:video” content=” “/>
This represents the URL to a video file in the graph.

<meta property=”og:locale” content=” “/>
This represents the “language_TERRITORY” in the graph. You can use this to specify the local language of the object. Default is set to “en_US”.

<meta property=”og:locale:alternate” content=” “/>
This represents an array of available “language_TERRITORY” in the graph.

<meta property=”og:determiner” content=” “/>
This represents the word that will appear before the title of the object in the graph. Examples are: “a”, “an”, “the” and “auto”.

Structured Properties in Meta Tags

Some of the properties in Open Graph can have extra metadata attached to them. These extra properties can also be specified in the same manner as we do for general properties.

For Example: “og:image” property can have the following extra properties:

  • og:image:url – This property is identical to og:image.
  • og:image:secure_url – This represents an alternate url to use if the webpage is secure and requires HTTPS.
  • og:image:type – This represents as media type for image like (jpeg, gif, png, etc).
  • og:image:width – This represents the width of image in number of pixels.
  • og:image:height – This represents the height of image in number of pixels.

Similarly, “og:video” property can have following extra properties:

  • <meta property=”og:video:secure_url” content=” ” /> – This represents an alternate URL to use if the video is secure and requires HTTPS.
  • <meta property=”og:video:type” content=” ” /> – This represents as media type for video like (mkv, 3gp, etc).
  • <meta property=”og:video:width” content=” ” /> – This represents the width of video in number of pixels.
  • <meta property=”og:video:height” content=” ” /> – This represents the height of video in number of pixels.

For the property “og:audio” there are only two extra properties, as below:

  • <meta property=”og:audio:secure_url” content=” ” /> – This represents an alternate URL to use if the audio is secure and requires HTTPS
  • <meta property=”og:audio:type” content=” ” /> -This represents as media type for video like (mp3, mp4, etc)

Object Types in Meta Tags

You need to specify the object type before it is represented in the graph. This is done by using the “og:type” property and can have any of the following values.

song

  • music:duration – integer >=1 – The song’s duration in seconds.
  • music:album – music.album array – The album to which this song belongs.
  • music:album:disc – integer >=1 – Disc number of the song.
  • music:album:track – integer >=1 – track number of the song.
  • music:musician – profile array – The musician of the song.

movie

  • video:actor – profile array – Actors/actress in the movie.
  • video:actor:role – string – The role played by actors/actress.
  • video:director – profile array – Directors of the movie.
  • video:writer – profile array – Writers of the movie.
  • video:duration – integer >=1 – The video’s duration in seconds.
  • video:release_date – datetime – The date the video was released.
  • video:tag – string array – Tagged words associated with this video

article

  • article:published_time – datetime – When was the article first published.
  • article:modified_time – datetime – When was the article last modified.
  • article:author – profile array – Who are the writers of the article.
  • article:section – string – A high-level section (category) name. E.g. Analytics
  • article:tag – string array – Tagged words associated with this article.

book

  • book:author – profile array – author of the book.
  • book:release_date – datetime – The date on which the book was released.
  • book:tag – string array – Tagged words associated with this book.
  • profile
  • profile:first_name – string – First name of individual
  • profile:last_name – string -Last name of individual (usually a surname).
  • profile:username – string – A short unique string to identify users.
  • profile:gender – enum(male, female) – User’s gender.

Data Types in Meta Tags

The following data types are permitted in the meta tags:

  • Boolean: Represents True or False value
  • DateTime: Date and Time (year, month, and day). Hours and minutes values are optional
  • Enum: A string value that is a member of the enumeration (A, An, The)
  • Float: A 64-bit signed floating-point number (1.234, -1.234, 1.2e3,-1.2e3)
  • Integer: A 32-bit signed integer (123, -123)
  • String: A sequence of Unicode characters (Hello World)
  • URL: All valid URL (https:// or https://)

The Easiest Way to Implement Open Graph Protocol

If you are using WordPress, you can use the 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 the ‘Save Settings’ button.

Get the E-Book (52 Pages)

Get the E-Book (50 Pages)

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 a 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="https://www.w3.org/1999/xhtml" xmlns:og="https://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">

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 = '';
  ob_start();
  ob_end_clean();
  $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 the type of the object. Since our object is a piece of content (article, blog post, video, photo, etc) I have used ‘article’ as the 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 the ‘like’ button to your web page. Through the ‘like’ button, Facebook users can share your web page contents with other Facebook users.

If a Facebook user (who ‘liked’ your content) happens to be your friend and you are already logged into 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: https://developers.facebook.com/tools/debug

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

Example of a Web Page Which Uses Open Graph Protocol

Testing your Open Graph Facebook Tags

 Once you have successfully implemented the meta tags for the Open Graph Protocol, you can test it using Sharing Debugger. It will show you how your markup appears to the Facebook crawler and how it will display the object.

Follow the below steps to test your Open Graph object.

Step-1: Navigate to https://developers.facebook.com/tools/debug/.

Step-2: Now enter the URL of the page where your object is placed.

Step-3: Now click on ‘Debug’.

Step-4: You will get a screen like below which will show the following details:

  1. Warnings or missing meta tags.
  2. Time scrapped: When was the page crawled.
  3. Response code: 200 (successful).
  4. Fetched URL: Which URL was crawled.
  5. Canonical URL: A most representative form of URL.
  6. Link Preview: How the object will appear on Facebook.

 

Step-5: If you scroll down further you will find the available meta tags and their values that the crawler found on the webpage.

So, this is how you can test your Open Graph object. If any tags are missing you can add them and test them again.

Related Articles

Frequently Asked Questions about Open Graph Protocol for Facebook

What is Open Graph Protocol?

Open Graph protocol is a protocol (i.e. a set of rules) that 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 the same functionality as a Facebook page.

What does Open Graph protocol do?

Through the Open Graph protocol, you can tell Facebook how your shared content 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.

How do I implement Open Graph protocol?

If you are using WordPress, The easiest way to implement Open Graph Protocol is by using the WordPress for SEO Plugin by Yoast to add open graph protocol meta tags on your website.

If you don’t use WordPress, or you want to add Open Graph Protocol manually, then you can implement it by adding the relevant meta tags to your header code, as explained in my article.

Register for the FREE TRAINING...

"How to use Digital Analytics to generate floods of new Sales and Customers without spending years figuring everything out on your own."



Here’s what we’re going to cover in this training…

#1 Why digital analytics is the key to online business success.

​#2 The number 1 reason why most marketers are not able to scale their advertising and maximize sales.

#3 Why Google and Facebook ads don’t work for most businesses & how to make them work.

#4 ​Why you won’t get any competitive advantage in the marketplace just by knowing Google Analytics.

#5 The number 1 reason why conversion optimization is not working for your business.

#6 How to advertise on any marketing platform for FREE with an unlimited budget.

​#7 How to learn and master digital analytics and conversion optimization in record time.



   

My best selling books on Digital Analytics and Conversion Optimization

Maths and Stats for Web Analytics and Conversion Optimization
This expert guide will teach you how to leverage the knowledge of maths and statistics in order to accurately interpret data and take actions, which can quickly improve the bottom-line of your online business.

Master the Essentials of Email Marketing Analytics
This book focuses solely on the ‘analytics’ that power your email marketing optimization program and will help you dramatically reduce your cost per acquisition and increase marketing ROI by tracking the performance of the various KPIs and metrics used for email marketing.

Attribution Modelling in Google Analytics and Beyond
Attribution modelling is the process of determining the most effective marketing channels for investment. This book has been written to help you implement attribution modelling. It will teach you how to leverage the knowledge of attribution modelling in order to allocate marketing budget and understand buying behaviour.

Attribution Modelling in Google Ads and Facebook
This book has been written to help you implement attribution modelling in Google Ads (Google AdWords) and Facebook. It will teach you, how to leverage the knowledge of attribution modelling in order to understand the customer purchasing journey and determine the most effective marketing channels for investment.

About the Author

Himanshu Sharma

  • Founder, OptimizeSmart.com
  • Over 15 years of experience in digital analytics and marketing
  • Author of four best-selling books on digital analytics and conversion optimization
  • Nominated for Digital Analytics Association Awards for Excellence
  • Runs one of the most popular blogs in the world on digital analytics
  • Consultant to countless small and big businesses over the decade
error: Alert: Content is protected !!