How to use Open Graph Protocol

 

What is Open Graph Protocol and why 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=””/>

 

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:

 

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.

 

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

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: http://developers.facebook.com/tools/debug

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

 

Example of a web page which uses the open graph protocol

 

Other Posts you may like

 

About the Author:



My business thrives on referrals, so I really appreciate recommendations to people who would benefit from my help. Please feel free to endorse/forward my LinkedIn Profile to your clients, colleagues, friends and others you feel would benefit from SEO, PPC or Web Analytics.

 

 

  • http://Website jitender

    ecellent post. Its midnight here and just when i was about to switch off my net, i got this new post notification. i will work on it tomorrow. take rest buddy. you write a lot these days ;)

    • seo himanshu

      sorry for disturbing your sleep :) I hope you like your new job.

  • http://Website steven

    heard a lot about this and the ‘like’ button but never knew it is a protocol and its implementation is not that easy.

  • http://Website max

    great summary of OGP. thanks

  • http://Website eric

    nice post. you should add a real like button to your post to make it more effective :)

  • http://Website Andryo Petersen

    good points there. but do we really need a ‘like’ button. addthis.com button can share contents with facebook.

  • http://Website Simon

    Very nice write up on OGP. I would like to share a document which can be a great addition to this post:

    http://www.scribd.com/doc/30715288/The-Open-Graph-Protocol-Design-Decisions

    • seo himanshu

      Thanks Simon :)

  • http://killer-poetry-collection.blogspot.com/ sahil khan

    Thanks for sharing this. i’ve a little concern bro, My FB fans requests me that they don’t want to have page name on their wall when sharing/liking the url on my site, so i want to remove my site name, when someone like a post,it shows like this in their wall
    Seotakeways : A random post
    I Want it just to show ….
    A random post

    For this Which tag should i remove ?

    plz help.

    • http://www.seotakeaways.com/ Himanshu

      Remove the meta tag: meta property=”og:site_name” content=”Enter the name of your website here“

  • Vijay

    Hi Himanshu,

    While searching for “OGP” on Google landed over on this post. You have explained the OGP concept very well. As an SEO I would like to know whether the Concept of OGP is helpful for SEO or Not..? If yes how it could be helpful from SEO point of view.

    I hope you will guide me regadrding the same.

    Thnaks!
    Vijay

    • http://www.seotakeaways.com/ Himanshu

      Hi Vijay! OGP is not directly going to help you in your SEO. But indirectly via social media it can help you in your rankings as social signals are now a ranking factor.

  • Shamseer

    Hi himanshu, thanks for this nice post.I have already included facebook recommend (instead like button) and send button on each pages, but it doesn’t have any OGP meta tags. Should I include OGP tags in my website anyway? Is it will improve search engine visibility?

    • http://www.seotakeaways.com/ Himanshu

      OGP wont improve your search engine visibility. OGP tags are used to turn your web page into a graph object.

  • http://www.clinicme.com John Methew

    i wanna know what the benefits of use this protocol, will it increase page impression?

    • http://www.seotakeaways.com/ Himanshu

      Through this protocol your web page can get the functionality of a facebook page. When a person likes your page, your page will appear in the person’s facebook timeline and all the people who are his friend will see your page. In this way one person can introduce your brand to multiple people.

  • Dan Richardson

    Himanshu, is Step 1 really necessary?

    I haven’t seen that mentioned in the FB docs before. (notice your site doesn’t have that – i think…)

    thx

    • http://www.seotakeaways.com/ Himanshu

      Hi Dan. The first step is just a good practice to make sure that a web browser interpret the open graph code correctly. More or less it is like the Doctype declaration. At present open graph protocol is not implemented on my website.

  • http://www.socialcrunching.in Social Crunching

    For the HTML tag in step 1 that you provided, how to do it if you already have the tag working on the site. For a site already up and running one would already have the HTML tag at the start of the page, right ?

    • http://www.seotakeaways.com/ Himanshu

      The HTML tag may be present but not the attributes like xmlns=”http://www.w3.org/1999/xhtml”. You need to add these attributes.

  • http://www.azza-cs.co.uk Abdul

    nice post’s….i got good information about Open Graph protocol…..!!!

  • http://www.ewebplace.com/ Online shopping stores

    Very useful post I really appreciate it…keep up the good
    work. Thanks!

  • Gaurav

    “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.”
    I don’t agree to this because even if the website is not mine and has a facebook like button embed on it, it shows the name of my friend if s/he has liked that website’s facebook page!!!

  • Hriza muh

    how if i want to apply it on blogspot?

    • seohimanshu

      this post is only for the wordpress CMS

  • jack

    A VERY informative blog, and for entrepreneurs like myself, a great place to pick up ideas that will help facilitate my own.

    • seotakeaways

      Thank you.

  • ben read

    I found this blog post to be very useful – many thanks!

    • seotakeaways

      Thank you

  • Hatoon Aldarrab

    Can I customize a dislike button ?

  • Matt Kohn

    sorry but this DID NOT work… ugh

  • Paul Rod

    Himanshu Sharma,
    Congratulations for your tutorial, you really have that rare “touch” on explaining things in a very simple way, easy to understand. Trying to implement OG Protocol I came to a doubt: When you say on step 1: “Create a Facebook PAGE…” do you really mean a PAGE or a PROFILE? I ask this because, according to FB, I own a personal PROFILE (facebook.com/PauloMarcosRodrigues) and several PAGES which were created under this profile, for professional purposes. But I could not find a way to claim my domain http://www.guiadasimobiliarias.com.br for the correspondent FB PAGE, as FB insists I already possess a domain in my personal profile and can only change it once. Please tell me if there is a way to associate diferent sites to different FB pages, if all these pages were created by myself. Thanks in advance for your attention !

  • serin

    can i use <meta property="og: tag on html website

  • serin

    can i use