Open Graph Meta Tags Generator
Generate Open Graph and Twitter Card meta tags with a live link-preview simulation: og:title, og:description, og:image, twitter:card. Copy-paste HTML. Free.
When someone shares your page on Slack, X, LinkedIn, or iMessage, the preview card comes from Open Graph meta tags — and a page without them renders as a bare URL with a random image. This generator produces the complete tag set with a live preview of how the card will look.
It covers og:title, og:description, og:image (with the 1200×630 sizing note), og:url, og:type, and the twitter:card equivalents, and outputs clean copy-paste HTML for your <head>. Tag truncation is simulated so you see what gets cut.
100% in-browser · no upload · no signup · nothing you paste or drop here leaves your device
OG Meta Tag Generator & Social Preview
Generate Open Graph, Twitter Card, and JSON-LD tags. Preview on Facebook, Twitter, LinkedIn, and Discord.
<meta charset="UTF-8"> <title>OG Meta Tag Generator & Social Preview — FreeToolHub</title> <meta name="description" content="Generate Open Graph, Twitter Card, and JSON-LD tags with live previews for Facebook, X/Twitter, LinkedIn, and Discord. Free, browser-based, no signup required."> <!-- Open Graph / Facebook --> <meta property="og:type" content="website"> <meta property="og:url" content="https://freetoolhub.org/og-meta-generator/"> <meta property="og:title" content="OG Meta Tag Generator & Social Preview — FreeToolHub"> <meta property="og:description" content="Generate Open Graph, Twitter Card, and JSON-LD tags with live previews for Facebook, X/Twitter, LinkedIn, and Discord. Free, browser-based, no signup required."> <meta property="og:image" content="https://freetoolhub.org/og-image.png"> <meta property="og:site_name" content="FreeToolHub"> <meta property="og:locale" content="en_US"> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:url" content="https://freetoolhub.org/og-meta-generator/"> <meta name="twitter:title" content="OG Meta Tag Generator & Social Preview — FreeToolHub"> <meta name="twitter:description" content="Generate Open Graph, Twitter Card, and JSON-LD tags with live previews for Facebook, X/Twitter, LinkedIn, and Discord. Free, browser-based, no signup required."> <meta name="twitter:image" content="https://freetoolhub.org/og-image.png"> <meta name="twitter:site" content="@freetoolhub"> <meta name="twitter:creator" content="@freetoolhub">
This tool runs 100% in your browser. All computation happens locally on your device — your input is never uploaded to any server. Results are for reference only.
How a link becomes a rich card — illustrated
When you paste a link into a chat or post, the platform's crawler fetches the page, reads a handful of <meta> tags, and renders a card from them. Open Graph (og:*) is the standard most platforms read; Twitter Card (twitter:*) is the X-specific flavor; JSON-LD is structured data that Google and others use for richer search results. No tags = the crawler guesses a title and a random image, which is why so many shares look broken. If the title is missing or the image fails to load, the card falls back to a plain, un-clickable text link.
og:title, og:description, og:image and og:url are the four tags almost every platform reads. The crawler caches the result, so edits to your page may need a re-scrape before the new card appears.
You want every link to your new article to open as a rich card.
- Title under 60:Keep og:title ≤ 60 chars so it never truncates in cards
- Description 120–160:og:description should say what the page delivers, not keywords
- Image 1200×630:That is the 1.91:1 ratio every major platform crops to
- Test before publish:Preview all four platforms in this tool before you ship the tags
About this Open Graph meta tags generator
This page covers og image size 1200x630, social share preview test, twitter card meta tags, facebook link preview fix — all the same underlying task as Open Graph meta tags generator. The tool above is FreeToolHub's og meta generator embedded in full: every feature works right here, and nothing you process is uploaded to any server.
Frequently asked questions
What size should an Open Graph image be?
1200×630 pixels (1.91:1) is the standard og:image size — under 8MB, JPG or PNG. Keep the subject centered with safe margins: platforms crop edges on some surfaces. The generator notes the exact dimensions and the preview simulates the crop.
Why is my page showing the wrong image when shared?
Almost always caching: platforms cache og:image aggressively for days. After fixing tags, force a re-scrape with the Facebook Sharing Debugger or LinkedIn Post Inspector, add cache-busting query params, and verify the image is publicly reachable (no auth wall, correct content-type, under 8MB).