Home
How To

How to Use Open Graph Protocol Meta Tags in BlogSpot Blog?

How to Use Open Graph Protocol Meta Tags in BlogSpot Blog? How to Use Open Graph Protocol Meta Tags in Blog? What is Open Graph Protocol and why you need it?
open graph

In custom Blogger templates we are using Open Graph Protocol but this is not well known to everybody. Open Graph Protocol is a set of rule which helps to integrate any web page into the social graph. Though we want to rock our blog or website around the web but we don’t follow all the rules and regulation for rocking. There are very small SEO related issue which we may ignore but can make great impact on search engine.

Today the biggest medium of Blog promotion is Social media. So we must consider the social media as a gateway for reaching towards broadest audience. But we must make our Blog or website compatible with Open Graph Protocol.

What exactly Open Graph Protocol?

I have already mentioned that Open Graph Protocol is a set of rules. But the main benefit of Open Graph Protocol is that, this will enable your website or blog page to become a rich object in a social graph.

For example, almost all website and Blog has Facebook fan page and a Facebook can be your social graph or social circle. Once your Blog or web page is integrated with Open Graph Protocol then it behaves like the object of the social graph (facebook). Because after enabling Open Graph Protocol your site will get same functionality as a facebook page.


How Open Graph Protocol works?

As example let’s talk about Facebook, through open graph protocol you can inform Facebook how your shared your Blog or website contents and how it should be displayed on Facebook. More clearly it can be said, Open Graph Protocol tells facebook which title, URL, image and description of your blog post/page should be used when your Blog or Website content is shared on facebook.
share post on Facebook

But to do this you must add some Open Graph Protocol Meta tags. This Meta tags almost similar site SEO Meta tags. Have a look on example-
<meta property=”og:title” content=” “/>
<meta property=”og:type” content=””/>
<meta property=”og:url” content=””/>
<meta property=”og:image” content=””/>
<meta property=”fb:admins” content=””/>
<meta property=”og:site_name” content=””/>
<meta property=”og:description” content=””/>

Open Graph Protocol Meta Tags will turn your web page into a graph object; you need to use open graph protocol Meta tags.

How to Use Open Graph Protocol Meta Tags in Blog?

I have prepared a sample Open Graph Protocol Meta tags for Blogger which you can directly use by simple changes. And this Open Graph Protocol Meta tags I am using in my Blogger Spice. Let’s have a look and go through integration system.

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML-> Proceed

Step 3 Locate the]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac) 

Step 4 Paste the below code Before/above ]]></b:skin>

<!-- BEGIN Open Graph tags -->
<meta expr:content='data:blog.metaDescription' name='description' property='og:description'/>
<meta content='Facebook APP ID' property='fb:app_id'/>
<meta content='Facebook Admin ID' property='fb:admins'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<meta content='About US Page URL' property='article:author'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content=' Your Blog Favicon URL' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalHomepageUrl' property='og:url'/>
<meta content='blog' property='og:type'/>
<meta content='Your Blog Favicon URL' property='og:image'/>
</b:if>
<meta content='Your Country Name' name='geo.placename'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<!-- END Open Graph tags -->


Customization

The above script will able to display your Blog title, Description, URL, Image, Site Name. But you have to do little change on several Meta tags.

 Recommended: How To Find Your Facebook ID or Facebook Admin ID Easily?

  • Locate Facebook APP ID and Facebook Admin ID, after that replace xxxxxxxxxxxxxxxx with your Facebook application ID and admin page id.
  • Replace About US Page URL with your about us page URL.
  • Find out Your Blog Favicon URL and replace it with the Blog/website favicon.
  • Again find Your Country Name and replace it with your county name.
Step 5 Now click Save template button.

Now your Blog will act as open graph protocol which will tell Facebook that how to share your Blog or website contents.

Web technologies are getting complicated day by day so we have to change all the older SEO rules and set new thing to make our site compatible for search engine and social media. There are many different technologies and schemas exist and we could combine together.   The Open Graph protocol builds on these existing technologies and gives developers one thing to implement. But remember that Developers main goal is simplicity of the Open Graph protocol which has informed many of the technical design decisions. So we can say, open graph protocol has made our Blogging experience simple.

7 comments

  1. Mohammad,
    These tutorial tags will have the same effect of another tutorial?
    (http://www.addthis.com/academy/how-to-add-open-graph-tags-using-blogger)
    • Yes Bruno You are right. The main script for Open Graph Protocol is below-

      <!-- Open Graph Meta Tags BEGIN -->
      <meta expr:content='data:blog.pageName' property='og:title'/>
      <b:if cond='data:blog.postImageThumbnailUrl'>
      <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
      </b:if>
      <meta expr:content='data:blog.title' property='og:title'/>
      <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
      <b:if cond='data:blog.metaDescription'>
      <meta expr:content='data:blog.metaDescription' property='og:description'/>
      </b:if>
      <!-- Open Graph Meta Tags END -->


      But I have added extra information for Blogger such as-

      Favicon Image (If Blog post image missing then favicon image will display)
      GEO place name (For tracking and defining your geo location)
      Canonical URL (for detecting preferred URL)

      I have tried to add extra information for all social media site. Hope you would understand. ;)

  2. It is quite an interesting share. Keep posting such details here. Anyways, I am also the new entrepreneur and would like to use the digital marketing to reach the potential customers. It will be great if anyone here could recommend cost effective seo consultant Los Angeles service!
    • Thanks for your lovely feedback. :up
  3. This comment has been removed by the author.
    • Hi Junne Games :ey
      This is not possible, Because the above script will grab the title form your Blog feed. So this will display the title exactly like your blog feed.

      However you can use your Blog title manually in short form but it won't be a good idea to use title manually.
  4. Hello,

    What do you mean by "About US Page URL"? is it the about url of the blog? ie. www.myblog.com/p/about.html

    How can I show only 1 image for all urls? My blog is about exercises and most of the posts don't have an image...

    I can't find my facebook app id, is it necessary to enter it?

    Thank you
Go Up