How Your Page Will Look When Shared: A Social Card Preview Guide

When someone shares a link in a message, a feed, or a chat app, most readers never see the bare address. They see a card: a title, a short description, and usually an image. That card is assembled from tags embedded in the shared page, and it is often the only part of the page that a potential reader ever encounters. A weak card, a cropped image, a missing description, or a title that made sense on the page but reads oddly out of context, can quietly cost clicks that good content deserved. The Social Card Preview lets you see that card before you publish or share, so you can fix the presentation while fixing it is still cheap.

A social card is not a screenshot of the page. It is a small summary built from metadata the page declares about itself. The most widely used set of tags is the Open Graph protocol, originally created for one social network and now read by many platforms, messaging apps, and link unfurlers. The essential tags are the title, the description, the image, the page address, and the type, such as article or website. A second set of tags, specific to one major platform, can override the title, description, and image for that platform alone, and a third element, the image dimensions and alternative text, affects how the image is cropped and how accessible the card is. When tags are missing, the platform guesses, usually by taking the page title and the first image it finds, and guesses are where bad cards come from.

How it works

A preview tool works from the tags you supply, showing how the title, description, and image would be arranged in a typical card layout. It does not need to fetch your live page to be useful, and working from pasted or entered tag values is the safer way to experiment, because you can test a title or an image choice without publishing anything. The preview checks the pieces that most often break a card. Is the title present, and does it fit without being cut off mid-word at card width? Is the description present, and does it read as a complete sentence rather than a fragment lifted from the middle of a paragraph? Is the image present, large enough, and in a wide ratio, roughly 1200 by 630 pixels, so that it fills the card rather than appearing as a small strip or a stretched square? Is the image address absolute, starting with https, rather than relative, which many platforms cannot resolve when they build the card?

The preview also helps you think about context. A card is read without the page around it, so a title that relies on the site header, the navigation, or the previous article in a series will confuse a stranger. A description that begins with the words welcome to our site wastes the most valuable sentence in the card. An image that is mostly text will shrink to illegibility at card size, and an image chosen from a gallery at random may show a product, a person, or a chart that has nothing to do with the article. Previewing forces you to judge the card the way a stranger will judge it: in about two seconds, on a phone screen, next to a dozen other cards.

Worked example

Suppose you are about to share an article about balcony gardening for renters. A first draft of the card tags might read: title, Balcony Gardening; description, In this article we will discuss various topics related to gardening on balconies and small outdoor spaces; image, a square photo of a single potted plant taken in portrait orientation. The preview makes the problems visible at once. The title is too vague to distinguish this article from a hundred others. The description is 118 characters of throat-clearing that says nothing specific. The square portrait image will be cropped on both sides in a wide card, cutting the plant in half.

A revised version reads: title, Balcony Gardening for Renters: 7 Setups Under 100 Dollars; description, Seven renter-friendly balcony setups with pots, watering, and shade, each costed and none requiring a drill; image, a wide photograph, 1200 by 630 pixels, showing a small furnished balcony with several pots. The title is 58 characters, specific, and honest about scope. The description is 108 characters, names the benefit, and ends cleanly. The image matches the article subject and fills the wide card without awkward cropping. Nothing about the article itself changed, yet the card now gives a reader a reason to click, which is the entire job of the card. These are sample values written for illustration, and the character counts show why counting matters: titles much beyond 60 characters and descriptions much beyond 160 risk being cut off in many layouts.

Mistakes to avoid

The most common mistake is publishing without ever previewing, and discovering the problem only after the link has circulated with a broken card. Platforms cache cards, sometimes for days, so a fix applied after sharing may not appear for existing shares, which makes previewing before sharing far more valuable than fixing afterwards. A second mistake is using the same generic site description on every page. A card that says the same thing for an article, a tool page, and a contact page tells the reader nothing about the specific link, and readers learn to skip cards from that source. A third mistake is pointing the image tag at a relative path, a logo, or an image that is too small. Logos in particular make poor card images: they are wide and short, or square, and they shrink to a smudge, whereas a real photograph or a purpose-made wide image reads clearly at a glance.

A fourth mistake is letting the card promise more than the page delivers. A title that claims a free download, a price, or a result that the page does not contain will earn clicks and lose trust, and trust is harder to rebuild than traffic. Keep the card accurate, even if a bolder claim would tempt more clicks. A fifth mistake is forgetting alternative text and accessibility: an image with no descriptive alternative text leaves screen-reader users with nothing, and a card whose meaning lives entirely in the image excludes them completely. Put the key information in the title and description text, and let the image support it, not carry it alone.

Putting it into practice

Make previewing a step in your publishing checklist, not an afterthought. Draft the title, description, and image together, preview them, read the card as a stranger would, and only then publish. Reuse the same discipline for every important page, not just articles: tool pages, guides, and landing pages all get shared, and all benefit from a card that says what the page is. For neighbouring checks, the Open Graph Checker verifies the tags on a page you supply, and the Open Graph Meta Tag Generator helps build a correct set of tags from scratch. For further reading, the related guide walks through Open Graph tags in more detail, including the platform-specific overrides that a preview can help you compare.

Key points

• A social card is built from metadata tags, not from a screenshot of the page
• Title, description, and image should each work alone, without the page around them
• A wide image around 1200 by 630 pixels fills most card layouts without harsh cropping
• Preview before sharing, because platforms cache cards and fixes may not appear at once