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:localeShould probably actually reflect the blog’s locale instead of just being a hardcoded string. Unfortunately, Blogger only gives usen-uswith 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:typefromwebsitetoprofileand adding your personal information -
og:imageIs only supplied if Blogger finds an image in the current post. However, not supplyingog:imageis invalid. You could provide an alternate image of your blog logo, or a Gravatar.
13
Kudos
13
Kudos