UI Architect, Full Stack Web Developer – San Francisco Bay Area (Walnut Creek), CA
UI Architect, Full Stack Web Developer – San Francisco Bay Area (Walnut Creek), CA

Enabling Rich Previews Of Shared Links

The iMessage app in iOS 10 provides rich previews of links when they are properly formatted to take advantage of this new feature.  In addition, these same links will contain rich previews in other apps too, like Facebook, Reddit, WhatsApp, Skype, Twitter, and others with the same configuration.  In the screen shots below, you can see how these simple links to apple.com and yahoo.com display large logos and titles when they are shared through iOS’s iMessage app:

 

 

How Do They Do That?  Answer: Open Graph Tags.

The rich previews inside iOS’s iMessage app are generated entirely by a couple of Facebook’s open graph tags.   These tags are placed inside the <head> section of a website.  Facebook supports several of these tags, but iMessage only uses 2, “og:title” and “og:image”

For example, take a look at this simple html page:

<html>
  <head>
    <meta property="og:title" content="Mark's Favorites at AEO" />
    <meta property="og:image" content="http://markcarlson.io/wp-content/uploads/2016/12/Heart_font_awesome.svg.png" />
  </head>
  <body>
    <p>Web page content goes here</p>
  </body>
</html>

Even though this page generates a simple site with only one line of text, it will generate the following rich preview in iMessage:

iOS iMessage sharing demo

 

Composing The Perfect Preview Image

Title text length is limited to around 44 characters in iMessage.  Additional text is clipped and replaced with ellipses.  GIF and dynamic images don’t work when specified in the image tag.  The recommended preview image size is 1200 x 1200 or larger.  Reddit uses a 70 x 70 square image for its thumbnail.  Images of all sizes are automatically resized down to this.  Facebook recommends 1200 x 630 for og:image dimensions.  This gives your shared post a full-size image above the post text.  Image resolution as low as 600 x 315 will also be handled this way.

Let’s see what happens when we try to share the same site with a full 1200 x 1200 image on Facebook:

Sharing on Facebook

Clearly that is not ideal.  Facebook has cropped our 1200 x 1200 image down to 1200 x 630.  Now that we know some social media will display a square and some a rectangle, it’s up to us to create an image that will work well in both.  Let’s try something like this (I’ve added a background to show where 1200 x 630 would fit inside this 1200 x 1200 image.):

 

AEO Favorites 1200 x 630 highlighted

This image is 1200 x 1200, but the main content is contained within a 1200 x 630 space.  Now when we share in iMessage, we get this:

iMessage with new 1200 x 1200 image
Not too shabby.  Best of all, this same image works beautifully with Facebook as well:

Facebook share with new 1200 x 1200 image

How Small Is Too Small?

What happens if your og:image is much smaller 1200 x 1200?  Let’s take a look.  Here’s the same image, saved at 150 x 150 which is the smallest size supported by iMessage:

150 x 150 demo image

Here’s what we get when we share on a site that uses 150 x 150 og:image size:

Although it displays an image at this size, it’s getting visibly pixelated on a retina display.  How does this same image look in a Facebook share?

As you can see, the best we get at this resolution is a smaller image on the same line as the post text.

Conclusion

Facebook open graph tags can greatly enhance the experience of link sharing on mobile devices and on social media platforms.  Improve your user experience with visually enhanced links to share.  Remember to use a 1200 x 1200 image that will look good both square and cropped to 1200 x 630. Then add 2 meta tags at the top of your HTML, to increase the chance of additional clicks and higher conversions!

Leave a Reply to markcarlson Cancel reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

3 thoughts on “Enabling Rich Previews Of Shared Links”