brett.cool
Happy Saturday!
About
Photoessays
Blog
Now
Uses
Blog

Wrangling OGP Tags

Recently I’ve found myself tackling rich link unfurling on websites such as Twitter, Facebook, and 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 Open Graph?

The Open Graph protocol is a set of standards developed by Facebook and other websites, for specifying meta information on a page, which is used 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:

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.

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

brett.cool
the digital garden of brett jones