26 May 2010

Open Graph markup for Blogger [updated]

About two weeks ago I wrote about how to integrate social plugins and Open Graph markup in a blog. I noticed back then an unfortunate side-effect of the Like button, namely that clicking the button on individual blog posts sets up a new admin page for the post. Later I stumbled upon a very interesting piece of information in a comment to an article about the same topic: it turns out that if you use ‘article’ for the page type, Facebook recognizes this is not a full website and doesn’t create a new page if the administrator clicks the Like button.

To be fair, the documentation of the Open Graph protocol does specify you should only use ‘website’ or ‘blog’ for the main page, but nothing about the interaction with Facebook and the automatic creation of pages:

Use article for any URL that represents transient content - such as a news article, blog post, photo, video, etc. Do not use website for this purpose. website and blog are designed to represent an entire site, an og:type tag with types website or blog should usually only appear on the root of a domain.

To specify that different pages from the blog should have different markup you can use conditional tags in the template to customize it. For example, this code placed in the head section instructs Blogger to add the ‘article’ object type on individual blog posts and ‘blog’ to everything else, like the home page and archive:

<b:if cond='data:blog.pageType == "item"'>      
<meta content='article' property='og:type'/>
<b:else/>
<meta content='blog' property='og:type'/>
</b:if>

This can be easily extended to other properties, like ‘description’, or to other page types in Blogger. I, for example, have added a description in the second branch of the code, so that is only shows up on the main page and archive, but not on each article. You could also add a different descriptions for the home page and static pages using a condition based on the page URL.

Post a Comment