Friday, September 18, 2015

Dynamic Social OGP tags for Blogger (Blogspot)

A couple of months ago I wrote a post about Social Networks and how they can leverage your career. Having that in mind, keeping your blog/site "Social Network friendly" is important. This blog is actually hosted by Google with Blogger (former Blogspot). Here's a simple code to have dynamic Open Graph Protocol (OGP) tags based on Posts:


<!--START CUSTOM CODE-->
<meta property='og:url' expr:content='data:blog.canonicalUrl'/>
<meta property='og:title' expr:content='data:blog.pageTitle'/>
<meta property='og:site_name' expr:content='data:blog.title'/>

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<meta property='og:image' expr:content='data:blog.postImageUrl'/>
<meta property='og:type' content='article'/>

<b:else/>
<title><data:blog.pageTitle/> - ## PUT ADDITIONAL TITLE HERE ##</title>
<meta property='og:image' content='## PUT YOUR IMAGE URL HERE ##'/>
<meta property='og:type' content='blog'/>
</b:if>

<b:if cond='data:blog.metaDescription'>
<meta property='og:description' expr:content='data:blog.metaDescription'/>
</b:if>
<!--END CUSTOM CODE-->


To use this, go to "Edit HTML" button:

Open Graph Protocol Blogger


And replace the "title" tag (highlighted below) with all the above content.

Open Graph Protocol Blogger


Make sure you replace the ##Something## by your custom content. If you want a full explanation you can read this brilliant and simple explanation in Matthew Wilson's blog. And here's Facebook Object debugger.