Open Graph generator.

A set of meta tags Facebook published in 2010 that tell other sites how to show a link. og:title, og:type, og:image and og:url are the required four, with og:description, og:site_name and og:locale beside them. Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage and X all read them.

1200 × 630 px, a 1.91:1 ratio, as PNG, JPEG or WebP. Under 600 × 315 Facebook and LinkedIn fall back to a small thumbnail; Facebook needs at least 200 × 200 and refuses files over 8 MB, X and LinkedIn stop at 5 MB, and none of them shows an SVG.

Facebook and LinkedIn keep a URL's card from the first time it was shared. After changing the tags, ask them to read the page again: Facebook's Sharing Debugger and LinkedIn's Post Inspector both have a button for it. A new file name for the image also forces a fresh fetch.

Yes. The protocol asks for full URLs, and a relative path such as /og.png is ignored by Facebook and X. In Next.js, set metadataBase and write paths: Next.js turns them into absolute URLs in the tags.

website for home and landing pages, article for posts and docs (it adds article:published_time and article:author, and Google puts the date before the snippet), profile for a person's page. book and video.other cover the other types Next.js knows.

Yes, for a dropped file or a URL your browser can load: it reads the pixel size (and a file's weight and format), says what each platform will do with it, and writes og:image:width and og:image:height, which let Facebook draw the card on the very first share.

No. A dropped image is shown from your own device and only its size, weight and type are read; a pasted URL is loaded by your browser, as any page would show it.

No. The Open Graph generator is free and opens without a sign-in, an account or an install.

Nothing. The Open Graph generator holds your input in the page's memory, so closing or reloading the tab clears it, and it saves nothing in this browser.

og:type, og:url, og:title, og:description, og:site_name, og:locale, og:image with og:image:width, og:image:height and og:image:alt, and for an article article:published_time and article:author. Empty fields are left out.

Facebook first, then LinkedIn, Slack, Discord, X and Google, each drawn at its own width from your tags. Discord's card edge takes the page's theme-color, as Discord does.

One, the image every platform uses first. Facebook and LinkedIn can read more og:image tags but show the first, so add others by hand under it only if you need them.

language_TERRITORY with an underscore, as Open Graph defines it: en_US, fr_FR, pt_BR. A hyphenated tag such as en-US is flagged.

Closest to the Open Graph generator: Meta tag generator, Twitter card generator, Favicon generator, Reduce image size online. Each opens on its own page, free and in the browser.

The Open Graph generator is one of 14 in its group. The group's page, /tools/web, lists them all.

The tool is free. Its interface is built from shadcn.io's own components (Button, Input, Slider and the rest of the registry under /ui), which come in React, Vue, Svelte and Solid. Pro adds the blocks and templates for the product around it.