Open Graph data in Blogger

Adding Open Graph metadata to a website can be a pain, and will almost certainly break your validation unless you’re using an RDFa Doctype…

Who am I kidding? Nobody ever uses RDFa Doctypes.

Fortunately for Blogger users, Blogger blogs never validate anyway, so adding Open Graph metadata is easy.

Simply copy the code below and paste it into your template after the <head> tag.

<!-- Begin Open Graph metadata -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta content='article' property='og:type'/>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <meta expr:content='data:blog.pageName' property='og:title'/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
        <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
    <meta expr:content='data:blog.title' property='og:title'/>
    <meta content='website' property='og:type'/>
<meta expr:content='&quot;en_US&quot;' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<!-- End Open Graph metadata -->

I’ve added this code to a Gist, so feel free to fork it and modify it as you see fit. If you do something really cool, I’d love to hear about it.

A couple notes:


Now read this

Jekyll Meta Includes

The Problem In Jekyll, I have a lot of code that will include a <meta> tag if a certian property is set. The code for this looks terrible, and is terribly repetative. {% if site.title %} <meta property="og:site_name" content="{{... Continue →