How to Personalize Your Pages using Open Graph Protocol

The Open Graph protocol enable developers to integrate their web pages in social graph. It is created by Facebook and let you add structured information about your pages to represent it as an entity on the web. Also it acts as a source for modern search engines to dig more information about your web pages too. If you mind adding Facebook social plugins, then these meta tags supports your plugins in fetching information to use them in snippets. Would you like to personalize your pages and customize the way Facebook social plugins share information of your pages?

In addition to customizing information used by Facebook social plugins, it allows you to administer Facebook plugins implemented on your site. For example, if you have Facebook comment plugin implemented on your site, the comment moderation will be allowed only for admins. The Open Graph tags let you define the administrator of your site. If you list yourself as an Admin using admins open graph meta tag, whenever you signed into your Facebook account, the comment box allows you to moderate comments on your pages.

Note: If you restricted your site from public, the Open Graph tags might not be crawlable. So you will find no changes in snippets, no comment moderation available or missing information when sharing, though you have specified information using Open Graph meta tags.


Before You Go:

To implement Open Graph meta tags, you need an Application ID to use with. Read How to Create a Facebook Application for Your Site.


Steps:

1. Search for </head> in your page template.

2. Now add following Open Graph meta tags right before </head> tag, after filling your required information. You should add these tags for each of your website pages.

Note: You should add Required meta tags. Optional meta tags can be added as your preference. For more extra tags visit The Open Graph protocol site.

Required

<meta content='Your Page Type' property='og:type'/>

<meta content='Your Facebook User ID' property='fb:admins'/>

<meta content='Your Blog Name' property='og:site_name'/>

<meta content='Your Application ID' property='fb:app_id'/>


Optional

<meta content='Page/Post Title' property='og:title'/>

<meta content='Page Description' property='og:description'/>

<meta content='URL of Page/Post' property='og:url'/>

<meta content='Image URL' property='og:image'/>

Color Indication Information

   - Your Page Type

Specify the type of your page here. It depends on the content or type your page. You can find available types here - Open Graph Object Types.

Generally to represent an entire blog or website, you should add below relevant tag to your homepage.

Blog

<meta content='blog' property='og:type'/>

Website

<meta content='website' property='og:type'/>

Now you homepage is done. If you have transient content on other pages (article, blog posts, audio, video), you should specify below tag for each page.

<meta content='article' property='og:type'/>

Note: If you are a Blogger user, as you can't edit pages individually. Therefore, just add this code snippet to your template.

<b:if cond='data:blog.pageType == "index"'>
<meta content='blog' property='og:type'/>
<b:else/>
<meta content='article' property='og:type'/>
</b:if>


   - Your Facebook User ID

Add your Facebook User ID here. This will add Facebook admin privileges for your site.

Note: If you don't know your user id, you can find your Facebook User ID by appending your Facebook username to below URL. If you don't know your Facebook username, you can find your username from http://www.facebook.com/username.

http://graph.facebook.com/[Your Facebook Username]

i.e: http://graph.facebook.com/24Solutionbd

If you don't have a Facebook username, claim one. Read How to Claim a Username in Facebook.

   - Your Website or Blog Title

Specify your website or blog title here.

   - Your Application ID

Application ID of your Facebook application created for your site. You can find your Facebook Application ID aka API key on Facebook Applications page correspond to your application.

   - Page Title

Specify your page title here. It is considered as optional because Facebook will crawl for your page title automatically via title meta tag specified on your page. If you can edit your pages individually and would like to specify this tag, you can add this one.

Note: If you are a Blogger user, don't specify this tag in your blog.


   - Page Description

This is your page description aka snippet of your page. It can use to describe your page and content briefly. However if you have description meta tag implemented in your page, Facebook will use it too. So this meta tag is not compulsory. But if you prefer, you can specify it for each of your pages.

Note: If you are a Blogger user, you can't specify description for each page. Therefore you can't make use of this tag. But if you prefer you can specify it only for your homepage to display description of your blog.

<b:if cond='data:blog.pageType == "index"'>
<meta content='Blog Description' property='og:description'/>
</b:if>


   - URL of Page/Post

Specify the URL of Page here. However it's not compulsory 'cause Facebook will detect your current page URL automatically.

Note: If you are a Blogger user, you don't need to specify this tag in your blog.

   - Post Image URL


Specify an URL of image to represent your page here. It will mostly the main image of your page. So when users share your page on their Facebook profile, this image will be added with the post. If you didn't specify this tag, plugin will automatically extract an image from current page.

Note: If you are a Blogger user, you don't need to specify this tag as Facebook will use your post image whenever share your post on Facebook. But usually your homepage could have mix of images. Therefore, if you prefer you can specify your site logo only for homepage, so whenever someone share your blog, it will appear with it.

<b:if cond='data:blog.pageType == "index"'>
<meta content='Image URL' property='og:image'/>
</b:if>


More Information:

* After adding Open Graph meta tags, you can use Facebook Debugger to see how Facebook treat your pages when Facebook crawl your pages.