Web Peeks & Social MetaData

A quick exploration of how Apple could piggyback on existing data to make web peeks better

April 16, 2016

My friend Casey mentioned this morning that Peek on iOS wasn’t exactly amazing with most modern websites. He raises a great point.

But this got me thinking: Do websites have any other way of showing just a quick tease of their content? Of course they do! Most websites include bits of metadata they use to look nicer on social media sites like Facebook, Twitter, and Slack. Apple could look for that data by default and display a nicer tease. If the data isn’t available, they could still fall back to the less optimal web view.

Here’s some sample social metadata

<meta property="og:site_name" content="UXcellence" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Sketch Hacks: Little Tricks to Improve Your Sketch Workflow" />
<meta property="og:description" content="I started using Sketch early last year and was almost immediately floored by how much it got right compared to other tools (ahem Photoshop and Illustrator) I’d been using for years. In just over a year, it’s quickly..." />
<meta property="og:url" content="http://uxcellence.com/2016/04/15/sketch-hacks/" />
<meta property="og:image" content="http://uxcellence.com/content/images/2016/04/sketch-hacks-1.png" />
    
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Sketch Hacks: Little Tricks to Improve Your Sketch Workflow" />
<meta name="twitter:description" content="I started using Sketch early last year and was almost immediately floored by how much it got right compared to other tools (ahem Photoshop and Illustrator) I’d been using for years. In just over a year, it’s quickly..." />
<meta name="twitter:url" content="http://uxcellence.com/2016/04/15/sketch-hacks/" />
<meta name="twitter:image:src" content="http://uxcellence.com/content/images/2016/04/sketch-hacks-1.png" />

This is how it turns out

A sample of how Slack uses social metadata

You’ll notice that there are two sets of nearly identical data above. Facebook has a set of metadata called OpenGraph that other tools are free to use, and Twitter has their own proprietary set. Apps like Slack (and others) can use this data to create their own custom views from links like this image.

Many modern content management systems automatically add these tags for authors. So how could Apple use this? I mocked up a quick example below. If the social metadata isn’t available, they could still fall back to the view they’re already showing.

And here’s a quick mockup in iOS

Here's a concept for how browser peeks could look using social metadata.