How to Personalize Your Pages using Open Graph Protocol

The Open Graph protocol enables developers to integrate their web pages in social graph. It is created by Facebook for publishers to fetch structured information into your pages and then it can represent more information about the object itself. Further, it conveys more specific details to search engines about your web pages too. Do I sound like Mr. Technical?

Simply, Facebook Open Graph allows you to define relevant details about your blog / website and its pages. It's about personalizing your web pages to deliver rich set of information to those who interested. Even such information can be very useful if you are gonna implement Facebook social plugins too. Would you like to know more?

Search Engines and Facebook Plugins

For example, human readers or visitors can decide either your site is a blog or static website. But when it comes to search engines and such tools crawling your web pages, they might need specific infromation to decide if yours is a blog or website. Now Open Graph tags come in handy to specify that if you would like to. Further, you can specify a custom title, description, image and so on, for your web pages too. Got the picture? I believe it makes sense as you proceed to the steps below too.

Again, Facebook itself make use of it. Facebook social plugins use the Open Graph tags implemented on your blog / website to personalize the experience for you and your visitors. For example, if you have Facebook comment plugin installed on your site, the moderation settings won't be available if you can't convince the plugin that you are the moderator of your site. Hence you can use an Open Graph tag to convey that you are the admin / one of the admins of your site eligible for moderating comments being left. Once Facebook comment plughin could identify you as the an admin, it will show moderation options for you but none others whose not specified via meta tag.

Keep in Mind

However, your blog or website should be open for public to make use of the Open Graph tags though. Unless, Facebook or search engines won't be able to crawl your pages to fetch the additional information you defined using the meta tags.

Did you come to know that Open Graph tags come in handy for you? You can proceed to steps below and learn how to make use of the basic tags for your blog or website.

Before You Go:

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


Steps:

1. Search for following tag in your page's source code.

</head>

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 if required.

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, 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.

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

Notes:

* 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.

* If you don't have a Facebook username, you can 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, you can't edit pages individually. Therefore, just add this code snippet to your template.

<b:if cond='data:blog.pageType == "index"'>
<meta expr:content="data:blog.title"  name="og:title" />
<b:else/>
<meta expr:content="data:blog.pageName" name="og:title" />
</b:if>

   - 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 edit pages individually. Therefore, just add this code snippet to your template.

<meta expr:content="data:blog.metaDescription" name="og:description" />

   - 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.

   - 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 show up.

<b:if cond='data:blog.pageType == "index"'>
<meta content='Image URL' property='og:image'/>
<b:else/>
<meta expr:content='data:blog.postImageUrl' 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.

* If you would love to learn more about Open Graph protocol, visit The Open Graph protocol website.


Enjoy :-)