Open Graph markup for Blogger [version 3]

It’s a topic I covered several times on the blog, starting over two years ago, when OpenGraph was just released. While the instructions in the first article are still valid, in the mean time Blogger introduced new options and variables to the templates; these can be used to fine-tune the OpenGraph tags on blogs and articles:

• For each blog post containing at least one image, Blogger automatically generates a 72x72px thumbnail that can be accessed in the template with the variable: data:blog.postImageThumbnailUrl;
• At some point, Blogger started redirecting blogs from the .com domain to country-specific domains – which can be a pain if you want to use social plugins on your blog. To solve some of the issues you need to use the canonical URL of the page/blog whenever possible – including for the OpenGraph meta-tags.
• About six months ago search preferences were launched; these work both on a blog level – you can set a general search description in the ‘Settings’ – as well as for individual articles, if you fill in the ‘Search Description’ field when composing a new post. The description is stored in the variable data:blog.metaDescription.

Below is the revised version of the coding for the OpenGraph tags currently live on the blog. It uses several checks to generate different tags depending on the type of page (article or index page), and whether the article has description or thumbnails.

<meta expr:content='data:blog.pageName' property='og:title'/>    
<meta expr:content='data:blog.title' property='og:site_name'/>     
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>     
<b:if cond='data:blog.metaDescription'>     
	 <meta expr:content='data:blog.metaDescription' property='og:description'/>     
</b:if>     
<b:if cond='data:blog.pageType == &quot;item&quot;'>     
	 <meta content='article' property='og:type'/>     
	 <b:if cond='data:blog.postImageThumbnailUrl'>     
		 <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>     
	 </b:if>     
<b:else/>     
	 <meta content='blog' property='og:type'/>     
	 <meta content='URL for image file, e.g. site logo' property='og:image'/>     
</b:if>

On a final note, I should add that using the OpenGraph markup is becoming increasingly important for websites and not only to insure that the proper information is shown on Facebook. Microsoft will use available OpenGraph data on a page to power the sharing feature in Internet Explorer 10:

Since IE10 uses existing markup meant for sharing on the Web, many sites will already look great when sharing HTML link previews on Windows 8. We support the Open Graph protocol as a simple way to add meta-data about the page. When users share sites on Facebook and through Windows 8 and IE10, you can use OpenGraph to control the way your Web page appears to others. Alex Feldman

Recently, even Twitter, surprisingly, took a step in the same direction: their new ‘Twitter Cards’ initiative is compatible with OpenGraph, so you don’t need to add extra markup in two different formats.

You'll notice that Twitter card tags look similar to OpenGraph tags, and that's because they are based on the same conventions as the Open Graph protocol. If you're already using OpenGraph to describe data on your page, it’s easy to generate a Twitter card without duplicating your tags and data. When the Twitter card processor looks for tags on your page, it first checks for the Twitter property, and if not present, falls back to the supported Open Graph property. This allows for both to be defined on the page independently, and minimizes the amount of duplicate markup required to describe your content and experience. Twitter Developers docs

Update: In a discussion on Twitter about OpenGraph, another issue that’s affecting Blogger articles came up: in some cases the description generated by OpenGraph will pick up content from the post comments instead of the actual text of the post.

@exde601e Now I can dive into the next problem: why OpenGraph seem to favour the comments (!) and not my post for og:description :/

— Anders (vemihelvete) (@vemihelvete) October 10, 2012

The problem is actually that Blogger’s online post editor uses <div> tags by default instead of the (semantically correct) <p> tag; the comments on the other hand use <p>. Since OpenGraph is scanning the page for <p> tags, the first one is found in the comments section and that becomes the description you see when you share to Facebook. There is unfortunately no easy fix for this; I mostly use Windows Live Writer to write articles, which uses the correct <p> tags in the first place; and Anders has found a solution by changing the template to avoid going back through hundreds of articles and correcting them manually. But these are both workarounds that shouldn’t be needed if Blogger would wake up and fix the online post editor…