iOS10 Messages Link Preview Image

Question

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:

Zacheryzack

Answer 1

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:

---

Twitter Card

Markup:

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

---

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.

Correspondence

Thanks so much, John! I really appreciate your help :) – Zacheryzack

Have you managed to get this working over SSL? My http og:image tags work great with raw http, but any https images do not load, even if I use og:image:secure_url – Machismo

Your answer has a typo - the twitter card markup should say twitter:image instead of og:image -- confused me for min. – Quinonoid

Good catch. Fixing it now. – Correspondence