Paste a link into Slack, drop it in an iMessage thread, or share it on LinkedIn, and a rich preview appears: an image, a headline, a short line of description. That preview is not scraped from the page body. It is read from a small set of meta tags in the page’s HTML head. Social meta tags exist for one job: to control how a page looks the moment it leaves the page and travels somewhere the author never designed for.
When those tags are absent, platforms guess. The browser title becomes the share title, the first image on the page becomes the share image, the SEO meta description becomes the share blurb. The guess is usually wrong in small ways: the picked image is decorative rather than representative, the title runs too long for the card, the description says something the sharer never wanted read first. Social meta tags are the page’s chance to choose instead of being guessed at.
Two standards cover most of the surface. Open Graph works almost everywhere. Twitter Cards (now X Cards) add platform-specific control where X reads them. One point to settle up front: none of this is a Google ranking factor. These tags control social and link-preview presentation, not search position.
Open Graph: the format nearly everything reads #
Facebook published the Open Graph protocol in 2010, and its specification still lives at ogp.me. The format defines meta tags placed in the HTML head, each carrying a property attribute prefixed with og:. Almost every modern platform that renders a link preview reads these tags.
Four tags carry most of the weight. The og:title property sets the headline the card displays, distinct from the browser title tag. The og:description property sets the blurb under it, distinct from the SEO meta description. The og:image property points to the visual the platform fetches and caches. The og:url property declares the canonical destination, which keeps tracking parameters and shortened links from fragmenting the preview.
The specification also defines og:type, with values like website, article, and video.movie. Most platforms render a preview without it, but Facebook’s crawler treats it as expected, and the article: namespace (article:published_time, article:author, article:section) hands additional structured context for blog content. Adding these to content pages costs almost nothing and helps some platforms, and increasingly some AI summarizers, classify what the page is.
A page with no Open Graph tags still loads normally. It simply hands each platform permission to guess the preview. Because Open Graph functions as the default standard, even platforms with their own card system tend to fall back to it when their proprietary tags are missing.
X Cards: the format X still reads, mostly #
Twitter Cards predate the platform’s rename to X, and they operate as an extension of Open Graph rather than a replacement. The tags use a twitter: prefix and name a card type plus a few properties: twitter:card for the layout, then twitter:title, twitter:description, twitter:image, and twitter:site to attribute the share to an account (twitter:creator for the individual author).
The twitter:card property picks the layout, and four types exist:
| Card type | What it shows | When to use |
|---|---|---|
| <!–INLINECODE22–> | Small square image left, title and description right | Articles where the image is secondary |
| <!–INLINECODE23–> | Large image above the title and description | Content where the image carries weight: features, photo essays, hero imagery |
| <!–INLINECODE24–> | App icon, description, and install links | Promoting mobile apps with platform-specific download paths |
| <!–INLINECODE25–> | Embedded video or audio player | Media the platform should play inline |
The detail that saves the most work: X falls back to Open Graph when the twitter: tags are absent. A page with full Open Graph and no card tags still renders a serviceable card on X, just without explicit card-type selection. The reverse fails worse. Card tags without Open Graph often render nothing on platforms outside X. So the order is Open Graph first, then card tags added only where a page benefits from choosing the card type deliberately, usually summary_large_image for anything image-driven.
The image carries the click #
The image is the part of the preview a reader sees first, and it does more of the persuading than the title or description text. The current cross-platform standard is 1200 by 630 pixels, a 1.91:1 aspect ratio. That single size renders cleanly on Facebook, LinkedIn, X’s summary_large_image card, Slack, Discord, WhatsApp, and iMessage, which is why it is the one dimension worth standardizing on. Below roughly 600 by 315 pixels, platforms downgrade to a small-card layout that buries the image. Going larger is not penalized but adds file weight for no visible payoff. JPG suits photographs, PNG suits graphics with text, and keeping the file comfortably under a megabyte survives the compression social feeds apply. Keep any headline text or faces near the center of the frame, since edges crop inconsistently across surfaces.
Content choice matters as much as size. Human faces draw attention that abstract graphics do not, especially when large enough to register at thumbnail scale. A short overlay of three to five words can summarize the angle at a glance, if the type stays legible after compression. A consistent visual treatment teaches readers to recognize a site in the feed before they read the title. The reliable failure modes are a bare logo on a flat background, a screenshot of the page itself, and a loosely related stock photo, each of which signals nothing about what the piece actually is. Treat the image as editorial.
Titles and descriptions do a different job #
A social title and description are not the same task as their SEO counterparts, because the reader is somewhere different. An SEO meta description sits on a search results page where the reader is actively comparing options. A social description sits in a friend’s feed or a colleague’s channel, where attention is fragmented. The framing has to earn a glance rather than win a comparison, so specificity tends to beat a generic promise: “the lines we rewrote across our top articles” implies a story worth opening in a way that “complete guide to meta descriptions” does not.
Length conventions vary by surface. Open Graph descriptions generally display up to roughly 200 characters, card descriptions truncate around the same point, and Slack and Discord show a bit more before collapsing. Writing to the shorter limit is the safe default. Worth stating plainly: the social title does not need to match the SEO title. A page can carry a search-optimized title tag aimed at the primary query and a separate og:title aimed at the social context. This is the social-preview axis rather than the SERP one, and the two can and often should say different things about the same page.
Where the standard pays off beyond social #
Open Graph and card tags were built for social networks, but the formats became the default for anything that renders a link preview. Messaging apps read Open Graph on link paste: Slack, Discord, Microsoft Teams, Telegram, iMessage, and WhatsApp all pull the same tags that control a public share. Email clients increasingly do the same, with Gmail, Outlook, and Apple Mail showing previews when a sender pastes a URL. Reading apps such as Pocket and Instapaper populate saved-link metadata from Open Graph. And AI assistants that fetch a shared URL often pick up its Open Graph data while building context, so the same tags that shape a social card can influence how an AI system represents the page. One well-written set of tags works across all of these at once, including surfaces that did not exist when Open Graph was first published.
How to validate, and how to check at scale #
Open Graph and card tags fail quietly. A typo in a property name does not break the page. It just makes the preview wrong with no warning. A few tools cover most of the checking.
Facebook’s Sharing Debugger fetches a page, reports the Open Graph tags it detects, renders the card, and flags errors. It also forces a re-crawl after changes, which matters because platforms cache previews aggressively. Even for sites that never post on Facebook, it approximates what most Open Graph consumers see. LinkedIn’s Post Inspector renders the LinkedIn-specific preview, which can differ from Facebook’s since LinkedIn reads og:image more strictly on dimensions.
The X side is where stale advice circulates, so here is the current state. X’s official Card Validator at cards-dev.twitter.com no longer offers a live preview. The preview functionality was removed, and X did not build a replacement after the rename. The legacy page can still confirm a URL is crawlable, but it will not show a rendered card. The most accurate live check now is X’s own Tweet Composer, which renders the card when a URL is pasted before posting. Third-party validators fill the preview gap for anyone who wants a check outside the app. If a guide tells you to open the old Card Validator to preview your card, that guidance is out of date.
For local work, browser extensions display the parsed tags directly from any URL. For a large site, a headless script that fetches every page’s HTML, parses the meta tags, and flags missing required tags or images that fail to load catches drift that manual checks miss. Validation is not a one-time task: CMS upgrades, theme changes, and plugin updates quietly drop or rewrite these tags, and the long-tail pages nobody re-checks are the ones most likely to break silently.
Frequently asked questions #
Do social meta tags help my Google rankings?
No. They control how a link previews on social platforms and in messaging, email, and reading apps. They are not a Google ranking signal. Their value is presentation and click-through on shares, not search position.
Do I need card tags if I already have Open Graph?
Not strictly. X falls back to Open Graph when card tags are absent and still renders a card. Add twitter:card when you want to force summary_large_image on image-driven content. Card tags without Open Graph, though, often render nothing on non-X platforms.
What image size should I use?
1200 by 630 pixels, a 1.91:1 ratio, as JPG or PNG. That one size renders correctly across Facebook, LinkedIn, X, Slack, Discord, WhatsApp, and iMessage. Keep important text and faces near the center so edge cropping does not remove them.
Why does my old preview still show after I updated the page?
Platforms cache previews. Run the page through Facebook’s Sharing Debugger to force a re-crawl, then confirm the X side in the Tweet Composer.
Where to start #
If a page has nothing, add the four core Open Graph tags first: og:title, og:description, og:image, and og:url. That single set covers the widest reach because nearly every preview surface reads it. Layer card tags on top only where explicit card-type control earns the work, give cornerstone pages a hand-written title and a dedicated 1200 by 630 image, and let the CMS template handle the long tail. Then check the result once in the Sharing Debugger and the Tweet Composer, and re-check after any theme or plugin change. The page has more entry points than its visitors ever notice, and each door reads best when it is written on purpose.