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.
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:
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!
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.
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
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.
This is still something I’m playing around with. Check out the Github repository and contribute your ideas ✨