Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS10 Messages Link Preview Image

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

like image 962
Jon Avatar asked Aug 16 '16 23:08

Jon


People also ask

What is a link preview image?

Link preview - it is exactly what it sounds like. It shows you what a link that you share in a social media post looks like (be it on Facebook, LinkedIn or Twitter). A few years ago, it was possible to change almost anything regarding the link preview. You were able to change headlines, descriptions and images.

Does iPhone link preview actually open the link?

All replies. It is not possible to introduce malware to an iPhone, so that is not an issue. Phishing emails are only a risk if you open a link in the email AND enter personal information. The preview does not execute anything on the web page.

How do you preview links on iPhone?

Preview Link Before Opening on iPhoneTap and Hold on the Link that you want to preview on iPhone and you will immediately find the page loading in a New Pop-up window. To preview URL of the Link, tap on Hide Preview option located at top-right corner of the pop-up window.

What is link preview on phone?

If you're wondering what an SMS link preview is, some mobile devices display previews for links contained in SMS or MMS messages.


1 Answers

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.

like image 179
John R Perry Avatar answered Oct 25 '22 13:10

John R Perry