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

Whatever happened to…

FaceTime Back when Apple launched Facetime in summer 2010, [Steve Jobs himself said on stage](www.youtube.com/watch?v=I1edQuxclUs&t=1h36m45s) “We’re going to take it all the way. We’re going the the standards bodies, starting... Continue →