Open Graph Generator
Generate Open Graph and Twitter Card meta tags with a live share preview, so your links look right on Facebook, LinkedIn, Slack, and X.
- Free, no account
- No watermark
- No usage limit
About the Open Graph Generator
This builds the Open Graph and Twitter Card meta tags that decide how your link looks when someone drops it into Slack, a Facebook post, a LinkedIn share, an iMessage, or an X reply. Free, instant, and it all happens in your browser. The difference is on the right side of the screen: it draws the actual share card as you type, and reshapes it to match the card style you pick.
That preview is the whole reason this exists. Most generators hand you a wall of tags and leave you to find out later whether the card looks right. You paste them, deploy, share the link, and only then discover the image is the wrong shape or your headline got sliced in half. Worse, by that point the platform has cached that bad version, so fixing it means hunting down a debugger and forcing a re-scrape. Here you watch the card come together first, before a single tag leaves your machine.
The other quiet win is escaping. Type a title with an ampersand in it, something like Design & Build, and plenty of generators will happily hand you a tag that breaks right at the &. This one converts the characters that would otherwise wreck the markup into safe HTML entities for you, so the full title survives intact and you never escape anything by hand.
How to use
- Enter your title. This is
og:title, the bold line on the card. Keep it near 60 characters so it does not truncate mid-word. It does not need to match your page<title>, and often it should read punchier. - Write a description. One or two sentences. Front-load the point, because most platforms only show two to four lines before cutting off.
- Paste the canonical URL. The clean version you actually want shared, no
?utm_source=tracking junk hanging off the end. - Add an image URL. Use a full
https://address, not a relative path like/preview.png. Aim for 1200x630. The preview updates the instant you paste it, and if the URL is dead it tells you so instead of showing a blank box. - Fill the optional fields if you have them. Site name puts your brand above the title, and an X handle fills in
twitter:siteandtwitter:creator. Leave them empty and the tool just skips those tags, so you get a clean block with no dangling empty attributes. - Set the two dropdowns.
og:typeis usuallywebsitefor a normal page orarticlefor a blog post. The Twitter card picks between a small square and the big banner. The preview reshapes to whichever you choose. - Copy and paste. Hit Copy tags and drop the block inside the
<head>of your page. Clear wipes it and starts over.
The image is what people actually click
Every field matters, but the picture is what decides whether someone stops scrolling. Get it wrong and even a perfect headline gets skipped.
Use 1200x630 pixels. Nothing in the Open Graph protocol says so, it is guidance from the platforms that read the tags, Facebook's own docs being where the number comes from. That ratio, roughly 1.91 to 1, fills the large card on Facebook, LinkedIn, and X without ugly letterboxing or a hard crop. Drop below 600x315 and Facebook may refuse the big card entirely and shrink your image to a sad little thumbnail. There is no reward for going enormous either, a 4000px image just makes the scraper work harder for the same result.
Keep the important stuff centered. Different platforms crop to different shapes, and the small square card slices hard to the middle, so a face parked near an edge can vanish on one platform while looking fine on another, so anything you need seen belongs in the middle. Keep the image on the same https origin too, mixed content (a secure page pointing at an insecure image) gets blocked by several platforms without a word of warning.
Why your card shows the wrong version
This one wastes more time than anything else, so read it before you start panicking. You update your tags, share the link, and the preview shows last week's title. Or no image. Your tags are almost certainly fine. The platform cached the old scrape.
Every big platform saves the preview it built the first time your URL got shared. That caching is sensible, it stops the scraper from hammering your server on every single post, but it also means editing your tags changes nothing until the cache expires or you force a refresh. This is the number one reason people swear Open Graph is broken when it is working perfectly.
The fix is each platform's own debugger, which re-scrapes on demand and shows you exactly what it reads:
- Facebook has the Sharing Debugger. Paste the URL, click Scrape Again, and it refreshes the cache and lists every tag plus any warnings.
- LinkedIn has the Post Inspector, same idea, forces a fresh crawl.
- Slack and Discord cache too, but for a shorter window, so re-posting after a few minutes usually picks up the change.
Run the Facebook debugger even if you never touch Facebook. It is the most thorough free tag inspector around, and it flags a missing image or a broken URL before your audience ever sees the mistake.
Picking a Twitter card
X reads its own twitter: tags, and the one that changes everything is twitter:card. It has two layouts worth caring about. summary is a small square image on the left with the text beside it, good when your image is not a proper wide banner. summary_large_image is the full-width version with the picture on top, and honestly it is what you want most of the time, which is why the preview here starts on it.
Skip the twitter: tags and X falls back to your Open Graph tags and still builds a decent card. But it defaults to the smaller layout and it will not credit your handle. Setting the card type and your handle explicitly costs two extra tags and gets you the big banner with your @name on it.
Frequently asked questions
What happens if I skip og:image entirely?
The platform goes hunting through your page and grabs an image by size and position, which is how people end up with their logo, a random avatar, or an ad banner as the "preview." It is the worst of the fallbacks, and it is completely out of your control. Even a plain, on-brand image beats letting the scraper guess.
Should og:title match my page title tag?
No, and they usually should not. Your <title> is tuned for Google, keyword-first and specific. Your og:title is aimed at a person deciding whether to tap a link in a crowded feed, so it can be shorter and more direct. You want the two to read differently.
Do I still need this if I'm on WordPress or Next.js?
If your platform already outputs Open Graph tags, let it. Yoast and Rank Math on WordPress generate them per page, and Next.js has a metadata export with an openGraph object that does the same at build time. Pasting static tags on top of those just creates duplicates, and duplicate image tags confuse some scrapers. Use this tool to see the exact shape of the tags you are aiming for, then wire the same values into your platform so every page gets them automatically.
Can I paste a title with quotes or emoji in it?
Go ahead and paste it raw. The straight double quote is the one that quietly breaks things, because og:title sits inside a content="..." attribute and a loose " closes that attribute early and mangles every tag after it. The tool encodes that for you, so the quote lands in the card instead of wrecking the output. Emoji are the opposite case, they need no encoding and pass straight through, so Ship it with a rocket on the end shows up exactly as typed. Apostrophes get encoded too, so a name like Ken's Guide is safe as well.
Which og:type should I pick?
For most pages, a homepage, a landing page, a tool, use website. For blog posts and news with an author and a date, use article. The others (product, profile, video.other, music.song) exist for richer structured data you would have to supply separately, so ignore them unless you actually have that data. When unsure, website is always valid, and it is what the tool starts on.
Does anything I type get uploaded?
No. The tags are assembled locally and the preview renders locally. The only network request that ever fires is your own browser fetching the image URL you pasted, purely so it can show the picture in the card. No server call, no logging, nothing stored. Close the tab and it is all gone.
What is the minimum set of tags I actually need?
Four, and this is the one list on the page that is a specification rather than advice. The Open Graph protocol at ogp.me defines og:title, og:type, og:image and og:url as required basic metadata, and everything else in it, og:description and og:site_name included, sits under optional metadata. Optional is not the same as skippable: leave the description out and the platform scrapes whatever body text it can find, and the result is a coin flip. What no platform does is show you a blank card. Miss a required tag and it guesses that one from the page instead, which is the same fallback described further up, so the tags are how you take the choice back rather than a switch that turns the preview on.