Free tool

Open Graph preview: how your link looks on X, LinkedIn, Slack and more

An Open Graph preview shows how a shared link will render as a card, built from your page's og:title, og:description and og:image tags. Type your values (or drop in an image) to preview X, LinkedIn, Facebook, Slack and iMessage cards side by side, check image size and ratio, and copy the finished meta tags.

Updated

Your browser loads the image directly to preview it — we never fetch it.

Stays on your device. The generated tags still use the URL above.

Previews (approximate — each platform changes its layout often)

X (Twitter)large image card
No og:image
Cookie-free analytics with revenue attribution

From example.com

LinkedIn1.91:1 image, title, domain
No og:image

Cookie-free analytics with revenue attribution

example.com

Facebookdomain, title, description
No og:image

example.com

Cookie-free analytics with revenue attribution

See which channels bring paying customers. One script tag, no consent banner, live in two minutes.

Slacksite name, title, description, image

Example

Cookie-free analytics with revenue attribution

See which channels bring paying customers. One script tag, no consent banner, live in two minutes.

No og:image
iMessageimage + title + domain, no description
No og:image

Cookie-free analytics with revenue attribution

example.com

Checks

  • OK: og:title is 46 characters.
  • OK: og:description is 98 characters.
  • Error: og:image is missing. A link without an image gets a fraction of the clicks on every platform.

Meta tags for your <head>

<title>Cookie-free analytics with revenue attribution</title>
<meta name="description" content="See which channels bring paying customers. One script tag, no consent banner, live in two minutes." />
<meta property="og:type" content="website" />
<meta property="og:title" content="Cookie-free analytics with revenue attribution" />
<meta property="og:description" content="See which channels bring paying customers. One script tag, no consent banner, live in two minutes." />
<meta property="og:url" content="https://example.com/" />
<meta property="og:site_name" content="Example" />
<meta property="og:image:alt" content="Dashboard showing visitors and revenue by channel" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Cookie-free analytics with revenue attribution" />
<meta name="twitter:description" content="See which channels bring paying customers. One script tag, no consent banner, live in two minutes." />
<meta name="twitter:image:alt" content="Dashboard showing visitors and revenue by channel" />

Key takeaways

  • Every link card comes from four tags: og:title, og:description, og:image and og:url. X also reads twitter:card; without it you may get a small card.
  • Use a 1200×630 px PNG or JPEG (1.91:1) under about 5 MB, with an absolute https:// URL. SVG doesn't work on the major platforms.
  • Keep important text and logos in the center of the image — platforms crop the edges differently.
  • Platforms cache previews. After changing tags, re-scrape with the platform's own debugger (Facebook Sharing Debugger, LinkedIn Post Inspector).

Which meta tags control link previews?

