When someone shares your link on Facebook, LinkedIn, Slack or Discord, the
preview card they see is built from the Open Graph meta tags in your page’s
<head>. This tool shows that card live as you type and generates the exact
og: tags to copy and paste — so you can check the result before publishing
rather than after the link is already out in the wild.
How it works
Open Graph is a metadata protocol (originally from Facebook) that lets any page declare how it should appear when shared. Crawlers read four core properties:
| Tag | Purpose |
|---|---|
og:title | The card headline |
og:description | The supporting line under the title |
og:url | The canonical link the card points to |
og:image | The thumbnail or large preview image |
You fill in those values; the preview re-renders instantly and the tool emits the
matching <meta property="og:..." content="..."> lines. Paste them into your
<head> and crawlers will build the same card you see here.
Example
For a blog post you might enter an og:title of “How we cut our build time in
half”, an og:description summarising the post, the canonical og:url, and an
og:image URL. The tool then generates:
<meta property="og:title" content="How we cut our build time in half" />
<meta property="og:description" content="A practical write-up..." />
<meta property="og:url" content="https://example.com/blog/faster-builds" />
<meta property="og:image" content="https://example.com/og/faster-builds.png" />Use a 1200×630 image (a 1.91:1 ratio) for the cleanest large card without cropping, and keep titles under about 60 characters so they aren’t trimmed. Everything runs locally in your browser; nothing you enter is uploaded.