Everything you ever wanted to know about unfurling but were afraid to ask /or/ How to make your site previews look amazing in Slack

Matt Haughey
Nov 24, 2015 · 10 min read

Let’s start with the most obvious question first. This is what an “unfurl” is:

Those handy little previews you see when you paste a link into a Slack message are what we refer to as unfurling internally at Slack (and also in Slack’s API documentation). While it may sound like a made up bit of tech jargon, it’s an actual word that means “to spread out from a rolled or folded state” which is what Slack attempts whenever it encounters a link.

Unfurled previews in Slack are handy because they give everyone a glimpse of what someone linked to, and let you know if it’s helpful or not as you go about your day processing dozens of channels and reading hundreds of short messages. A preview saves lots of time throughout your day, as you decide whether or not something is worth reading, or better skipped over. They also help with search and your own recollection of what you’ve seen in Slack.

How the unfurl process works and how you can make it work better for your own sites is what I’m here to explain today. Why don’t we jump right in with an example?

Go from basic unfurls to something better

I don’t mean to knock the work that SwiftKey is doing, I merely want to point out that this unfurl isn’t as strong as it could be. The blog post being linked has a great graphic showing the most popular emoji used in each US state, so an image would be handy here. However, the text shown is a default site/product description. If you instead saw their blog post summary, chances are everyone in a channel that loved emoji would click through to read it but in its current state you can’t really tell what that page will have on it.

While most sites are pretty good about unfurl previews, you will see a few each day that have no description or a generic short description of a site instead of specific information about the page being shared. On the flipside, here are a few examples of impressive unfurls to give you an idea of what is possible.

In these examples you can see how e-commerce sites can show off what they are selling, how much it costs, what the product looks like, along with current inventory. At Techcrunch, they show a thumbnail of each article’s main image along with an extended excerpt (I clicked to expand for the screenshot, they don’t dominate the message space in Slack by default). Finally, Blue Apron gets the magazine/catalog treatment with a larger image along with a description of their typical products. In all these examples you get a good idea inside of Slack of what you’ll see if you follow the link to get additional information.

So let’s talk about how it all works.

The Unfurl Landscape


Here is an example of what oEmbed output looks like on the image site MLTSHP:

"version": "1.0",

"type": "photo",
"url": "http://s.mltshp.com/r/16H7E",

"width": 1600,
"height": 1293,
"title": "Reception",
"author_name": "Vidiot",
"author_url": "http://mltshp.com/user/Vidiot",
"provider_name": "MLTSHP",

"provider_url": "http://mltshp.com/"

Twitter Cards

You can customize a thumbnail image, name, and description in all the card types. The label1/data1 and label2/data2 properties found in the Product card type let you do things like the earlier ecommerce screenshots, displaying prices, inventory, categories, or anything you can imagine in a nicely formatted way. Those data fields will work on any Twitter card type in Slack, even though Twitter itself will ignore them in all but Product type. Finally, if you’d like the largest possible image preview in Slack, go with the Summary Card with Large Image type.

Facebook’s Open Graph

HTML meta tags

The Unfurl Cascade

  1. oEmbed server
  2. Twitter card tags/Facebook Open Graph tags
  3. HTML meta tags

Priority is given to things higher in the list, so if you run an oEmbed server that gives out generic information, but offer up rich descriptions for Twitter and Facebook, Slack will stick to the oEmbed server information and ignore the rest. For Twitter cards and Facebook Open Graph tags, whichever is first in the page’s HTML will be used. If Slack finds nothing meeting the first two criteria, it will look for a meta tag with the description attribute and show that. If nothing meeting the above criteria can be found, no unfurl will be shown.

From zero to hero

<meta property="og:url" content="https://swiftkey.com/en/keyboard/ios"/>
<meta property="og:title" content="SwiftKey Keyboard for iPhone, iPad &amp;amp; iPod Touch"/>
<meta property="og:description" content="Discover the best new app for iPhone and iPad, SwiftKey Keyboard learns from you for faster, easier mobile typing — free."/>
<meta property="og:site_name" content="SwiftKey"/>
<meta property=”og:image" content="/images/og/default.jpg"/>

Which, again, looks like this (there’s a small bug, they forgot to put a full path to the image, so no image is displayed in Slack):

A suggested rewrite follows. Ideally, whatever content management is in place would automate the updated Facebook Open Graph tags used to provide previews using available data.

<meta property="og:url" content="https://swiftkey.com/en/united-states-emoji/"/>
<meta property="og:title" content="The United States of Emoji presented by SwiftKey Keyboard"/>
<meta property="og:description" content="Which emoji does each US state use more than others? Explore the map above or select a state below to learn more."/>
<meta property="og:site_name" content="SwiftKey"/>
<meta property="og:image" content="https://i.imgur.com/fdPhX2E.png"/>

The improved unfurl ends up looking like this:

To be clear, the suggested update would also make their blog post content stand out on Facebook as well, instead of their generic site-wide pitch to download their app.

More examples

If you view source on each website, you’ll see that UCLA has almost no descriptive tags in their headers and the unfurl in Slack picks up the meta description tag alone. In MIT’s case, the unfurl is created from a mix of Twitter Card tags and Facebook Open Graph tags and since they provide a small logo GIF, it gets displayed as a thumbnail. Harvard uses Facebook’s Open Graph tags to offer up a title and description as well as an image and displays that at a larger size thanks to the Twitter Card type set to summary_large_image.

Optimizing your site for Slack (and others)

Putting it all together

<!-— facebook open graph tags -->
<meta property="og:type" content="website" />
<meta property="og:url" content="http://ruraljuror.com/" />
<meta property="og:title" content="Rural Juror" />
<meta property="og:description" content="The film, based on a Kevin Grisham novel (John Grisham’s brother), revolves around a Southern–born lawyer named Constance Justice." />
<meta property="og:image" content="http://ruraljuror.com/heroimage.png" />

<!-— twitter card tags additive with the og: tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:domain" value="ruraljuror.com" />
<meta name="twitter:title" value="Rural Juror" />
<meta name="twitter:description" value="The film, based on a Kevin Grisham novel (John Grisham’s brother), revolves around a Southern–born lawyer named Constance Justice." />
<meta name="twitter:image" content="http://ruraljuror.com/heroimage.png" />
<meta name="twitter:url" value="http://www.ruraljuror.com/" />
<meta name="twitter:label1" value="Opens in Theaters" />
<meta name="twitter:data1" value="December 1, 2015" />
<meta name="twitter:label2" value="Or on demand" />
<meta name="twitter:data2" value="at Hulu.com" />

Slack unfurl

Facebook post preview

Twitter Card preview

One more item for your pre-launch checklist

For those of you that have created any kind of content management system (CMS), making sure your CMS gets metadata and preview formatting right means you’ll likely improve previews for a great number of websites and for any readers sharing pages from your CMS. For systems like Wordpress, plugins like Jetpack do a pretty good job with unfurls out of the box.

There are a lot of ways to customize exactly how your sites and pages appear in social apps as well as Slack, so dive into the documentation and figure out what suits your content best, and start giving readers the most informative previews possible.

One last example

With a slight bit of retooling, I built a quick demo that adds a bit more information about it before you click, hopefully the design team at Medium takes some cues from it! :)

If you have any additional questions about unfurling or run into problems, contact us at feedback@slack.com and we’ll help you out.

Slack Platform Blog

Several bots are typing…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store