Adding Open Graph Meta Tags to Blogger Blogs
The Open Graph protocol is used on web sites to enable developers in integrating the pages into the social graph. One of the most famous social sites that uses this technology is Facebook.

Why Attach to Blogs?

Since blogs are form of websites too and social networking has a major part on SEO and earning traffic, it is a must to place such technology in your templates and themes.

The Code


NOTE that this is for blogspot users ONLY. I believe that Wordpress has plugins that can automate such insertion of codes to your themes and/or pages.

Copy the code below to inside your head tags, preferably BEFORE the <b:skin> tag. Make sure also to back-up first your template before editing your existing template.

<!-- title & tpye -->
 <b:if cond='data:blog.pageType == "index"'>
  <meta content='blog' property='og:type'/>
  <meta expr:content='data:blog.pageTitle' property='og:title'/>
 <b:else/>
  <meta content='article' property='og:type'/>
  <meta expr:content='data:blog.pageName' property='og:title'/>
 </b:if>
 
 <!--ogmetatags-->
 <meta content='en_US' property='og:locale'/>
 <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
 <meta expr:content='data:blog.pageTitle' property='og:site_name'/>
 
 
 <b:if cond='data:blog.metaDescription != ""'>
  <meta expr:content='data:blog.metaDescription' property='og:description'/>
 <b:else/>
  <meta content='[INSERT A DESCRIPTION HERE]' property='og:description'/>
 <b:if>

 <!--IMAGES-->
 <b:if cond='data:blog.postImageThumbnailUrl'>
  <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
 <b:else/>
  <meta content='[INSERT A DEFAULT IMAGE HERE]' property='og:image'/>
 </b:if>

Replace the following in your copied code:
  • [INSERT A DESCRIPTION HERE] - Replace this with a better description of your blog
  • [INSERT A DEFAULT IMAGE HERE] - Replace this with a default image/thumbnail to render when there is no available image for your blog. I usually use my logo here as a replacement.

3 comments :

  1. Hello, Aj! :D


    This is just an out of topic comment since you don't have any chatbox where I could just leave my message.


    I just noticed....


    You've got a new theme :D

    ReplyDelete
  2. hey aya! long time no see/talk!

    well, I'm not actually a fan of chat box on blogs, but thanks for passing by ^_^

    ReplyDelete
  3. Vazgen Ghazaryan7/16/13, 5:30 AM

    hey there! I have a problem with facebook image fetching, that is for any of my posts it first choses the header image of the blog as a thumbnail. It is quite annoying as every time, while posting, I have to chose from available fetched images the correct one. How can i either disable the header image completely from showing up, or maybe something isn't correct with my code, as the debugger always says that Provided og:image is not big enough. Note that I am not quite professional in programming. By the way, if there is a manual on learning such things, could you please provide one?

    Here is what I use:

    "





    "

    ReplyDelete