Open Graph preview

Enter OG tags and preview the share card for social platforms.

og:title og:site_name

og:description

og:image (URL) og:url

Preview

Title appears here

You paste your new page into a chat and the card that appears has no picture, the wrong title, and a description pulled from your cookie banner. Open Graph tags are what decides that card, and they are easy to get wrong because you cannot see the result until you have already shared the link. This tool renders the card while you type.

How it works

What the preview shows

Fill in the five boxes and the card on the right updates live: the image sits at the top, the title below it, then the description, with the site name — or the hostname taken from og:url if you leave the site name blank — underneath. It is a generic large-image card, close to what most platforms render but not a pixel-perfect copy of any single one.

The tags it writes for you

Copy meta tags produces the block for your <head>. It writes og:title, og:description, og:image, og:url and og:site_name for whichever boxes you filled, and always adds two more:

og:type set to website
twitter:card set to summary_large_image

Only fields you entered appear in the output, so a blank box adds nothing rather than an empty tag.

Sizing the image

Use an absolute URL — a path like /img/cover.png will not resolve for a remote scraper. 1200 × 630 pixels is the safe landscape size across platforms; anything much smaller may be dropped or rendered as a small thumbnail instead of a banner. Keep important text away from the edges, since different apps crop differently.

Why the real card may still look old

Sharing platforms cache what they scraped the first time, sometimes for days. If you have already shared a link and then fix the tags, the stale card usually persists until you clear it through that platform's own debugging tool, or share a slightly different URL.

Terms explained

og:title: The headline on the card. It can differ from your <title> tag, and platforms truncate it at roughly 60–90 characters.
og:description: The one- or two-line summary under the title. Around 120–160 characters survives on most platforms.
og:image: Absolute URL of the preview image. Relative paths fail because the scraper fetches it from outside your site.
og:url: The canonical address of the page, used to consolidate shares of the same page reached through different links.
og:site_name: The name of the site the page belongs to, shown as the small label on the card.
twitter:card: Chooses the card layout on X. summary_large_image gives the wide banner; without it you tend to get a small square thumbnail.

Frequently asked questions

I updated og:image but the old picture still shows. Why?

The platform cached your page when it was first shared and is serving that copy. Most platforms have a sharing debugger that re-scrapes on demand; otherwise the cache expires on its own after a while, or you can share a URL with a different query string.

What image size should I use?

1200 × 630 pixels is the usual recommendation for a wide card and works across the major platforms. Stay above roughly 600 × 315 or the image may be shown as a small thumbnail, and keep the file reasonably light so it loads before the card renders.

Do I need separate Twitter tags as well as Open Graph?

Mostly not. X falls back to the Open Graph tags for title, description and image, so twitter:card is the one worth setting explicitly to choose the layout. Add twitter:title or twitter:description only when you want that platform to say something different.

Is og:url required?

It is optional but worth setting. It tells platforms which canonical page a share belongs to, so links reaching the same page through tracking parameters or redirects are counted together rather than as separate pages.

Will the card look exactly like this preview everywhere?

No, and that is expected. Each platform applies its own crop, font and truncation, so treat the preview as a check that your tags are present and sensible rather than as an exact rendering.