Enabling Rich Previews of Shared Links
Facebook open graph tags can greatly enhance the experience of link sharing on mobile devices and on social media platforms.
Join the DZone community and get the full member experience.Join For Free
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 screenshots 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 two: 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:
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 1200x1200 or larger. Reddit uses a 70x70 square image for its thumbnail. Images of all sizes are automatically resized down to this. Facebook recommends 1200x630 for og:image dimensions. This gives your shared post a full-size image above the post text. Image resolution as low as 600x315 will also be handled this way.
Let’s see what happens when we try to share the same site with a full 1200x1200 image 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.):
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:
Not too shabby. Best of all, this same image works beautifully with Facebook, as well:
How Small Is Too Small?
What happens if your og:image is much smaller 1200x1200? Let’s take a look. Here’s the same image, saved at 150x150. which is the smallest size supported by iMessage:
Here’s what we get when we share on a site that uses 150x150 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.
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 two meta tags at the top of your HTML to increase the chance of additional clicks and higher conversions!
Published at DZone with permission of Mark Carlson. See the original article here.
Opinions expressed by DZone contributors are their own.