Open Graph Generator, og: Tags with a Live Share-Card Preview
Fill in your title, description, image and URL once and get a clean, standards-compliant Open Graph block, with a faithful Facebook and LinkedIn card rendering live so you know exactly how your link will look before you post it.
What is the open graph generator?
The Open Graph Generator produces escaped og: meta tags, og:title, og:description, og:image with alt, og:url, og:type, og:site_name and locale, so links unfurl richly on Facebook, LinkedIn, Slack and WhatsApp. Live Facebook and LinkedIn card previews and 1.91:1 image guidance catch problems early. Free and browser-based, so drafts stay private.
The GigAI Open Graph Generator produces the exact `og:` markup a link needs to unfurl into a rich preview on Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage and every other platform that reads the Open Graph protocol. You enter the essentials: og:title, og:description, og:image and its alt text, og:url, og:type, og:site_name and locale, plus optional image width and height, and the tool emits properly attribute-escaped `<meta property="og:*">` tags in the right order, ready to paste into your `<head>`. What makes it worth bookmarking is the preview: a pixel-faithful Facebook card and LinkedIn card render your title, description and image exactly as those networks crop, truncate and label them, so you catch a missing image, an over-long headline or a wrong og:type before a single person clicks share. Image guidance flags when your dimensions stray from the recommended 1.91:1 (1200×630) ratio that keeps the large card from being letter-boxed, and gentle length hints keep your title and description inside each network's visible window. Everything runs locally with the browser's own encoders, so unpublished URLs, draft headlines and pre-launch campaign copy never leave your machine, and you can copy the block, download it as an HTML snippet, share a link that reopens the form pre-filled, or undo and redo your edits at will.
- Difficulty:
- Easy
- Typical time:
- ~30s
- Processing:
- 100% browser processing
Last updated
How to use the open graph generator
- 1
Enter the core Open Graph fields
Add your og:title, og:description and the canonical og:url. These three drive the headline, snippet and destination of the share card.
- 2
Add your image and its details
Paste a public https og:image URL, give it descriptive alt text, and optionally set its width and height so the ratio check can guide you to a crisp large card.
- 3
Pick the og:type and site name
Choose website, article, product or profile, set og:site_name and locale if relevant, and leave anything blank to omit that tag. Nothing is invented for you.
- 4
Preview, then copy or download
Flip between the Facebook and LinkedIn cards to confirm the crop, then copy the og: block, download it as an .html snippet, or share a pre-filled link.
What Open Graph Generator includes
Every og: tag from one form
og:title, og:description, og:image (+ alt, width, height), og:url, og:type, og:site_name and og:locale: emitted as one clean, correctly-ordered, paste-ready block with only the fields you fill in.
Live Facebook & LinkedIn cards
A faithful Facebook card and LinkedIn card render as you type, cropping your image and truncating your title exactly as each network does, so the unfurled link looks intentional everywhere.
og:image ratio coaching
Enter your image dimensions and the tool checks them against the 1.91:1 (1200×630) large-card sweet spot, warning before your hero image gets letter-boxed or shrunk to a tiny thumbnail.
Escaped, injection-safe markup
Every property value is HTML-escaped, so quotes, ampersands and angle brackets in your headline or description can't break the tag or open a hole in your template.
Length hints that match reality
Live character hints keep og:title and og:description inside the window Facebook and LinkedIn actually display, so your key words survive the crop instead of trailing off.
Copy, download, share, undo
Copy the og: block, download it as an.html snippet, share a link that reopens the form pre-filled, load a preset, or step through undo/redo, all keyboard-driven and fully local.
Why use our open graph generator
Links that unfurl into rich cards
Correct og:title, og:description and og:image mean your shared URL becomes a clickable card with an image and headline instead of a bare, ignorable blue link.
Catch a broken card before you post
The live Facebook and LinkedIn previews surface a missing image, a cropped headline or the wrong og:type while you can still fix it. Not after the post is already out.
The protocol, right, without reading the spec
You fill in plain fields and get the exact property="og:*" syntax with correct types and namespacing. No more guessing which tags Facebook actually needs.
Private by design
Tags are generated locally in your browser, so unpublished URLs, draft headlines and pre-launch imagery never touch a server or get logged anywhere.
Built for the way you work
From quick one-off fixes to daily workflows, see how people put this tool to use.
- Content marketer
Perfect a post's share card before launch
Draft the og:title and image for a new blog post or announcement and preview exactly how it unfurls on Facebook and LinkedIn, fixing a cropped headline or off-ratio image ahead of time.
- Frontend developer
Add correct og: tags to a page
Generate an escaped, correctly-typed Open Graph block in seconds and paste it into your template or head component instead of hand-writing property attributes and second-guessing the namespace.
- Social / community manager
Fix an ugly link preview
When a URL shares as a plain link with no image, use the tool to produce the missing og: tags, hand them to your dev team, and confirm the fix in the live preview.
- Agency / freelancer
Deliver consistent social markup
Produce standards-compliant og: tags across every client page and share a pre-filled link so anyone can review or tweak the social copy without touching code.
Supported formats
Accepts Form fields, and produces HTML and Open Graph tags, all processed locally in your browser.
- Form fields
- HTML
- Open Graph tags
Frequently asked questions
Use this in a workflow
See how the open graph generator fits into a step-by-step journey with related tools.
Recommended tools
Meta Tag Generator
Generate perfect SEO meta tags, Open Graph and Twitter Card markup with a live Google snippet and social-card preview, copy the ready-to-paste <head> code, 100% in your browser.
Meta Tag Analyzer
Paste a page's HTML to audit its title, description, canonical, robots, Open Graph and Twitter Card tags: with a length score, missing/duplicate checks and a live search & social preview, 100% in your browser.
URL Encoder
Percent-encode text and URLs instantly: pick component mode for query values or full-URL mode to preserve structure, with a per-line batch switch. 100% in your browser, nothing uploaded.
Twitter Card Generator
Generate Twitter Card meta tags for X with a live card preview. Pick summary or large image, set the title, description, image and @handles, then copy the ready-to-paste twitter:* markup. 100% in your browser.
Open Graph Preview
Preview exactly how your link unfurls on Facebook and LinkedIn, paste your page's HTML or type the fields, with a live share card and a plain-English audit of every missing or oversized Open Graph tag. Nothing is uploaded.
Canonical URL Generator
Build a clean rel=canonical tag from any URL: normalise the host, path and query, strip tracking parameters, and copy the ready-to-paste <link> tag, HTTP header and framework snippets, 100% in your browser.
Common problems, solved
Hit a snag? Here are quick fixes for the issues people run into most.
My og:image doesn't appear in the preview.
The card loads the image directly, so og:image must be a fully-qualified, publicly reachable https URL. Not a localhost address, a relative path or a private file. Facebook and LinkedIn also ignore images smaller than 200×200px, so use a 1200×630 image for the large card.
The tags are correct but the live share still looks wrong.
Facebook and LinkedIn cache Open Graph data aggressively. After you deploy new tags, re-scrape the URL with Facebook's Sharing Debugger or LinkedIn's Post Inspector to force a fresh fetch. Your markup is right, the network is just showing a cached copy.
My image is showing as a small square, not a big banner.
That happens when the image is close to square or below the large-card threshold. Use a landscape 1.91:1 image (1200×630 is ideal) and set og:image:width and og:image:height so the platform confidently renders the large layout.
Do I still need Twitter Card tags if I have Open Graph?
X (Twitter) falls back to Open Graph when its own twitter:* tags are missing, so your link will still unfurl. Add Twitter Cards only when you want to pick a specific layout or set the posting account, the Meta Tag Generator covers both if you need them together.
Get the most out of it
Use a 1200×630px (1.91:1) og:image for a crisp, full-width large card on Facebook and LinkedIn.
Always set og:url to the canonical, absolute URL: it's the identity the network uses to de-duplicate and cache the share.
Give og:image an og:image:alt: it improves accessibility and some platforms surface it as the image caption.
Match og:type to the content (article for posts, product for shop pages, website for everything else) so platforms label the card correctly.
Set og:site_name to your brand so the card shows a tidy source line above the headline.
What's new
Recent updates and improvements to the open graph generator.
Initial release: full Open Graph tag generation from one form with live, faithful Facebook and LinkedIn share-card previews, copy/download/share and undo/redo.
Added og:image ratio coaching against the 1200×630 sweet spot, HTML-escaping of every property value, and curated presets (article, product, profile).
Added og:image width/height fields, og:locale support, keyboard shortcuts with an in-tool helper, and refined the LinkedIn card crop to match its current rendering.
Keep exploring
Problems we solve
Definitions
From the blog
Explore categories
Compare formats
Common tasks
Your privacy is built in
Every Open Graph tag is generated locally in your browser using its native encoders. Nothing you type is ever uploaded, stored or logged. Draft headlines, unpublished URLs and pre-launch image links stay on your device, and closing the tab erases them completely.
- Runs in your browser
- No uploads
- Nothing stored
Ready to try the open graph generator?
Free, private and instant. Open Graph Generator runs right in your browser.