Add an Open Graph og:image to your blog so it's not boring to share

Tweet about this on TwitterShare on Google+Share on RedditShare on LinkedInShare on FacebookBuffer this page

Have you ever shared something on a social media platform like Facebook or Google+ only to see it appear as a plaintext link with no image? Boring, right? If you're a front-end developer or UX designer, there's a simple thing you can (and probably should) do to fix that.

Why bother?

It is my contention that an image in a social share represents an affordance, which:

  1. Piques the reader's interest,
  2. Provides a large, square click or tap target to access content, and
  3. Makes it not boring.

Make the thumbnail interesting, and people may find themselves more interested in opening your content. I haven't performed any A/B testing to back this up - perhaps someone has - but I really feel it's just common sense UX. Why do you think the social share buttons above are buttons? Or the svbtle network"s kudos button, while entirely CSS, is a button?

Take these two examples:

Share lacking an image

I don't mean to pick on the designers of Less (this blog uses Less CSS), it's merely a convenient example because they have the same problem I do: their site is mostly text.

And this, sharing a post from this blog:

Share with an image

Assuming you're not explicitly looking for something about either xhprof or Less, which would you be more likely to click/tap?

Side by side comparison of image and imageless share

The Problem

This blog is primarily technical, with some effort put in to things like syntax highlighting and mathematical rendering of LaTeX. These are accomplished client-side, so the beautified syntax isn't picked up by crawlers (in a way that preserves their formatting).

As a result of the domain of this blog, there are rarely images embedded into articles to be automatically picked up by social sharing platforms. It suffers from the same problem as the Less CSS organization's site.

The Solution: the Open Graph

From the site:

[blockquote]Open Graph Protocol enables any web page to become a rich object in a social graph.[/blockquote]

It's understood by Facebook, Google+ (and perhaps others) and allows web pages to do all sorts of cool things well beyond the scope of this article. One of the things it allows the page designer to do is specify images that should be included as optional thumbnails when sharing content. One or several can be specified per page, like so:


<meta property='og:image' content='http://michaelsanford.com/wp-content/uploads/2013/06/no-image-share.png'/>
<meta property='og:image' content='http://michaelsanford.com/wp-content/uploads/2013/06/image-share.png'/>
<meta property='og:image' content='http://michaelsanford.com/wp-content/uploads/2013/06/sidebyside.png'/>
<meta property='og:image' content='http://michaelsanford.com/wp-content/uploads/2013/06/75199.png'/>
<meta property='og:image' content='http://michaelsanford.com/wp-content/themes/travelmug/images/opengraph-default.png'/>

Both Facebook and Google+ will allow the sharer to iterate over and choose from the listed images when the content is shared.

The last one in the list is one I created with Instacod.es (a wickedly clever site that's a cross between Sublime Text and Instagram). It's the image specified when someone:

  1. Shares a post with no image, or
  2. Shares the root of this site.

Interestingly, the Less CSS site's main focus is their code, which appears in a hero unit on their main page, but which is plaintext. To make shares sightly more interesting for them, I made them an Instacode of that snippit:

Less CSS banner code

 

An important side-effect is that you can specify images that should be shared when content is shared on a social medium. Perhaps, for whatever reason, they're not images that appear in the content.

Twitter

Twitter knows about a similar tag, called twitter:image. Add that, too.

What about the performance impact?

What about the performance impact of adding another image to the page? Good news! Chrome (27) and Firefox (21.0) and even Internet Explorer 10 don't download the content referenced in a <meta property='og:image'> element. Open Dev Tools or Firebug on this page, hit refresh and see for yourself. I suppose someone might write an extension to save these images for some purpose (such as rich quick dial tiles).

Furthermore, the content attribute takes an absolute URL, the utility of which is limited only by your imagination.

  • Marie

    As a user, I'm less inclined to share or click in a plaintext link. It's not that I think the content to be less interesting, but I "need" a visual aid to pick my interest among the vast sea of information.