A link that looks perfect in a browser tab can still arrive in a group chat with a broken image, a title cut mid word, or no preview at all. That gap exists because none of those platforms read your page's regular title tag for the card. They read a separate set of Open Graph properties, and if those are missing, wrong, or point at an image the platform's crawler cannot fetch, the fallback is usually worse than showing nothing.
Everything here runs locally. The tags you type never leave your browser, which matters if you are drafting a preview for content that has not shipped yet.
Why every platform shows a different card
Facebook, LinkedIn, Slack and Twitter each fetch a page's Open Graph tags independently, cache the result for a period that varies by platform, and then apply their own layout rules on top. Facebook typically favours a large image card with a title of around 100 characters before truncation and a description cut around 300 characters. Twitter uses two card shapes, summary and summary large image, and truncates the title more aggressively at around 70 characters. Slack renders a narrower unfurl that behaves more like Twitter's summary card.
This is why testing on one platform and assuming the rest will match is a common source of surprises. This open graph preview generator renders all four layouts from the same set of tags side by side, so a title that fits comfortably on LinkedIn but clips on Twitter is visible immediately rather than discovered after the link has already been shared. Treat it as a combined facebook link preview and twitter card preview, checked in one pass instead of two separate tools.
The image is where most link previews actually break
og:image is the field most likely to be wrong, and it fails in ways that are invisible until someone else opens the link. A relative path instead of a full URL works fine when you view the page yourself but resolves to nothing when a platform's server fetches it independently. An image behind a login wall, a robots block, or a very large file that times out during the platform's fetch window all produce the same blank grey box in the card.
Aspect ratio matters as much as reachability. Facebook and LinkedIn favour roughly 1.91 to 1, and an image cropped for a square feed post gets awkwardly cropped again when it is forced into that wider frame. Twitter's summary large image card wants a similar wide ratio, while its plain summary card uses a small square thumbnail instead, so the same image can look right on one card and cramped on another.
- Always use an absolute URL for og:image, starting with https, never a relative path.
- Target around 1200 by 630 pixels, which satisfies the wide card on Facebook, LinkedIn and Twitter at once.
- Keep the file under about 5 MB and make sure it is publicly reachable with no login required.
- Leave meaningful margin around any text baked into the image, since it gets cropped differently per platform.
Where the title and description actually truncate
Truncation limits are platform behaviour, not a written standard, and they shift over time as each company redesigns its unfurl layout. The practical numbers that hold up in testing are a title around 60 to 90 characters and a description around 155 to 200 characters, trimmed to whichever platform's card is narrowest for your audience. Because Twitter and Slack tend to be the tightest, writing for their limit first means the wider Facebook and LinkedIn cards will comfortably fit the same text.
This preview shows each platform's card with its own truncation applied, using the title and description exactly as you typed them, so you see the actual cut point rather than relying on a single character count that does not match every layout.
Building an og tags generator that also targets Twitter
Twitter reads its own twitter: namespace first and only falls back to the og: equivalents for any field it cannot find. That makes a plain og tags generator that skips the twitter: fields entirely a partial solution: it works for every platform that reads Open Graph directly, but Twitter's card can still diverge because twitter:card, twitter:title and twitter:image are technically separate properties. A dedicated twitter card preview catches that gap before a reader ever sees it.
This generator fills the Twitter fields automatically from your Open Graph values and lets you override any of them, so you get one shared draft that still allows for platform specific wording where it is worth the extra effort, most commonly a shorter title tuned to Twitter's tighter truncation.
How this open graph preview generator renders the cards
Nothing here calls out to Facebook or Twitter to fetch a real preview, because that would mean sending your unpublished URL to a third party crawler before you are ready. Instead, each card is built from the same layout rules those platforms apply publicly: known width, known truncation point and known image aspect ratio, then rendered with your own tags substituted in.
That makes the preview a faithful simulation rather than a live fetch, and it means it works just as well for a page that has not been deployed yet as it does for one that is already live. Once the page is public, cross checking with each platform's own debugging tool remains worthwhile, since it also confirms the image URL is actually reachable from outside your network. Keeping a social share preview step in your publishing checklist catches the cases a debugging tool only reveals after the link is already live.
| Platform | Title limit | Image ratio |
|---|---|---|
| ~90 to 100 characters | 1.91 to 1 | |
| ~90 to 100 characters | 1.91 to 1 | |
| Slack | ~70 characters | 1.91 to 1 |
| Twitter, large image | ~70 characters | 1.91 to 1 |
| Twitter, summary | ~70 characters | 1 to 1 |
How to use the open graph preview generator
- 1
Enter the core Open Graph fields
Fill in og:title, og:description, og:image and og:url. These four drive every card shown on the right.
- 2
Choose the Open Graph type
Pick website, article, product or profile depending on the page, which some platforms use to adjust the card layout slightly.
- 3
Review each platform's card
Check the Facebook, LinkedIn, Slack and Twitter previews for truncation and image cropping before you publish.
- 4
Copy the generated tags
Copy the finished og: and twitter: meta tags and paste them into the head element of your page.
Related tools worth bookmarking
Sources and further reading
- MDN: Twitter meta tags referenceDocuments the twitter: namespace properties this generator writes alongside the standard Open Graph tags.developer.mozilla.org
- W3C: HTML document metadata specificationDefines how the property attribute used by Open Graph meta tags is structured inside an HTML document.w3.org
- Schema.org: Getting started with structured dataBackground on structured data as the search facing counterpart to Open Graph's social sharing focused tags.schema.org
Frequently asked questions
Common questions about the open graph preview generator.
The most common cause is a relative image path that only resolves correctly inside your own browser session, not from an external crawler. The second most common cause is caching, since Facebook and LinkedIn cache a page's Open Graph data and will keep showing an old image until the URL is resubmitted to their own debugging tool for a fresh fetch.
Around 1200 by 630 pixels is the safest target, since it satisfies the wide card layout used by Facebook, LinkedIn and Twitter's summary large image card without excessive cropping on any of them. Keep the file size reasonable, ideally under a few megabytes, so a slow fetch does not cause the platform's crawler to time out.
No. The cards are built entirely from published layout rules and the tags you type, with nothing sent to any platform. That makes it safe to preview a page before it goes live, since testing with an official debugging tool would otherwise require the page to already be publicly reachable.
Twitter's card layout allocates less horizontal space to the title than Facebook's large image card, so the practical truncation point sits lower, typically around 70 characters against roughly 90 to 100 on Facebook. Writing a title short enough for Twitter usually means it also fits comfortably everywhere else.
Yes, and they serve a different purpose. The standard title and meta description tags are what search engines use in a search result snippet, while og:title and og:description control the social share card. Search engines generally ignore Open Graph tags, so a page needs both sets to look right in both contexts.
Summary large image shows a wide banner style image above the title and description, similar to the Facebook card. Summary shows a small square thumbnail beside the text instead. Large image is the better default for most content, while summary suits a card where the image is secondary to the text, such as a quote or a profile link.