Mobile app version of vmapp.org
Login or Join
Caterina187

: What sort of metadata should I include on my site for rich previews in iMessage? As you can see in this screenshot taken from Apple’s iOS 10 preview page, the Messages app in iOS 10 will

@Caterina187

Posted in: #Ios #MetaTags #RichSnippets

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:



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?

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Caterina187

1 Comments

Sorted by latest first Latest Oldest Best

 

@Gloria169

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 property="og: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 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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme