kittokit
EN
` inside title or description are backslash-escaped so the inline script block does not terminate early."}},{"@type":"Question","name":"How does the OG-image generator work?","acceptedAnswer":{"@type":"Answer","text":"Pure-client. You pick one of the five brand color presets (Graphite, Porcelain, Sunset, Forest, Midnight) or set custom values, type the image title and an optional subtitle, click 'Generate image'. The browser renders the 1200×630 PNG via the Canvas2D API in memory and offers it as a download. There is no server call, no paywall, no account — unlike robolly or previewlinks. You then host the result on your CDN and reference the URL in `og:image`."}},{"@type":"Question","name":"Why no live URL-fetch debugger in this tool?","acceptedAnswer":{"@type":"Answer","text":"A live debugger would have to fetch the remote URL server-side, because browser CORS forbids client scripts from reading arbitrary domains. Server fetch means server code, server code means server logs and a potential tracking surface. That conflicts with the site's privacy-first stance. For live debugging after deploy, use the official tools: Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector. The generator covers the writing side, the validators cover the reading side — both complement each other."}}]},{"@type":"HowTo","name":"OpenGraph Generator — 6 Platforms, JSON-LD Article","step":[{"@type":"HowToStep","position":1,"name":"Paste text or code","text":"Paste your content into the input field or type directly."},{"@type":"HowToStep","position":2,"name":"Instant processing","text":"The tool processes your content immediately and shows the result."},{"@type":"HowToStep","position":3,"name":"Copy result","text":"Copy the result to your clipboard with one click."}]}]}
DEV TOOL

OpenGraph Generator — 6 Platforms, JSON-LD Article

Compose tags visually, check per-platform limits live, render an OG image in the browser, and emit Schema.org Article JSON-LD from the same tab — everything in-page, no upload, no account.

Runs locally in the browser — snippets are emitted in memory, nothing is uploaded.

Mode

Core tags

og:type

X (Twitter Card)

twitter:card

Article-specific

Load image preview

File stays local — loaded only as preview in the browser, no upload.

Platform preview

Six platforms, each with its own layout and limit characteristics.

News-feed unfurl with image-on-top layout. Title cuts around 60 chars.

Example Magazine

Brand Story — New episode every Thursday

A weekly series on the build, crisis and turning-point moments of real companies.

Within limits · Facebook truncates title around 60 characters in the news-feed unfurl. Recommended image 1200×630, minimum 600×315.

HTML snippet

Paste into the `<head>` of your page.

<!-- OpenGraph -->
<meta property="og:title" content="Brand Story — New episode every Thursday">
<meta property="og:description" content="A weekly series on the build, crisis and turning-point moments of real companies.">
<meta property="og:url" content="https://example.com/articles/episode-12">
<meta property="og:image" content="https://example.com/og/episode-12.png">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Example Magazine">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="Lena Albrecht">
<meta property="article:section" content="Magazine">
<meta property="article:published_time" content="2026-05-17">

<!-- Twitter Card / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Brand Story — New episode every Thursday">
<meta name="twitter:description" content="A weekly series on the build, crisis and turning-point moments of real companies.">
<meta name="twitter:image" content="https://example.com/og/episode-12.png">
<meta name="twitter:site" content="@example">

<!-- Theme color -->
<meta name="theme-color" content="#1A1A1A">

<!-- Canonical -->
<link rel="canonical" href="https://example.com/articles/episode-12">

How It Works
  1. 01

    Paste text or code

    Paste your content into the input field or type directly.

  2. 02

    Instant processing

    The tool processes your content immediately and shows the result.

  3. 03

    Copy result

    Copy the result to your clipboard with one click.

Privacy

All calculations run directly in your browser. No data is sent to any server.

An editor for `<meta property="og:*">` tags with six platform previews side by side. The generator shows how Facebook, X, LinkedIn, Slack, Discord and iMessage will unfurl your link, with per-platform character limits. The second tab renders a 1200×630 PNG via Canvas2D; the third builds matching Schema.org `Article` JSON-LD with XSS-safe inline-script output.

01 — How to Use

How do you use this tool?

  1. In the editor tab, fill in title, description, URL, image URL and site name. The character counter shows per-platform limits.
  2. Pick og:type (website / article / product). For `article`, author, section and date fields appear.
  3. Choose the Twitter Card mode (`summary` or `summary_large_image`) and optionally enter Twitter handles.
  4. Click through the platform preview strip — each platform shows its own layout snapshot and validation status.
  5. Copy the HTML snippet or download as `.html`. In the OG-image tab, pick a brand color and render the 1200×630 PNG. In the JSON-LD tab, copy the matching Schema.org Article markup.

What does the OpenGraph generator do?

The generator is an editor for the meta tags social platforms read when someone shares your link. You type title, description, URL and image; the generator emits the ready <meta property="og:*"> and <meta name="twitter:*"> tags for the <head>. Six platform previews (Facebook, X, LinkedIn, Slack, Discord, iMessage) show simultaneously how the link card will look on each channel, including per-platform character-cap warnings.

Three tabs cover the full workflow:

  • Editor + preview — fill in tag fields, watch six platform cards update live, copy the snippet.
  • Generate OG image — render a 1200×630 PNG from a brand color and title in the browser, download.
  • Article JSON-LD — Schema.org Article markup for AI-citation boost, with XSS-safe inline- script output.

Everything in the browser. No upload, no account, no cookie banner.

Which platform previews are built in?

Six destinations, each with its own layout shape and limit configuration:

  • Facebook — news-feed unfurl with image on top. Title truncates around 60 characters.
  • X (Twitter Card) — summary_large_image with domain pill at the bottom. Title cap 70, description 200.
  • LinkedIn — business layout with aggressive caching. Trigger LinkedIn Post Inspector once manually after deploy or LinkedIn keeps showing the old cache.
  • Slack — bot unfurl with small left-side thumb and site-name eyebrow.
  • Discord — embed layout with a colored left rail matching the theme-color value.
  • iMessage — rich-link bubble. iMessage requires HTTPS and a server-rendered <head> — client-side-injected OG tags are ignored. The generator surfaces this in the validation note.

metatags.io covers six platforms but misses Discord and iMessage. opengraph.xyz and share-preview are debuggers, not generators. robolly caps at Facebook + X. We combine all six platforms in one editor — the direct value vs the established tools.

How does the per-platform validation work?

Each platform has its own hard limits for title and description — the generator emits one status dot per platform:

PlatformTitle maxDescription maxImage aspect
Facebook601101.91:1
X (Twitter)702001.91:1 or 1:1
LinkedIn1502001.91:1
Slack2003001.91:1
Discord25640961.91:1
iMessage1002001.91:1

On overflow, the dot turns red and the hint text names the exact delta (“Title exceeds 70 chars (78)”). For iMessage, the generator additionally checks that og:image and og:url start with https:// — Apple Messages ignores HTTP links during rich-link rendering.

How does the OG-image generator work?

The second tab renders a 1200×630 PNG directly in the browser via the Canvas2D API. You pick one of five brand-color presets or enter custom hex values; the title is automatically wrapped over a maximum of three lines; an optional subtitle complements the site-name or eyebrow info. Clicking ‘Generate image’ draws on an off-screen canvas and returns the result as a PNG Blob that you can download immediately.

Pure-client means no server, no paywall, no account. robolly, previewlinks and Pixola do the same server-side — gated and with telemetry. Here it happens locally, no external roundtrip. You then host the PNG on your CDN and reference the URL in the og:image field.

What does the Article JSON-LD tab do?

Schema.org Article JSON-LD complements OpenGraph: OG describes how the link preview looks, JSON-LD describes the content structurally (author, publication date, section, publisher). Search engines and AI assistants prefer pages that deliver both — the Princeton GEO 2025 study documented +40 % citation-pickup boost when OG and Article markup ship together.

The generator emits JSON-LD in this shape:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Brand Story — Episode 12",
  "description": "A weekly series ...",
  "url": "https://example.com/articles/12",
  "image": "https://example.com/og/12.png",
  "mainEntityOfPage": "https://example.com/articles/12",
  "datePublished": "2026-05-17",
  "articleSection": "Magazine",
  "author": { "@type": "Person", "name": "Lena Albrecht" },
  "publisher": { "@type": "Organization", "name": "Example Magazine" }
}
</script>

XSS protection in the inline script

The generator applies a backslash escape to </script and </style sequences inside JSON string values. Without this protection, a malicious input like Test</script><script>alert(1)</script> could close the enclosing inline-script block prematurely and execute arbitrary JavaScript. With the escape, the </script becomes <\/script — still valid JSON (JSON.parse round-trips the original value), but the HTML parser no longer sees a literal end-of-script token.

Which gaps are intentionally left?

  • No live URL-fetch debugger — would need a server proxy for CORS, conflicting with the pure- client privacy stance. After deploy, switch to Facebook Sharing Debugger, X Card Validator or LinkedIn Post Inspector.
  • No bulk-CSV generator — B2B workflow, out of scope for a single tool.
  • No template marketplace with 100+ OG-image templates — YAGNI. The inline Canvas generator delivers what brand-consistent work actually needs.
  • No Pinterest Rich Pin tab — low DE/EN search intent for Rich Pins, plus its own Pinterest validator needed after deploy.
  • No App Card / Player Card mode for Twitter — special case (apps with installable deep links, inline-player videos); out of scope for 95 % of generator users.
  • No WhatsApp / Telegram preview tabs — both platforms read standard OpenGraph without specialties; the Facebook preview reliably shows how WhatsApp and Telegram will unfurl.

How is privacy handled?

Pure-client. The generator runs entirely in the browser. No server endpoint, no telemetry call, no cookie, no account. The file you load as image preview stays local — the FileReader returns it as a data URL into the DOM, but it never leaves the tab. Close the tab and every setting is gone. For history, download the HTML snippet after each edit and version it in your repo.

Where do I find more details?

Last updated:

You might also like