Why a page needs its own sharing tags at all
When a link is pasted into a chat app, a social feed, or a messaging thread, the platform doesn't just show the raw URL — it fetches the page and looks for a specific set of Open Graph meta tags to build a preview card with a title, description and image. Without those tags present, most platforms fall back to guessing from the page's regular title tag and whatever image happens to be first in the content, which frequently produces an awkward or unhelpful preview: a logo instead of a relevant photo, a title that reads fine in a browser tab but oddly as a headline, or in some cases no image at all.
Open Graph tags, identified by the "og:" prefix, were originally introduced for one major social platform but are now read by nearly every platform that generates link previews, including messaging apps and other social networks. Twitter's own "twitter:" prefixed tags serve a similar purpose specifically for its own preview cards, and are included here alongside the Open Graph tags since many pages benefit from having both sets present, falling back to Open Graph values automatically where a Twitter-specific one isn't provided.
Choosing an image that actually works as a preview
The single biggest factor in whether a shared link looks appealing is the image, and the most common problem is using an image sized for something else entirely, like a small logo meant for a header. A dedicated share image sized for a wide card format, generally in a roughly 1.91:1 landscape ratio, tends to display cleanly across the widest range of platforms without being awkwardly cropped. It's worth testing a real page's preview after publishing, since cropping behavior can vary from platform to platform, and an image that looks fine on one may cut off an important detail on another.
The title and description fields can reasonably differ from your page's regular SEO title and meta description, since they're serving a different purpose — a shared-link preview is competing for attention in a busy feed rather than in a list of search results, so a slightly more direct or attention-grabbing phrasing is often appropriate here even if it wouldn't be the best choice for a search snippet.
Using the preview card while you build these tags
The approximate preview card below the generated tags mimics the general layout most platforms use: an image at the top, a small site name, a bold title, and a shorter description underneath. It's intentionally described as approximate rather than exact, since every platform renders these cards with its own fonts, cropping rules and character limits, and some platforms cache a page's preview the first time it's shared and won't refresh it automatically even after you update the tags — if you need to force a refresh after changing these values on a live page, most platforms offer a debugging or cache-clearing tool specifically for that purpose.
Finally, consider setting the content type field deliberately rather than leaving it on the default. A blog post or news piece is usually better described as "article" than the generic "website" value, since some platforms use that distinction to decide whether to show a publish date or author byline alongside the preview. Product pages have their own "product" type for similar reasons, and getting this one field right can make a shared link look noticeably more polished without any extra effort beyond picking the correct option from the dropdown.