What Is a Social Media Preview and How Do You Control It?

A social media preview is the auto-generated card that appears when a link is shared on platforms like Facebook, X (Twitter), LinkedIn, Slack, or iMessage. It typically includes a title, description, and image pulled from the page's HTML metadata. You control it primarily through Open Graph (OG) tags and Twitter card meta tags in your page's <head>. If you want a custom image rather than whatever the platform scrapes, you generate one at the recommended 1200×630 size and point your og:image tag at it.

What a social media preview actually is

When someone pastes a URL into a post, message, or comment, the platform fetches that page and looks for specific meta tags. It then renders a card using that data. The card is not a screenshot of your page — it's assembled from the metadata you provide.

Where previews appear:

Each platform has its own rendering rules, but they all read from the same underlying standards: Open Graph and Twitter Cards.

How Open Graph and Twitter card tags drive the preview

Open Graph is the protocol Facebook introduced and most platforms now honor. Twitter Cards are X's own system, though X also falls back to OG tags when card tags are absent.

The core tags you need:

<meta property="og:title" content="Your page title" />
<meta property="og:description" content="A short summary of the page." />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your page title" />
<meta name="twitter:description" content="A short summary of the page." />
<meta name="twitter:image" content="https://example.com/og-image.png" />

Key mechanics:

• og:image must be an absolute URL. Relative paths often fail to resolve on scrapers.
• twitter:card set to summary_large_image gives you the wide image format on X. Without it, you may get a small square thumbnail.
• Platforms fall back in order. If Twitter card tags are missing, X reads OG tags. If OG tags are missing, the platform guesses from page content — usually poorly.

Image size and aspect ratio

The widely recommended size is 1200×630 pixels, which is close to a 1.91:1 aspect ratio. This is the ratio Facebook popularized and most platforms crop toward.

Why it matters:

• Too small — some platforms refuse to show the image or upscale it, causing blur.
• Wrong ratio — platforms crop from the center or edges, potentially cutting off text or logos.
• Too large — slower scraping and occasional timeouts; most platforms cap file size (commonly around 5–8 MB, though limits vary).

If your image has important content near the edges, expect it to be trimmed on at least one platform. Keep critical text and logos within a safe central area.

Tools like ogimage.website let you build an image at 1200×630 with templates, custom fonts, and optional app screenshots, then export it as a PNG ready to reference in your og:image tag.

How to test and debug a preview

After you publish your tags, platforms cache the preview. That means changes won't appear immediately, and stale images are one of the most common complaints.

Steps to verify:

1. Use each platform's validator or debugger. Facebook's Sharing Debugger, LinkedIn's Post Inspector, and X's Card Validator each fetch your URL and show what they see.
2. Force a re-scrape. These tools usually include a "scrape again" or "refresh" button that clears the cached version.
3. Check the raw tags. View your page source or use a metadata inspector to confirm the tags are present and the image URL loads directly in a browser.
4. Test in a real share. Paste the link into a private message or draft post to see the live result.

Common reasons previews fail to update

• Missing or malformed tags — a typo in property="og:image" or a relative URL breaks the fetch.
• Cached image — the platform is still showing the old version. Use the debugger's refresh function.
• Image blocked — robots.txt, a login wall, or a CDN rule prevents the scraper from loading the image.
• Slow response — if the image takes too long to load, the platform may skip it.
• Wrong dimensions — an image that's too small or an unusual ratio may be ignored or cropped badly.
• Duplicate tags — multiple og:image tags can cause unpredictable selection.

If a preview still won't update after refreshing, try appending a query string to the image URL (for example, og-image.png?v=2) to bypass caches, then re-scrape.

Putting it together

To control your social media preview: add Open Graph and Twitter card tags to your page's <head>, point og:image at an absolute URL for a 1200×630 image, set twitter:card to summary_large_image, then validate each platform and refresh the cache. Generate the image with a tool like ogimage.website if you want a consistent, on-brand card without designing one from scratch.