Like 431MEDIA on Facebook Like us on Facebook! Follow us on Twitter! Subscribe to our RSS Feed!

Open Graph Protocol: The Basics

July 7th, 2012 by

What Is Open Graph Protocol?

Open Graph Protocol allows you to integrate your website into what Facebook calls “The Social Graph”. Essentially, using OGP META tags on your website allows your website to function like a page on Facebook. By this I mean when a user clicks “Like” on your page, your website will be listed under their “Likes and Interests”. You will be able to target specific Facebook users based on these likes. You can also target friends of people who “Like” your website to gain even more awareness for your product, brand, or business.

 

As with many things on Facebook, Open Graph Protocol is a little hard to comprehend or place value on at first. Once you begin using Open Graph Protocol you will begin to see the value in it. One such value, in my opinion, is the og:image META tag. This tag allows you to specify a default image that will show on a users status any time they like a page on your website (see image below).

Open Graph Protocol For 431MEDIA

 

Implementing Open Graph Protocol

Implementing Open Graph Protocol is a pretty straight-forward process, and requires very little on your part. There is a short list of quasi-required META tags that Facebook recommends you specify in your websites header. The header is the area of your website located between the and tags of your HTML code. Below is a sample header section that includes Open Graph META tags.

 


  
    431MEDIA | Small Business Website Design
    
    
    
    
    
    
    
    ...
  
  ...

 

Required Tags

Facebook requires that four specific META tags be included in your website header. These are:

og:title – The title of the object on the page (ie; the name of your website)

og:type – The type of object on the page (ie; website, product, etc.) – Click here for full list of supported types

og:image – A direct link to the image you want to represent your object (ie; logo, or picture of product)

og:url – The URL of the object you are listing. For the 431MEDIA homepage it would be http://431media.com

 

Other Important Tags

Another important Open Graph tag is the og:fbadmins tag. To find your USER_ID, simply click on your name (top right) while on the Facebook website. Look at the end of the URL for that page and you should see a set of numbers at the end of the URL. That is your USER_ID. Simply replace USER_ID in the above code with that number and you’re all set. I say the fbadmins tag is important because it is what allows your website to function like a fan page on Facebook. Without it you are unable to interact with Facebook users directly from your website.

 

Integrating Open Graph Protocol With WordPress

If you are using WordPress, there are Plug-Ins available to automate this process. One such Plug-In is WP Facebook Open Graph protocol.

 

In my next blog post, I will show you how to add a set of social media “share” buttons to your website and posts.