IZN Tools

Open Graph Generator

Write og: and twitter: tags and preview the card as you type.

PREVIEW
1200 × 630
ExampleSmall tools that do one thing, fast100 free tools for developers and marketers. Everything runs in your browser.
<meta property="og:title" content="Small tools that do one thing, fast" />
<meta property="og:description" content="100 free tools for developers and marketers. Everything runs in your browser." />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:site_name" content="Example" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Small tools that do one thing, fast" />
<meta name="twitter:description" content="100 free tools for developers and marketers. Everything runs in your browser." />
<meta name="twitter:image" content="https://example.com/og.png" />
Looks good
Computed on this device
Related
Schema Markup GeneratorRobots.txt GeneratorUTM Link BuilderMeta Title GeneratorSoonMeta Description GeneratorSoonMeta Tag AnalyzerSoon

What the tags do

Open Graph turns a bare URL into a card with a title, a description and an image. Without it, a link shared in Slack, WhatsApp, LinkedIn or a group chat is just a blue string that nobody clicks. It is one of the highest-leverage bits of markup on a page, and it is invisible on the page itself — which is exactly why it goes stale unnoticed.

The limits worth respecting

| Tag | Practical limit | What happens past it | | --- | --- | --- | | og:title | ~60 characters | Cut off mid-word in the card | | og:description | ~155 characters | Truncated with an ellipsis | | og:image | 1200 × 630 | Under 600px wide drops to the small layout |

These are not from the specification — they are measured platform behaviour, and they shift. The counters above warn early rather than exactly.

The absolute URL rule

og:image, og:url and every other URL-valued tag need a full absolute address. Relative paths are ignored without any error message, and the failure looks identical to having no tag at all. If a card suddenly renders as plain text after a deploy, check whether the image path lost its origin.

Caching is the real workflow

Every platform scrapes once and caches hard. The order that saves time:

  1. Publish the tags.
  2. Run the URL through the platform's own debugger to force a re-scrape.
  3. Only then share the link anywhere.

Sharing first and fixing after means the wrong card is already cached in the places that matter, and some platforms will not refresh for days.

Questions

Why does my link preview show the wrong image?+

Almost always caching. Facebook, LinkedIn and Slack each keep their own copy of the scrape and will keep serving a stale card long after you fix the tag. Every platform has a debugger that forces a re-scrape — use it rather than assuming the tag is wrong, because the tag usually is not.

Does og:image accept a relative path?+

No. It must be an absolute URL with a scheme and host. A relative path is silently ignored, which is why a card renders as a bare text link even though the file exists and loads fine on the page itself.

What size should the image be?+

1200 × 630 covers every major platform at a 1.91:1 ratio. Below 600 pixels wide, several networks refuse to use a large card and fall back to the small square layout. Keep important content away from the edges — different platforms crop differently.

Do I need both og: and twitter: tags?+

X falls back to Open Graph when its own tags are missing, so the twitter: block is strictly optional except for twitter:card, which selects the layout. Duplicating title and description does no harm and lets you write a different headline for one network if you want to.