Wrangling OGP Tags

Rangling OGP Tags
Can we get more meta? Oh, ohh

Recently I’ve found myself tackling rich link unfurling on websites such as Twitter, Facebook, Slack.

It’s a small thing, but it’s just an extra layer of polish that—along with gratuitous emoji usage—can make you and your site look really 💯.

It was around the third time I found myself going through the process again that I finally decided to create some boilerplate stuff for myself to refer to, and figured I’d share it on this here internet thing.

What is this OGP stuff?

Open Graph protocol is a set of standards by Facebook for marking meta information on a page, which Facebook, and other services, can refer to, and unfurl, to provide richer link previews. As is always the case with ‘standards’, there are some proprietary and competing ones. Twitter has their own set of markup and specifications for rich card previews too.

Showing what can happen when you just embrace existing tags, Slack nicely unfurls links based on existing OGP and Twitter tags:

A screenshot of a link on my blog unfurled

The corresponding bits of HTML which yields the above is straightforward:

<meta property="og:title" content="Being Open">
<meta property="og:description" content="After the culmination of eighteen months of hard work, the inaugural Mixin conference was held last week. A week later, I’m still reeling from the whirlwind experience…">

<meta property="fb:image" content="http://brett.cool/images/blog/2016-11-05-be-open/fb.jpg">

<meta property="twitter:label1" content="Reading Time 🕖">
<meta property="twitter:data1" content="About 4 minutes">
<meta property="twitter:label2" content="Published 📅">
<meta property="twitter:data2" content="November 5, 2016">

Slack has an excellent article on the key meta properties, but this post is more interested in the process and strategies for managing these!

Creating the images

I’ve created a Sketch Template for making these images. Any old editor will do, but Sketch’s handy multi-export feature really shines when batch creating a bunch of assets.

Screenshot of Sketch template
Sketch template with export slices sized Facebook and Twitter

The template includes a canon and some layout guides to make the creation of these images a bit quicker and easier. The og and fb image exports export to @2x scale for Facebook and Twitter respectively.

Check out the template on Github →

File structure

As I generate images for facebook and twitter, I prefer to store them together in the same directory, with a predictable filename.

On image formats, I’m flipping from png to jpg depending on compression. Jpeg wherever photographic content is concerned, and png if it’s graphical.

# The default opengraph images
brett.cool/images/
  fb.jpg
  og.jpg

# Page-specific opengraph image overrides
brett.cool/images/page
  fb.jpg
  og.jpg

# Blog post opengraph image overrides
brett.cool/images/blog/2016-11-09-wrangling-ogp-tags/
  fb.jpg
  og.jpg

Serving the images

With Middleman, I use middleman-ogp to specify paths to the images in page frontmatter:

ogp:
og:
  title: 'Page title'
  description: 'Page description'
  image:
    '': http://example.com/path-to-image/og.png
    type: image/jpg
    width: 560
    height: 300
  locale:
    '': en_us
fb:
  title: 'Page title'
  description: 'Page description'
  image:
    '': http://example.com/path-to-image/fb.png
    type: image/jpg
    width: 600
    height: 315

Of course, if you’re running a dynamic site, you can do it any number of ways. One way I’ve implemented custom OGP images on a rails site is to specify a default image in the layout, and then use an instance variable in a view template to override the default image path.

A work in progress

This is still something I’m playing around with. Check out the Github repository and contribute your ideas