Open Graph image preview
Paste a URL and see exactly what Twitter, LinkedIn, Slack, and Facebook will render when someone shares it.
Paste a URL above and click Preview to see what each platform will render.
Why preview your social cards before shipping?
When someone shares your URL on Twitter, LinkedIn, Slack, Facebook, or Discord, the platform renders a preview card from your og:* and twitter:* meta tags. That card is often the only impression of your content most viewers ever see — they scroll past, decide whether to click based on the image and headline, and move on.
A broken card — wrong image dimensions, missing description, old cached preview — silently kills click-through. Catching it before you publish is cheap; catching it after a campaign goes live is not.
The tags that actually matter
- og:title — the headline. Most platforms truncate around 70 chars.
- og:description — the line under the title. Truncates around 200 chars on desktop, ~125 on mobile.
- og:image — the image. Recommended: 1200×630 px, under 1 MB, PNG or JPG, with the most important visual content centered (Twitter and LinkedIn crop the edges differently).
- og:site_name — your brand name. Surfaces above the headline on Slack and Discord.
- twitter:card — set to
summary_large_imagefor the wide-image card (best CTR), orsummaryfor the smaller thumbnail layout.
OG image specs by platform
- Twitter / X: 1200×675 (16:9) for summary_large_image, 144×144 minimum for summary. Max 5 MB. JPG, PNG, WEBP.
- LinkedIn: 1200×627 (1.91:1). Anything smaller renders as a tiny icon. 5 MB max.
- Facebook: 1200×630, same 1.91:1 ratio. Caches preview tags for 30+ days unless you re-scrape via the Sharing Debugger.
- Slack: uses og:image at the page's declared dimensions. Most images render at full message width.
- Discord: embed accent color comes from
theme-colorif set. Otherwise the OG image dominates the embed.
FAQ
Why does my updated image not show on Facebook / LinkedIn yet?
Both platforms aggressively cache OG previews. Facebook caches for ~30 days; LinkedIn for ~7. Force a re-fetch via Facebook's Sharing Debugger or LinkedIn's Post Inspector. Twitter/X re-fetches on every share, no debug step needed.
What's the difference between og:image and twitter:image?
twitter:image only applies on Twitter/X. og:image is the universal fallback — every platform reads it. If you only set og:image, every platform will use it. You only need twitter:image when you want a different image specifically for Twitter (e.g. cropped tighter for the small-summary card).
How big should my OG image file be?
Under 1 MB ideally; 5 MB max. Larger files take too long to fetch on the platform's side and the preview falls back to text-only. Use TinyPNG or Squoosh to compress before uploading.
Can I have a different OG image per page?
Yes — and you should. A blog article's OG image should be its hero image, not your generic site OG image. If you're on a CMS, set the image per post. If you're on a static site, generate per-page <head> tags at build time.
Why is my preview blank?
Most common: og:image is set to a relative URL ('/hero.jpg' instead of 'https://yoursite.com/hero.jpg'). Platforms only accept absolute URLs. Other causes: image is behind authentication, image returns a non-2xx status, image type is unsupported (HEIC, AVIF in some platforms).
Does this tool save my URLs?
No. The page sends one fetch through our server (necessary because browsers block cross-origin reads of arbitrary HTML), parses the <head>, returns the tag values, and forgets the URL. Nothing is stored.
Get the full Web Design Service workspace.
Want this monitored daily across all your projects? Sign up free.