Link previews
Twitter and Facebook preview cards

Auto-formatting for link sharing via social media and messaging apps

Most users of Facebook, Twitter, WhatsApp, Apple's 'Messages', and other social media and messaging services will be familiar with link previews which can appear when a URL is pasted into a message or shared.

Each platform has its own slightly different way of deciding what to display, but most seem to be happy to use Open Graph protocol tags. For Twitter, a page just needs a couple of additional tags: 'twitter:card' and 'twitter:site'.

Images

Most link preview tags are text and pretty simple to deal with. 'Title' and 'description' are fairly obvious, and easy for CMS like Typomania to generate without publisher interaction. However, images might need some intervention, as I learned during the creation of this article.

The main issue with images in link previews is the way they are cropped by the previewing system. The image I've chosen for this page has a standard portrait aspect ratio. Facebook's debugger renders this in full in a column to the left with text on the right:



The image looks ok, but the spacing looks like there's something missing. Meanwhile, Twitter prefers a landscape display, so creates a version at a 2:1 aspect ratio:



This time the text elements look fine, but the derision in the cat's face is absent.

Auto-cropping

The first remedial action implemented in Typomania was automatically creating a 2:1 version of each image. This results in Facebook using a similar 'landscape image' layout to Twitter, which is fine most of the time, but in order to get Parsley the Lion's ginger chops to appear we need a way to create simple 2:1 version of the image manually.

Manual cropping

Automatically created 2:1 link preview images can now be replaced quite easily by navigating to the image, using an area selection tool and simply clicking the 'save image' button.

The image on the left shows the selection being made, and the image below shows the result that Facebook's debugger renders after the new version of the image has been saved, which is so much improved, even the cat seems happier.

Fingers crossed WhatsApp doesn't mess things up

Facebook's rendering of the link preview after manually editing the image