Open Graph & Twitter Card Generator
Fill in the fields, watch the Facebook, LinkedIn and X cards render live, then copy the meta tags. Everything runs in your browser — nothing is uploaded.
og:title. Aim for under ~60 characters so it isn't truncated in the card.
og:description. Around 110–160 characters is shown before it's cut off.
og:url — the page's absolute address. Its domain is shown on the card.
og:image — an absolute https URL, ideally 1200×630 px (1.91:1). Loaded live so you can see it; leave blank for a placeholder.
og:site_name — the name of the overall site, shown by some platforms.
twitter:card. Large image is a full-width banner; summary is a small square thumbnail beside the text.
Use website for pages and landing pages; article for blog posts and news.
Facebook / LinkedIn preview
1200 × 630
X (Twitter) preview
Rendered from your fields, not scraped. Polyatic has no backend and a browser can't read another site's HTML, so this preview is an accurate mock-up of your entered values — not a fetch of the live page. Nothing you type is uploaded; the only network call is loading the image URL so you can see it. After deploying, confirm with each platform's own debugger.
What Open Graph tags do
When you paste a link into Facebook, LinkedIn, Slack, WhatsApp, Discord, iMessage or X, the platform sends a crawler to fetch that page and looks in its <head> for a handful of <meta> tags that describe how the link should be presented. That description language is the Open Graph protocol, introduced by Facebook in 2010 and since adopted almost universally. Supply the tags and a bare URL blossoms into a card — an image, a headline, a one-line summary and your domain. Skip them and the same link shows as a plain, unclickable-looking string. Since the card is usually all a reader sees before deciding whether to click, these few lines of markup do a large share of the work of getting a share to convert into a visit.
The core tags, one by one
Five Open Graph tags cover almost every page. og:title is the headline shown in bold — keep it under about 60 characters or the platform truncates it. og:description is the grey summary line beneath; roughly 110–160 characters survive before it is cut. og:image is the absolute URL of the picture (more on sizing below). og:url is the page's canonical absolute address — its domain is what the card prints, and it tells the platform which page all shares should be attributed to even if the sharer used a tracking-tagged link. og:site_name names the overall site, which some layouts show above or below the title. A sixth, og:type, classifies the page — website for most pages, article for dated writing.
Note the attribute name: Open Graph uses property=, not name=. That trips people up because the Twitter tags below use name= instead — copy the wrong one and the crawler quietly ignores the tag.
Twitter Cards and how they layer on top
X (formerly Twitter) reads Open Graph tags too, so you do not repeat everything. What you do add is twitter:card, which chooses the layout: summary_large_image renders a full-width banner above the text, while summary shows a small square thumbnail to the left of it. The optional twitter:title, twitter:description and twitter:image only matter when you want X to show something different from your og: values — a punchier headline, or a differently-cropped image. Omit them and X falls back to og:title, og:description and og:image automatically. This generator emits the full twitter:* set so the snippet is self-contained, but trimming the three text tags when they duplicate the og: ones is perfectly valid.
Getting the image right: 1200 × 630
The image is what stops the scroll, and its dimensions decide whether you get a big banner or a sad thumbnail. The reliable size is 1200 × 630 pixels, a 1.91:1 ratio — Facebook and LinkedIn crop large cards to it, and X's summary_large_image downsizes it cleanly. Below roughly 600 × 315 most platforms demote the image to a small square instead of a banner. Keep the file under about 5 MB, use JPG or PNG (not SVG, which crawlers do not render), and always give og:image an absolute https:// URL — a relative path like /img/x.jpg is ignored because the crawler resolves it with no page context. For the small summary card X takes a centre-cropped square, so keep logos and key text near the middle rather than the edges.
article vs website
Set og:type=website for home pages, landing pages, product pages and tools — anything that is a place rather than a story. Use article for blog posts and news, which unlocks optional companion tags such as article:published_time, article:author and article:section that some readers and platforms surface. The rendered card looks identical either way, so the choice is about semantic correctness and those extra article tags, not appearance — when in doubt, website is a safe default that never causes harm.
Validating on the real page
Here is the honest limit of any generator, this one included: the preview above is drawn purely from the values you typed. It is an accurate mock-up of how each platform lays those values out, but it is not a fetch of your deployed page — a static, backend-free site like Polyatic has no server to make the cross-domain request, and browsers block reading another origin's HTML outright. So once your tags are live, verify them with the platform's own debugger, which crawls the real URL server-side and shows exactly what its bot saw:
| Platform | Debugger |
|---|---|
| Sharing Debugger (developers.facebook.com) | |
| Post Inspector (linkedin.com/post-inspector) | |
| X / Twitter | No live validator since 2022 — check by posting |
| Discord/Slack | Paste the link into a private channel |
The debuggers do one more thing this preview cannot: they bust the platform's cache. Every platform caches your card the first time a link is shared, often for days, so after you change an image or title you must open the debugger and hit Scrape Again (Facebook) or Inspect again (LinkedIn) to force a refresh. X has no manual refresh and rebuilds its cache on its own schedule, so a changed image there can lag by a while. If your card looks stale after an edit, it is almost always the cache, not your tags.
Common mistakes
Using name= for og: tags (or property= for twitter: tags) — the crawler ignores the mismatched attribute. A relative og:image path — it must be an absolute URL. An image too small or the wrong ratio, which downgrades a banner to a thumbnail. Forgetting the tags render nothing until deployed — the crawler reads the served HTML, so tags added by client-side JavaScript after load are often missed. Expecting an instant refresh — the platform cache means edits need a debugger re-scrape to show up.