How To Add Open Graph Meta Tags To Blogger

In April, I coded a simple WordPress plugin which allows you to add Open Graph meta tags to your WordPress site. I thought I should also share a way to add Open Graph meta tags to Blogger blogs. Of course, we can’t install a plugin to Blogger but there are other ways too.

Open Graph enables developers to integrate their pages into the social graph. Here’s a simple way to add proper Open Graph meta tags to Blogger blogs.

Navigate to Blogger > Template > Edit HTML

Once you’ve opened up your template, find the </head> tag in your template’s markup. Just paste following tags right above </head> tag:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta content='blog' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='Logo URL' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<meta content='App-ID' property='fb:app_id'/>
<meta content='Facebook-profile-ID' property='fb:admins'/>

In above code, replace Logo URL in the 13th line with the URL of your blog’s logo. Also don’t forget to provide your application ID and profile ID in the 18th and 19th lines.

You can also remove the last two lines from the code if you don’t want to provide required information.