TagUsed byWhat to put in it
og:titleAll platformsThe headline for the card. Can differ from the title tag — no need for the brand suffix. Aim for under ~60–70 characters.
og:descriptionFacebook, X, Slack, Discord (not LinkedIn's feed or iMessage)One or two sentences, ~100–160 characters.
og:imageAll platformsAbsolute URL to a 1200×630 PNG or JPEG.
og:image:altX, some screen readersA plain description of the image.
og:urlAll platformsThe canonical URL, so shares of variants group together.
og:site_nameFacebook, SlackYour brand name.
twitter:cardXsummary_large_image for a full-width image, summary for a small square thumbnail.
twitter:siteXYour @handle, credited on the card in some views.

X falls back to the og: tags when twitter:title, twitter:description or twitter:image are missing, so you only need twitter:card (and optionally twitter:site) on top of Open Graph. The generator writes both sets anyway, which costs nothing and avoids edge cases.

How to preview and fix your link card

  1. 1.Type the title, description and canonical URL you want the card to show.
  2. 2.Paste your og:image URL — your browser loads it directly — or choose a local image file to try a design before uploading it. The checks report its real pixel size and ratio.
  3. 3.Compare the five previews. Notice which ones show the description (LinkedIn and iMessage mostly don't) and where the image gets cropped.
  4. 4.Copy the generated tags into your page's <head>, or into your framework's metadata API (Next.js metadata, Astro head, a WordPress SEO plugin).
  5. 5.Publish, then re-scrape the URL in each platform's debugger so they drop the old cached card.

Image sizes per platform

PlatformRecommended imageNotes
Facebook1200×630 (1.91:1)Below 600×315 shows a small thumbnail. Cached aggressively; use the Sharing Debugger to refresh.
LinkedIn1200×627 (1.91:1)Shows image, title and domain. Refresh with Post Inspector.
X (Twitter)1200×628 for large cards; 1:1 for summary cardsNeeds twitter:card=summary_large_image for the big image.
Slack1200×630Unfurls show site name, title, description and the image; workspace admins can disable unfurls.
iMessage1200×630Uses og:title and og:image; long titles are cut after about two lines.
Discord, WhatsApp, Telegram1200×630All read Open Graph; WhatsApp is commonly reported to need images under ~300 KB for reliable previews.
Platform behavior as of October 2026. Layouts change frequently, so the previews above are approximations.

Common Open Graph mistakes

  • Relative image URLs. og:image=/og.png is ignored by most crawlers. Always use the full https:// URL.
  • Images blocked to crawlers. If robots.txt, a login wall or bot protection blocks facebookexternalhit, Twitterbot or LinkedInBot, the card comes out blank.
  • SVG or huge images. SVG isn't supported; multi-megabyte PNGs time out. Export a compressed PNG or JPEG.
  • The same image for every page. It works, but per-page images (generated from the title) get noticeably more clicks.
  • Tags injected only by client-side JavaScript. Most preview crawlers don't run JavaScript, so tags must be in the server-rendered HTML.
  • Forgetting the cache. Changing tags doesn't change already-cached previews until the platform re-scrapes the URL.

Why this tool doesn't fetch your URL

Fetching arbitrary user-supplied URLs from our servers would make the tool a proxy anyone could point at internal addresses, so everything here works from what you type. The trade-off is that you paste your values rather than a link. To check what crawlers see on a live page, use the platforms' own debuggers, or view the page source and search for og:.

After the click

A better card earns more clicks; what matters is what those visitors do next. Tag shared links with the UTM builder, and VisitTrack will show visits, signups and revenue per channel — cookie-free, with social referrers like t.co and lnkd.in correctly grouped as social. For the search-result version of the same problem, use the SERP snippet preview.

Frequently asked questions

What size should an Open Graph image be?

1200×630 pixels (a 1.91:1 ratio) works on Facebook, LinkedIn, X, Slack and iMessage. Use PNG or JPEG, keep it under about 5 MB (smaller is better for WhatsApp), and keep text away from the edges, which some platforms crop.

Why isn't my link preview updating?

Platforms cache link previews, often for days. After changing your tags, re-scrape the URL with the Facebook Sharing Debugger or LinkedIn Post Inspector; for X and Slack, sharing the URL with a harmless query string such as ?v=2 forces a fresh fetch.

Do I need Twitter card tags if I have Open Graph tags?

Only twitter:card is really needed. X falls back to og:title, og:description and og:image when the twitter: equivalents are missing, but without twitter:card=summary_large_image you may get a small thumbnail instead of a large image.

Why does my link show no image?

Usually the og:image URL is relative, the image is SVG, it's too large or slow to download, or a crawler like facebookexternalhit or LinkedInBot is blocked by robots.txt, a firewall or a login. The tags must also be in the server-rendered HTML, not added later by JavaScript.

How long should og:title and og:description be?

Keep og:title under roughly 60–70 characters and og:description around 100–160 characters. Platforms truncate at different points, and LinkedIn and iMessage often don't show the description at all, so put the essential message in the title and image.

Can I check Open Graph tags without sharing the link?

Yes. Paste your values into this preview to see approximate cards for five platforms, or use each platform's debugger to see exactly what its crawler reads from a live URL. Neither requires actually posting.

Related tools and guides

See which channels actually bring paying customers

VisitTrack is cookie-free analytics with revenue attribution built in. One script tag, no consent banner, live in two minutes. 14 days free, no card required.

Start free — no card requiredSee the live demo