10 October 2012

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 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 . 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 , 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 about OpenGraph, another issue that’s affecting 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.

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 . 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…

17 comments:

  1. Thank you for an excellent and helpful post!

    The data:blog.postImageThumbnailUrl returns an image of 72x72px. This of course works, but OpenGraph prefers the image to be at least 200x200px.

    In the postImageThumbnailUrl is embedded a sizer, "/s72-c/", which can be manually edited to "/s200-c/" to give an image of 200x200px.

    I wish I could think of some way to have this larger sizer by default from within Blogger.

    For what it's worth, it would at least make one of the OpenGraph warnings go away :)

    ReplyDelete
    Replies
    1. Yeah, unfortunately I don't think that's possible currently; the size of the thumbnails is probably hardcoded in Blogger templates. There is a solution involving JavaScript, but I haven't tested it and I'm pretty sure it won't work for this purpose - as OpenGraph image I mean. You could also try the Blogger Developer forum, maybe someone has other ideas...

      Delete
  2. thanks,
    it was helpful !

    http://livehtmleditor.blogspot.com/

    ReplyDelete
  3. It was really helpful for me.. Working perfect on my blog.. Thanks George..

    ReplyDelete
  4. Seems like there is no solution available for small image, or any solution available now?

    ReplyDelete
  5. Great post - but only problem as mentioned above is that postImageThumbnailUrl is size 72 by 72 only.

    Has anyone found a solution to get a thumbnail that is 200 by 200?

    ReplyDelete
  6. I struggled for days to find a solution to integrate the like button on my blog, without errors, but fail to find solutions to fix all errors. I use the same code as above, I have a clean template theme from blogger and when I check the blog in facebook debug these occured:
    Like Button Warnings That Should Be Fixed :
    fb : admins and fb : app_id tags is missing . These tags is Necessary for Facebook to render a News Feed story That generates a high click -through rates .
    og : image is missing . The og : image meta tag is Necessary for Facebook to render a News Feed story That generates a high click -through rates .

    and the Open Graph Warnings That Should Be Fixed

    The Property infer ' og : description' property SHOULD be explicitly provided , Even if the value of can be infer from other tags .
    The Property infer ' og : image ' property SHOULD be explicitly provided , Even if the value of can be infer from other tags

    Sometimes when using debug , the answer is - " Could not follow redirect - URL Requested HTTP redirect but it Could not be FOLLOWED " blog extension changes from .ro to.se . I have read several articles on the Internet and I understand that blogger solved this problem by introducing a code to prevent this situation. I have this line of code. I read the article written by you - "Fixing sharing buttons for country- specific URLs Blogger" but i still don't know where/how and if i have to use Canonical.
    my blog montajmobilier.blogspot.ro , or com
    Thank you

    ReplyDelete
    Replies
    1. You should generally always have canonical links for the blog posts, that's the recommended practice by Google. But with a new Blogger template they should already be correctly set-up.
      Have you tried adding the code described in my article to the head of the template and testing if you get the same errors in Facebook's debugger?

      Delete
  7. I used the code on your page and as a result the og had three errors. Meanwhile I tried other versions, the one i use now gives me one error but it only display one picture in facebook debug. With your code, i had more pictures displayng but more errors. Maybe is something to do with my Doctype
    ?xml version="1.0" encoding="UTF-8" ?
    !DOCTYPE html
    html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'

    Do i need to add or remove something?

    regarding how to use canonical, I searched the internet and from what I understand blogger has introduced a line of code that and I have it

    (ps i had to remove the < >

    ReplyDelete
    Replies
    1. I personally use this doctype on the blog:

      xmlns:fb='http://www.facebook.com/2008/fbml'
      xmlns:og='http://opengraphprotocol.org/schema/'

      instead of your last line: xmlns:og='http://ogp.me/ns#' maybe it makes the difference.
      I only get some warnings in the Facebook debugger, mainly related to images missing, but those can be usually ignored, the algorithm can work around them.

      Delete
  8. I just added your code again and this time I see that only two errors,
    Open Graph Warnings That Should Be Fixed

    og : Image should be larger Provided og : image is not Big Enough . Please use an image that's at Least 200x200 px. Image ' http://4.bp.blogspot.com/-8wjXgd8dXrM/UxiLt9XcReI/AAAAAAAABq8/ZQq5vwsMPaE/s1600/eu.jpg ' Will be used INSTEAD .
    and

    Admins And Missing App ID fb : admins and fb : app_id tags is missing . These tags is Necessary for Facebook to render a News Feed story That generates a high click -through rates .

    In the code on your page , I see that there's no connection between application facebook , fb site admins and more specifically - that these two lines of code missing :
    meta content='app_id' property='fb:app_id'/
    meta content='fb_admins' property='fb:admins'
    I've added the code on your page and now I have one error , perhaps the image they use is too small indeed.

    I checked both your site and mine. I even have an error less than you, yet in og if my site , I have only one picture , and if your site appear more . Somewhere there is something wrong ..

    Question , can leave your code plus those two lines with the fb app and fb admins ?

    ReplyDelete
    Replies
    1. Unfortunately you can't do much about the first error; Facebook wants a bigger size, at least 200 px, but Blogger's thumbnails are only 72 px and there's no sign they will update that.

      For the second issue, these two properties are used to establish the 'ownership' of the site/blog. You can use either app_id if you have a Facebook app or fb_admins if you want to link the site to your Facebook profile. Personally I use the second. For the value you should use you own ID, if you just copy mine Facebook will think I'm the owner/author of your site. :)
      To get your ID, log into your Facebook account, then visit the page http://graph.facebook.com/userid where you replace userID with your Facebook URL (for example mine is http://graph.facebook.com/george.moga). Copy the value next to "id" and paste it in your code as
      meta content='fb_admins' property="id"
      Hope this helps!

      Delete
  9. Before I started messing around with meta tags, Facebook was offering to pick a thumbnail among the pics from the post I was sharing. Now with the tags I'm certainly more in control of what pictures Facebook finds as "corresponding" to the post, but I can only have one image=thumbnail per post - given by meta expr:content='data:blog.postImageUrl' property='og:image'/>. Is there a way to tell FB there are more images I would like to pick from?

    ReplyDelete
    Replies
    1. I don't think there is, unfortunately. While OpenGraph allows multiple images to be tagged on a page, Blogger returns only one image in 'data:blog.postImageUrl', and as far as I know there is no way to change this behavior or to manually add multiple 'og:image' tags to an article.

      Delete
    2. thanks George, I put data:blog.postImageUrl in instead of using data:blog.postImageThumbnailUrl and it nows shares the bigger image of the post if there is one

      Delete
    3. You're right, data:blog.postImageUrl works for me as well! Thanks, I updated my blog with the new property.

      Delete