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.