Social share previews

Where these appear

Everywhere a link is posted. Messaging apps, social platforms, internal chat tools, and the preview some email clients generate. One set of tags covers all of them.

That matters more than it sounds, because a link shared by a happy customer is the most valuable traffic a small business gets and it arrives looking however the platform decided.

A preview showing a cropped corner of a logo and the words home page is a recommendation that looks like spam, which is a genuinely useful thing to prevent for the cost of an afternoon.

What the platforms read

Three pieces of information in the page markup: a title, a short description and an image address. Most platforms read the same tags, so setting one set is sufficient.

Without them a platform falls back to guessing. It usually finds your page title and meta description, which is passable, and it finds an image almost at random, which is not.

Our page on meta descriptions covers the search-result version of the same text. The two overlap and are worth writing separately where the audience differs.

The image is the part that matters

The card is mostly image. A wide picture at roughly twelve hundred by six hundred pixels is the safe shape, and anything square or tall gets cropped in ways you cannot predict.

Avoid text in the image, or keep it very large and central. Platforms crop differently and a caption running to the edge gets cut mid-word on at least one of them.

One good site-wide image is far better than none. A photograph of real work with your name on it serves every page adequately until you have reason to do more.

Keep the subject in the middle. Different platforms crop to different shapes, so a composition with the important part centred survives all of them and one framed to an edge does not.

What a share preview needs

The list below covers the whole feature. It is a one-time setup on most website tools, and once set it rarely needs attention again.

• A title written for a feed, not a search result
• A description of roughly one sentence
• A wide image, about twelve hundred pixels across
• The image served at a full public address
• A fallback image set site-wide
• No important text near the image edges
• A card type declared so platforms render it large

Per page where it earns it

Your most-shared pages deserve their own image and wording. For most small businesses that is the home page, the main service pages and anything seasonal.

Everything else can inherit the site-wide default. Producing a distinct image for a page nobody shares is effort spent where nothing happens.

Write the title for somebody scrolling a feed rather than scanning a results page. A search title works hard to match a query, and a share title only has to make a person stop, which is a different job.

Our page on which images belong covers the selection. A share image follows the same rule and is cropped harder.

Test before you rely on it

Post the link into a private message to yourself on whichever platform matters most. That takes seconds and shows exactly what a stranger will see.

Platforms cache previews aggressively, so a change frequently appears not to have worked. Most offer a tool to refresh what they have stored, and using it saves a false conclusion.

Check the image loads at its full public address in a browser. A share image stored somewhere private is the commonest reason a card shows a blank space.

Test on the platform your customers actually use rather than the one you use. The cards render differently, and a preview that looks correct in one place proves very little about another.

Keep it current

A share image showing an old premises, a retired logo or a previous team ages the same way any photograph does, and it is easy to forget because you never see it yourself.

Put it on the same review cycle as the rest of the site. Our page on updating content covers what that cycle should contain.

It belongs on the launch pass too. Our page on the launch checklist lists it beside the favicon, which is the same class of one-hour detail.