Open Graph & Twitter Card Generator
Free Open Graph & Twitter Card Generator, see your link's social card before you ship it
Fill in a page's title, description, image and URL and get correctly escaped Open Graph and Twitter Card meta tags to paste straight into your head, alongside a live preview of exactly how the link will look when it is shared on Facebook, LinkedIn and X. The preview updates as you type, so you can fix a title that overflows or an image that crops before it goes live, and the built-in checks flag the mistakes, like a relative image URL, that silently break the card. Nothing is uploaded; the tags are built in your browser.
- 100% free
- No sign-up
- Nothing uploaded
- Runs in your browser
When someone shares a link to your page, on a feed, in a chat, in a Slack channel, the platform does not show the raw URL. It shows a card: a big image, a title and a short description pulled from special meta tags in the page's head called Open Graph and Twitter Card tags. Get those tags right and your link arrives as a polished, clickable preview that stands out in a stream of plain text. Get them wrong, or leave them out, and the same link shows up as a bare URL or a broken card with a missing image and the wrong title, which reads as careless and quietly costs you clicks on every share. The trouble is that the tags are invisible: you write them, you deploy, and you have no idea how the card actually looks until someone shares it in the wild, by which point the truncated title or the sideways-cropped image is already out there. The mistakes are specific and repeatable, a relative image path that no crawler can fetch, a missing card type that downgrades a full-width image to a thumbnail, a title two words too long, an unescaped quote that breaks the tag, and all of them are invisible in the source. This tool makes them visible. It builds the tags for you, escaped and in order, and shows a live preview of the resulting card for both major platforms, so you catch the problem on your screen instead of in someone else's feed. The page is free and public; you sign in only to copy the tags out.
What it does, and why it's built this way
What Open Graph and Twitter Card tags do
Open Graph is a small set of meta tags, og:title, og:description, og:image, og:url and a few more, that Facebook originally defined and that almost every platform now reads to build a link preview: LinkedIn, WhatsApp, Slack, Discord, iMessage and more all use them. Twitter Cards are X's parallel set, twitter:card, twitter:title and so on, with one extra decision that matters a lot: the card type. Choose summary_large_image and your link gets a full-width image that dominates the timeline; leave it out or choose summary and you get a small square thumbnail that is far easier to scroll past. This tool writes both families of tags from one set of inputs, so you fill the details in once and get a complete, consistent set covering every platform that reads either standard. It emits only the tags that have values, in a sensible order, so what you paste is clean rather than padded with empty tags, and it defaults the Twitter card to the large-image type because that is what earns the click.
The preview is the point
The reason social tags go wrong so often is that they are invisible until the moment they are shared, and that moment is too late to fix them. This tool removes the guesswork by rendering the card as you type. You see the Facebook and LinkedIn style card, with the image on top and the host, title and description below, and you see the X card in whichever type you have chosen, so you can watch a title get clipped at two lines, or an image with the wrong shape get cropped, and adjust before you ever touch your code. The image in the preview is your real image URL loaded live, so if the URL is wrong or the host blocks it, the preview shows the failure instead of a false success. Seeing the actual card is the difference between hoping the tags are right and knowing they are. It is the same verify-with-your-eyes idea that runs through these tools: do not just generate the output, show the person what it will really do.
Correct, escaped tags, checked for the silent mistakes
Building the tags by hand invites a specific class of bug: a title with a quotation mark or an ampersand in it, pasted straight into a content attribute, breaks the tag and can swallow everything after it. This tool escapes every value properly, so an apostrophe in a title or an ampersand in a company name can never corrupt the markup. On top of that it runs a set of checks and tells you, in plain language, about the problems that will not show up as an error but will ruin the card: an image URL that is relative rather than absolute, which no social crawler can fetch; a title long enough to be truncated; a missing image that leaves a thin text-only card; a large-image card paired with an image of the wrong proportions. Errors are separated from softer warnings, so you know what will actually break versus what merely could look better. Everything is generated in your browser and nothing you enter is uploaded or stored, and the whole page is free; the only account-gated step is copying the finished tags out.
How to use it
- 1
Enter the page details
Fill in the title, description and the page's full URL. The title and description fields show a live character count against the length the cards display, so you can keep them inside the window that renders in full rather than getting cut off.
- 2
Add an absolute image URL
Paste the full https:// URL of your share image, ideally around 1200 by 630 pixels for the large card, plus a line of alt text. The preview loads the real image immediately, so you can confirm it exists, is public, and is the right shape before you rely on it.
- 3
Pick the card type and handles
Choose the Twitter card type, large image for maximum impact or summary for a compact card, and optionally add your site and author @ handles so X can attribute the card. Set the Open Graph type, usually website or article, and the site name.
- 4
Check the preview, then copy the tags
Read the two card previews and clear any warnings the tool raises. When the card looks right on both platforms, sign in once and copy the generated meta tags, then paste them inside the <head> of your page.
Common mistakes
Using a relative image URL
An og:image set to a relative path like /images/card.png cannot be fetched by a social crawler, which only sees an absolute address, so the card renders with no image at all. Always use the full https:// URL to the image. This tool flags a relative image URL as an error and its live preview shows the missing image, so the mistake is impossible to miss.
Leaving out the large-image card type
Without twitter:card set to summary_large_image, X falls back to a small square thumbnail that is far easier to scroll past than a full-width image. Choose the large image card type, the default here, whenever you have a good landscape image, so your link claims the space it deserves in the timeline.
Writing a title or description that overflows
Cards truncate a long title at around 60 to 70 characters and a description at around 200, usually cutting off the most persuasive part. Watch the live character counts and the preview here, which clip exactly as the real cards do, and trim the copy so the whole message survives the crop rather than trailing off into an ellipsis.
Shipping the tags without ever seeing the card
Because the tags are invisible in the page source, it is easy to deploy them and assume they work, only to discover a broken card when a colleague shares the link. Preview the card first, here or in a platform's own debugger after publishing, and re-scrape the URL in that debugger so the platform refreshes its cached version of your tags.
Frequently asked questions
- What are Open Graph tags?
- Open Graph tags are meta tags in a page's head, such as og:title, og:description and og:image, that tell social platforms how to display the page when it is shared. Facebook created the standard, and it is now read by LinkedIn, WhatsApp, Slack, Discord, iMessage and many others, so one set of Open Graph tags controls the link preview across almost every platform except the parts of X that use its own Twitter Card tags, which this tool also generates.
- What image size should I use for a social card?
- For the large image card, aim for 1200 by 630 pixels, a ratio of about 1.91 to 1, which fills the card cleanly on both Facebook and X without cropping. Keep it under about 5 megabytes and use a common format like PNG or JPEG. Smaller images or unusual shapes get cropped awkwardly or cause platforms to fall back to the small card, so matching the recommended dimensions is the single easiest way to make the card look intentional.
- Why does my card not update after I change the tags?
- Platforms cache the tags they scraped the first time a URL was shared, so a change will not appear until that cache refreshes. Use the platform's own debugging tool, Facebook's Sharing Debugger or X's Card Validator, to re-scrape the URL and force a refresh. This tool previews the card from your current inputs instantly, but once a page is live, clearing the platform's cache is the step that makes your updated tags show.
- Do I need both Open Graph and Twitter Card tags?
- It is best to include both. X will read Open Graph tags as a fallback, but the dedicated Twitter Card tags give you control over the card type and let you attribute the card to your site and author handles. Since this tool generates both families from the same details at no extra effort, there is no reason not to include both and have every platform display your link exactly as you intend.
- Are special characters in my title handled safely?
- Yes. Every value is escaped for safe use inside an HTML attribute, so a quotation mark, an apostrophe, an ampersand or an angle bracket in your title or description cannot break the meta tag or swallow the markup that follows it. You can paste a title exactly as written, punctuation and all, and the generated tags will be valid and correct.
- Is the generator free and private?
- Yes to both. The tool and all of its guidance are free, and the tags are built entirely in your browser, so the page details you enter are never sent to a server or stored against your account. The preview loads your image directly from its URL in your own browser. A free account is required only to copy the finished tags out, which keeps the public tool from being scripted against at scale.
Need this done properly, at scale?
The tool handles the one-off. When it's a system you're building, that's the paid version of the job, and we do that too.
SEO Services