Designing link previews: what should a shared page card show?

Make the card represent one specific page

A service cover should communicate the decision that service addresses. A project cover should show the actual project. Repeating the same general image across every address makes different links harder to distinguish. Write the title around the page’s main subject, then use the description to explain what readers will find rather than repeating the same words.

For a technical-document guide, a title about finding the right document is more concrete than a broad promise to transform a brand. Any promise on the card must have a counterpart on the page. Do not advertise an unconfirmed price, delivery time or feature just to make a preview seem more attractive. The card should help the right visitor understand the destination.

Prepare metadata alongside the page content

The Open Graph protocol defines og:title, og:type, og:image and og:url as basic properties. It also provides additional fields for descriptions, locale and image alternative text. These give preview systems information, but do not guarantee an identical crop or presentation in every application. Check the published URL in the sharing environments that matter to the business.

It is useful for an editor to see the preview title and description where they update the cover. Otherwise a page can change while its old preview copy is forgotten. A new project cover does not necessarily require every photograph within the project page to use the same crop. Define each image’s purpose separately rather than treating all exported images as interchangeable.

Create a cover that works small and in the right language

Use a small number of words and one central idea. Keep important objects, faces and text away from the edges, where a different card ratio may crop them. Fine type, long subtitles and tiny logos can become unreadable on a phone. Review the artwork at a small preview size, not only on the large screen where it was designed.

A Turkish cover for a Turkish URL and an English cover for an English URL create a consistent reading journey. A text-free photograph can serve both languages, but the image alternative text and card title should match the destination language. Base the choice on the shared page address rather than guessing a visitor’s country. Check that the link opens the same language the card promises.

Open a sample card plan

Check the live address, asset and message after publication

Verify that the preview image loads from a public address, uses the format its filename indicates, and does not point to the wrong language version. Read the page title, description and cover message together. If they make different claims, replacing the artwork alone will not resolve the mismatch. Include this review in the publishing checklist rather than leaving it until someone notices an incorrect share.

Instead of expecting pixel-identical output everywhere, check which crops preserve readability. Our mobile image-framing guide covers the related on-page decision. Use real content from the project archive and the agreed website design scope to prepare a page-by-page cover list. Finish with the published URL: a correct local design file does not prove that the live preview information has been updated.