Aug 28, 2013

How to Add Facebook Open Graph Metadata in Blogger


Facebook Open Graph Protocol allow you to add metadata to specify how your contents should appear on your Timeline. It correctly fetches the summery of your blog along with thumbnail of your post. It's dynamic meta tags allow you to specify the type of post, description of post, thumbnail, and URL of the post. The advantages includes, people gives you proper attribution whenever you publish an article and also at some level it will helps to increase your blog traffic.


 Facebook Open Graph Metadata

MUST READ: How to Add Twitter Cards to Blogger.
                     How to Add Facebook Fan Box in Blogger Easily
                     How to Install Google Analytics in Blogger
                     Increase Blog Traffic By Adding Custom Permalink in Blogger easily.
 
       Short terms Description includes:
  •  og:title - This attribute contains title of post.
  • og:type - This contains type of post such as article. You can also specify article or blog.
  • og:image - Facebook use it to display thumbnail of your post
  • og:description - This contains description of your post.
  • og:url - This contins url of your post.

How to Add Facebook Open Graph Metadata in Blogger ?


 Login to your account and click on Template and then Edit HTML and then search for the following code, which is located in the header.

Search for the following code, which is generally located inside the header field. 

<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>

Now next to it, paste the code given below
xmlns:og='http://ogp.me/ns#'
New code will look like this:

<html..... xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#' >

Now search for <head> and paste the code given below:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://www.your-blog-logo.jpg' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='App-ID' property='fb:app_id'/>
<meta content='Facebook-Profile-ID' property='fb:admins'/>

After implementing the above code save your template and see the changes. You can open page source using right click on your blog homepage or post page and click on "View page Source" and observe the changes. I hope that this code will boost your marketing and you are free to comment i am waiting for your feedback.

1 comment: