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 == "item"'>
<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='"en_US"' 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:
-
og:locale
Should probably actually reflect the blog’s locale instead of just being a hardcoded string. Unfortunately, Blogger only gives usen-us
with a hyphen, instead of an underscore, so that won’t work. - If you’re using your blog as a personal profile, you may consider changing the second
og:type
fromwebsite
toprofile
and adding your personal information -
og:image
Is only supplied if Blogger finds an image in the current post. However, not supplyingog:image
is invalid. You could provide an alternate image of your blog logo, or a Gravatar.