Open Graph Preview & Generator
See exactly how your link will look when shared on Facebook, X/Twitter, LinkedIn, and Discord — then copy the og: and Twitter Card tags to fix it.
<!-- Open Graph --> <meta property="og:title" content=""> <meta property="og:description" content=""> <meta property="og:image" content=""> <meta property="og:type" content="website"> <!-- Twitter / X --> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content=""> <meta name="twitter:description" content=""> <meta name="twitter:image" content="">
Facebook / LinkedIn
example.com
Your page title goes here
Your meta description preview — this is roughly what people see when your link is shared on social platforms.
X / Twitter (summary_large_image)
Your page title goes here
Your meta description preview — this is roughly what people see when your link is shared on social platforms.
example.com
Discord / Slack
Your page title goes here
Your meta description preview — this is roughly what people see when your link is shared on social platforms.
Want to see the real tags on a live page?
Check any URL freeWhy your social preview matters
When someone shares your link, the little card with the image, title, and description is often the only thing that decides whether people click. A bare link with no image gets a fraction of the engagement of a rich preview — and it makes your site look broken or spammy.
That card is controlled entirely by Open Graph meta tags in your page's <head>. Paste your values above to preview the result across platforms, then drop the generated tags into your template. The most common (and most costly) mistake is shipping without an og:image at all.
Frequently asked questions
What is an Open Graph tag?
Open Graph (og:) tags are meta tags in your page’s <head> that tell social platforms what title, description, and image to show when your link is shared. Without them, platforms guess — and usually show a bare, unclickable link.
Why does my link show no image when I share it?
You are most likely missing an og:image tag, or the image URL is broken, too small, or blocked. Facebook, X, LinkedIn, and Discord all read og:image for the preview thumbnail. Add a publicly reachable 1200×630 image.
What size should an og:image be?
1200×630 pixels (a 1.91:1 ratio) is the safe standard that renders well everywhere. Keep it under ~5MB and use JPG or PNG. Avoid tiny images — platforms may drop them and fall back to no preview.
Do I need separate Twitter Card tags?
Not strictly — X falls back to Open Graph tags if Twitter tags are missing. But adding twitter:card="summary_large_image" plus twitter:title/description/image gives you full control over the X preview.
Why does my updated preview still show the old image?
Social platforms cache previews aggressively. After changing your tags, use each platform’s debugger (Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector) to force a re-scrape.
This tool fixes one thing. Want the full picture of a live page?
Analyze any URL — 100 SEO checks, free