Open Graph Tag Generator – The Meta Block Behind Link Previews
Open Graph is the metadata protocol published at ogp.me, and it is what most link unfurlers read when someone pastes your URL into a chat, a post or a message. It is a handful of <meta> tags in your page's <head>, each carrying a property that starts with og: and a content value. Get them right and your link arrives as a card with a title, a summary and an image. Get them wrong and it arrives as a bare URL.
The four properties the protocol marks required
Open Graph itself names four: og:title, og:type, og:image and og:url. Everything else — og:description, og:site_name, og:locale, the image sub-properties — is optional and still worth writing. og:type decides which extra vocabulary applies: an article can carry article:published_time and article:author, a profile carries names, and website — the right answer for most pages — carries nothing extra at all.
og:url deserves particular care. It is how an unfurler decides which page it is looking at, so it should be the canonical address, not the campaign link someone clicked. Put tracking parameters in the link you hand out and keep them out of og:url, or every campaign becomes a separate page identity.
Escaping: three outputs, three different rules
The whole output is markup built out of untrusted text, so escaping is the correctness core rather than a footnote. Take a title reading Tips & "Tricks" for <head> tags and watch what each format has to do with it.
In HTML, the ampersand becomes &, each double quote becomes " and the angle brackets become < and >. Without that, an unescaped quote closes the content attribute early and an angle bracket opens a tag inside your own head section.
In the Next.js metadata export, none of that applies. It is a JavaScript string literal, so the value is quoted with JSON.stringify instead — the ampersand and the angle brackets stay exactly as typed and only the quotes and backslashes are escaped. Writing & into a JS literal is a bug, not a safety measure, and confusing the two contexts is the classic mistake in a tool shaped like this one.
In the plain key/value list the value is emitted verbatim, because its destination is a form field, not markup. One rule applies everywhere: control characters are stripped and line breaks are folded to a single space, since a raw newline is malformed inside an attribute and a syntax error inside a string literal.
Why every URL must be absolute
A relative /img/cover.png works in your browser because the browser knows the page it came from. The program reading your tags is a crawler on someone else's servers with no such base, which is why the protocol requires absolute URLs. This tool checks og:url, og:image, og:video and article:author against an allowlist of http: and https:, reports anything else on the field, and leaves the tag out rather than emitting a value that will fail. It never prefixes https:// for you either — guessing at your domain would be guessing at your canonical URL.
What the checklist is for
The panel beside the form separates what breaks an unfurl from what merely weakens it. A missing og:image or a relative og:url is an error. An empty description, a width without a height, an image served over http: on an https: page, or an article with no publication date are warnings — each row says what to change, not just what is wrong.