Friday, May 29, 2015

How to add Open Graph Meta Tags to Blogger

Open Graph meta tags from Facebook allow some control over how the snippet is generated by Facebook when the page is shared. This nice article explains how to generate these meta tags automatically from within blogger. In summary, follow two steps by editing the HTML template.


Step 1

Add the Open Graph's XML namespace in the HTML tag:
xmlns:og='http://ogp.me/ns#'
which will look something like that:
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>

Step 2

Add the following lines before the </head> tag:
<!-- 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 -->

No comments :

Post a Comment