5

As you can see in this screenshot taken from Apple’s iOS 10 preview page, the Messages app in iOS 10 will offer inline previews of URLs that are sent in conversations:

Screenshot of Messages in iOS 10, showing a link that has automatically been annotated with the webpage’s title and a photo

How can I ensure that my site appears properly in this context? Is there any official documentation from Apple about the specific metadata they’re using to generate these previews?

2

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 property="og: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 page, the Twitter Card markup is placed before the Open Graph markup and the image used in Twitter Card is smaller than the one used in Open Graph.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.