iOS10 Messages Link Preview Image

Jon picture Jon · Aug 17, 2016 · Viewed 7.6k times · Source

Any iOS10 beta testers out there know if Messages uses a syntax similar to Facebook Open Graph to set things like meta descriptions and images?

I'm building a site and would like to have it ready for when iOS10 is launched.

Here's the type of stuff I'm talking about:

<!-- Facebook Meta -->
<meta property="og:title" content="Site | Title of Page" />
<meta property="og:image" content="http://www.domain.com/im-content/social-post-images/facebook image.png" />
<meta property="og:url" content="http://www.domain.com" />
<meta property="og:site-name" content="Site | Title of Page"/>
<meta property="og:type" content="website" />
<meta property="og:description" content="Here is a description of my site that will show up in the Facebook card." />

And here's the image/info I'm trying to control:

enter image description here

Answer

John R Perry picture John R Perry · Aug 28, 2016

It's at least using Open Graph and Twitter Card.

Demos

Open Graph

Markup:

<meta property="og:image" content="https://www.j-26.com/assets/facebook.jpg"/>

Preview:

enter image description here


Twitter Card

Markup:

<meta name="twitter:image" content="https://www.j-26.com/assets/twitter.jpg"/>

enter image description here


Notable findings

I tested this page using Twitter Card and Open graph and iOS seemed to prefer Open Graph. On the test page, the Twitter Card markup is placed before the Open Graph markup and the image used for Twitter Card is smaller than the one used in Open Graph. Despite the smaller size and earlier placement, iOS chose to display the image from Open Graph.