Social Media Preview

When someone shares a link in a social network, a messaging app or a team chat, the app fetches the page and builds a preview card from its Open Graph tags: a title, a short description and an image. The social preview tool shows how that card could look in several common layouts, from the title, description, URL, site name and image you enter (an image URL, or a local image that stays on your device), so you can catch a missing image, a cut-off title or a description left over from another page before anyone shares the link.

Open Graph tags (og:title, og:description, og:image, og:url) are read by most apps. X (Twitter) reads its own twitter: tags first and falls back to Open Graph, and the twitter:card value picks a small summary card or a large image card. Each app crops images and truncates text a little differently, so the preview is a close approximation rather than a pixel-perfect copy of any one app.

Apps also cache previews. After you change your tags, an old card may keep appearing for a while; most platforms offer a debugging tool that fetches the page again. For the image, use an absolute https URL, about 1200 × 630 pixels, with important text away from the edges.