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