Industry InsightsiOS 10Technical

How to Configure Your App’s Sharing for iOS 10’s iMessage Update

By September 12, 2016 3 Comments

With iOS 10, comes a complete host of changes ranging from in-message interactable apps, and a completely separate App Store, to links populated with full graphic previews. It’s a brave new world, and you probably are asking yourself where to start. We recommend just outfitting your regular iOS app with the changes necessary to support iMessage first.

With that in mind, for this post, we wanted to focus on how you can prepare your own links to support the iOS 10 iMessage rich previews of links. In the below screenshot, you can see an example of a link shared that was correctly configured with the tags. We expect click through rates to increase dramatically when these are properly formatted, ultimately driving more users to your app.

Rich Message Phone

Correct Open Graph Tags

The rich previews inside iMessage on iOS 10 are entirely based on a subset of Facebook’s open graph tags. These are tags that you place in the<head>tags of your website. Unfortunately, iMessage (as of Beta 8), only supports a very limited set of tags. From our testing, the two controls you have are:

  • og:title
  • og:image

With these two knobs, you can control the preview of the URL when it’s posted in a message:Rich Message

We’ve tested this quite a bit, and there are a number of restrictions that we’ll list here as a warning as you start brainstorming ideas:

  • When you add text to the same message with a link, it’ll be split out into a separate message with the link preview displayed in a message below
  • GIF and dynamic images don’t work when specified in the image tag
  • The og:video tag is ignored and will not display videos
  • The og:description tag is ignored and will not be displayed

As these initial restrictions are quite limiting, we hope to see this mechanism expanded over time to support more dynamic and modern formats.

Using Branch to Host Your Open Graph Tags

Chances are, since you built an app first, you don’t have a full website configured to host those open graph tags. Branch links handle deep linking and install attribution, but they also allow you to host open graph tags to populate rich iMessage messages on the fly.

Assuming that you’ve properly configured your app with Branch, we’ll dive right into the code. If you haven’t, take five minutes to create an account by heading to https://branch.io, then following the instructions to get setup in our integration guide for your appropriate platform.

Below you can see an example of how I generated the example link above. I simply created a Branch Universal Object, set the title and image URL to the image I wanted to display, then called getShortUrl. While my example is in iOS, we support all development platforms and you can find the corresponding code on our documentation site here.

It’s honestly that simple. The Branch SDK has fully hosted open graph tags that display rich previews for your links that are guaranteed to increase click throughs.

Configuring Open Graph Tags in Branch Links

While the current iMessage standard is quite limited, social platforms like Facebook, Twitter and Pinterest are not. These apps use the entire range of Open Graph tags specified in the standard. Additionally, as iMessage matures, you should fully expect that it will support more and more of the standard, so it’s good to begin populating the links with the correct tags on day one.

To add more complete customizations outside of the basic title, description and image url, you can find the full range of tags that Branch supports documented on our dev portal. Below, you can see an example of how to specify the og:type parameter in your Branch links:

If you notice that Branch is missing a critical Open Graph parameter, just send us a note at integrations@branch.io, and we’ll get it added right away. It’s critical that we support all of your growth use cases.

And with that simple amount of work, you’re all set to go. When your users share your links to iMessage, the receiving user will see a beautiful link, rich with all of the metadata you specified. I guarantee this will lift conversion to click on your links.

Branch is a mobile linking platform providing unified mobile experiences and measurement for more than 27,000 mobile apps, including Airbnb, Slack, Reddit, Tinder and Amazon. Branch’s free linking platform can help you grow your mobile app through features like deep linking, sharing, referrals, mobile banners and interstitials, custom app onboarding, and unified attribution across platforms and channels. Learn more about Branch.
  • Steven

    Sounds super interesting. We’ll certainly look into that on the getQueried team 🙂

  • Anthony Miller

    This isn’t working for me. Even when I’ve set the ‘imageUrl’ on my ‘BranchUniversalObject’ my messages area showing the Branch icon as the preview image for my links. Any help here?

    • Alex Bauer

      Hi @disqus_3xHvClRg7R:disqus! Sorry to hear you’re having trouble with this…would you mind sending in a ticket to our Integrations team with the link in question, and the code you’re using to generate it? We should be able to get everything sorted out pretty quickly.