Open Graph Meta Tag Generator

When someone pastes your link into Slack, iMessage, LinkedIn, WhatsApp, or Facebook, the unfurled card is built from Open Graph meta tags in the page head. Without them the platform falls back to guesswork - usually the first image it can find and a fragment of body text - or to a bare grey rectangle with the URL.

This generator produces the five tags that cover the overwhelming majority of unfurls: og:title, og:description, og:url, og:image, and og:type. It escapes the attribute values so quotes and ampersands in your copy cannot break the markup, and outputs a block you paste directly into the head.

Open Graph originated at Facebook but is now read by nearly every platform that renders link previews, including several that never adopted a format of their own. Getting these five right is the highest-leverage markup work on any page you expect to be shared.

The meta description and og:description do different jobs and often deserve different wording. A meta description is read by someone who has already typed a query and is scanning for a match. An og:description is read by someone who was sent a link mid-conversation and has no query in mind. The first rewards precision; the second rewards a reason to care.

Length behaves differently too. Most unfurl surfaces show one or two lines of description and truncate hard - Slack and iMessage are particularly aggressive - so the useful budget is closer to 60-100 characters than the 160 you would write for search. Front-load accordingly and treat anything after the first clause as optional.

og:title has more room than a title tag on most surfaces but should still open with the distinctive part. Brand suffixes that make sense in a results list ("… | Acme") are dead weight on a card that already shows your domain.

The reliable specification is 1200×630 pixels at roughly 1.91:1, served over HTTPS from an absolute URL, in JPEG or PNG, under about 5 MB. Relative paths are the single most common mistake - a scraper resolving /og.png against nothing gets nothing, and the card falls back to blank.

Assume cropping. Different surfaces render the same image at different ratios: a square thumbnail in a chat list, a wide banner in a feed, a small left-aligned tile in a sidebar. Anything within about 10% of the edges may disappear, so keep logos and headline text well inside the middle.

Images behind authentication, hotlink protection, or a CDN that blocks unknown user agents will fail silently. If a card renders with title and description but no picture, the fetch was refused - test the image URL in a private window before blaming the markup.

Five meta elements are produced in a fixed order: og:title, og:description, og:url, og:image, og:type. Each uses the property attribute rather than name, which is what the Open Graph protocol specifies and what most scrapers key on. Output updates live as you edit any field.

Before a value is inserted into the content attribute it is escaped in three places: ampersands become &, double quotes become ", and less-than signs become <. Those are precisely the characters that would otherwise terminate the attribute early or produce invalid markup - a description containing the word "Q&A" or a quoted phrase is the usual culprit.

og:url should carry the canonical form of the page. Platforms use it to consolidate engagement counts and to decide which URL to attribute a share to, so a tracking-parameter variant here splits your data across two identities.