Add open graph protocols meta tags to blogger/website for good performance on social sites

Many time we see that when we share a blog/website post url to facebook or other social site. The same title and description of that post doesn’t show. Its an error and these types of problem can be resolved by using open graph protocol meta tags.

What is open graph protocol meta  tags :

This tag combines all unstructured data into a structural format in social sites  it is very useful for SEO and SMO point of view. Some times you see that when you have added a widget in your blogger blog and some one likes your post he wants to share it but an error shows that sorry the page could not be reached. Generally wordpress gives plugins to overcome this error but in Blogger and website we need to add some meta  tags so that your page can be well  integrated on the graph of social sites like facebook, twitter, Linkedin, Google+.

Also read : How to show related posts below every Blogger post 

Benefits of adding meta tags:
  • Important meta tags for smo
  • It will select the most appropriate data to share
  • It will share exact blogger post title on social sites like facebook, google+ and twitter.
  • Fixed facebook errors for showing wrong blog address title, tag and description.
How to add in Blogger:
  • Choose your blog and click on template
  • Click on edit html
  • Find the code  like <html…..
  • Now paste the followining code just after <html

<b:if cond=’data:blog.pageType == &quot;index&quot;’>
<meta expr:content=’data:blog.pageTitle’ property=’og:title’/>
<meta content=’blog’ property=’og:type’/>
<meta expr:content=’data:blog.pageName’ property=’og:title’/>
<meta content=’article’ property=’og:type’/>
<meta expr:content=’data:blog.canonicalUrl’ property=’og:url’/>
<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’/>
<meta content=’http://www.your-blog-logo.jpg’ property=’og:image’/>
<b:if cond=’data:blog.metaDescription != &quot;&quot;’>
<meta expr:content=’data:blog.metaDescription’ name=’og:description’/>
<meta content=’APPS-ID’ property=’fb:app_id’/>
<meta content=’FACEBOOK-PRIFILE-ID’ property=’fb:admins’/>
Click on save..All done..!!!!!!!!!!!!!!!!
If you own a website and wanna add this tag. Then simply add the below tag in between <head> and </head>

<meta property=”og:title” content=”YOUR-WEB-PAGE-TITLE” />
<meta property=”og:type” content=”article” />
<meta property=”og:url” content=”YOUR-WEB-PAGE-URL” />
<meta property=”og:image” content=”YOUR-WEB-PAGE-IMAGE-URL” />
<meta property=”og:site_name” content=”YOUR-SITE-NAME” />
<meta property=”og:description” content=”YOUR-WEB-PAGE-DESCRIPTION” />

Now save it..All done…


  1. says

    Open Graph Protocols are very important to optimize our web pages for social sharing. It help us to show exact meta description, title and post thumbnail that attract more visitors.
    Great post Sanjay Bro 🙂

  2. says

    Yes Ankit broo… I remember I was facing the same pblm and then u recommended me to add these my blog urls are trating well in social sites…!

  3. says

    Quick simple and helpful post Sanjay, thanks for sharing 😉

    Grab some nice search engines juice by optimizing images; it makes a huge difference. Google loves relevancy.


  4. says

    Nice information Sanjay 🙂

    Its good to read the clear guide. Yeah, meta tags are very important.

    No need to alter the code? will include it into my blog.

    Keep the good work 🙂

  5. says

    Thank you Nirmala for your valuable appreciation…yeah These meta tags r very important for performing the site on social networks….Thnx for ur comment…stay in touch!!!!!

  6. says

    a valuable tutorial you have. however, i am using wordpress but this post can be useful in my future blogs if i will use a blogger platform. i will also check your site for wp tutorials.

Leave a Reply

Your email address will not be published. Required fields are marked *