Open Graph & Twitter Card Generator
Fill in your page details and instantly get a clean block of Open Graph and Twitter Card
<meta> tags, plus a live preview of how your link will look when shared on Facebook,
LinkedIn, Slack, Discord or iMessage. Everything is generated in your browser — nothing is sent to us.
Live preview
Approximate. Each platform renders slightly differently and caches images aggressively — clear caches with each network’s sharing debugger after you update tags.
Meta tags
Paste this inside the <head> of your page.
<!-- Open Graph -->
What Open Graph and Twitter Card tags actually do
When you paste a link into Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage or X (Twitter), those
platforms send a crawler to your page and read a handful of <meta> tags from the
<head> to decide how the link looks. Open Graph (the og: tags, a protocol
Facebook introduced) controls the title, description, image and link type. Twitter Cards (the
twitter: tags) do the same job on X and act as a fallback hint for a few other apps. Without
these tags a shared link is just a bare blue URL; with them it becomes a rich card with a banner image, a
bold headline and a short summary — which is why they have such an outsized effect on click-through.
The biggest single win is the image. A link with a clear 1200×630 banner takes up far more space in a feed or chat than a plain link and reads as more trustworthy, so people are much more likely to click. The title and description then have to earn that click in very little space, so they should be specific and benefit-led rather than a generic page name.
Recommended sizes and lengths
- Image: 1200×630 pixels (a 1.91:1 ratio) is the sweet spot for
summary_large_imageand Open Graph. Keep it under ~5 MB, use PNG or JPG, and host it at an absolutehttps://URL — relative paths do not work for crawlers. - Title: roughly 40–60 characters. Longer titles still work but get cut off with an ellipsis on most cards.
- Description: roughly 55–110 characters previews cleanly; platforms typically trim somewhere around 160–200 characters.
- URL: always use the absolute canonical URL so shares consolidate on one address.
Where the tags go and how to verify them
All of these tags belong inside the <head> element of your HTML, before the closing
</head>. They are invisible to human visitors — only crawlers read them. Order does
not matter, but you should have exactly one of each og: property per page. After you publish,
run your URL through each platform’s sharing debugger (Facebook’s Sharing Debugger,
LinkedIn’s Post Inspector, X’s Card Validator) to force a fresh crawl, because these services
cache the old image and text for days otherwise.
Frequently asked questions
Do I need both Open Graph and Twitter Card tags?
Yes, include both. Most platforms (Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage) read Open
Graph. X reads twitter: tags first and falls back to og: when they’re
missing. Adding both means every place your link is shared shows a proper card. If a value is the same in
both, that’s fine — the duplication is expected and harmless.
My image isn’t showing up when I share. Why?
The most common causes are a relative image path (use a full https:// URL), an image that
is too small (aim for 1200×630), or aggressive caching. Platforms cache the first version they
crawl, so after changing the image run the link through that platform’s sharing debugger to refresh
the cache. Also make sure the image is publicly reachable and not blocked behind a login.
What’s the difference between og:type website, article, and product?
It tells platforms what kind of content the page is, which can unlock richer formatting. Use
website for homepages and general pages, article for blog posts and news (it
pairs with extra tags like published time and author), product for shop item pages, and
profile for a person’s profile. When in doubt, website is a safe default.
Is anything I type here sent to your server?
No. This generator is entirely client-side — the tags and preview are built in your browser with JavaScript. The only network request your browser makes is to load the preview image from the URL you enter, and that goes directly to that image’s host, not to us. We don’t store or log your inputs.
How this tool works: This tool runs in your browser and on our server in real time. Depending on the tool, results are computed directly from the input you provide or retrieved from live, authoritative data sources at the moment you run a lookup. We do not sell your data, and your lookups are kept private — any history shown here is stored only on your device.