Which Open Graph fields are required?

The official protocol lists og:title, og:type, og:image, and og:url as required.

Is this preview exact?

No. Every network can crop and style metadata differently.

Why should image URLs be absolute?

Social crawlers need a complete public address to retrieve the image.

Why does an old card still appear?

The network may have cached earlier metadata; use its current sharing debugger to request a refresh.

Free Web & UX Tools

Open Graph Preview & Meta Tag Generator

Preview a social share card and copy the Open Graph meta tags behind it.

What this tool does

Draft social metadata and see the share card it implies.

The tool previews title, description, site name, URL, and image in an approximate social card, then generates the corresponding Open Graph meta tags.

The protocol requires title, type, image, and URL. Networks can still cache, crop, or restyle deployed metadata, so their current debuggers remain the final check.

Use the tool

Preview Open Graph metadata

Edit the share fields, inspect the approximate card, and copy the generated meta tags.

Open Graph fields

Title

Description

Site name

Canonical URL

Absolute image URL

Use absolute public URLs in production. The official Open Graph protocol requires title, type, image, and URL; description and site name add useful context.

Approximate share card

Draftroom

A calmer way to review creative work

Bring assets, feedback, approvals, and delivery into one clear creative workspace.

https://example.com/creative-workflow

<meta property="og:title" content="A calmer way to review creative work" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/creative-workflow" />
<meta property="og:image" content="/images/social/features.png" />
<meta property="og:description" content="Bring assets, feedback, approvals, and delivery into one clear creative workspace." />
<meta property="og:site_name" content="Draftroom" />

Networks can cache, crop, or restyle shared metadata. Validate the deployed URL with each platform’s current debugger.

How to use it

Three quick steps

1Enter a concise title, description, site name, canonical URL, and absolute public image URL.
2Review hierarchy and likely truncation in the card preview.
3Copy the tags into the page head, deploy, and validate the live URL on target networks.

Worked example