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'/>
    </b:if>
<b:else/>
    <meta expr:content='data:blog.title' property='og:title'/>
    <meta content='website' property='og:type'/>
</b:if>
 
<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:

 
13
Kudos
 
13
Kudos

Now read this

Leaving Blogger

It has finally come to this. After more than eight years, I have decided to dump Blogger and migrate PatHawks.com somewhere else. In some ways, this has been a long time coming. I haven’t considered Blogger to be the best blogging... Continue →