Open Graph Generator

Create Open Graph and Twitter Card tags so your links look great when shared. Free, in your browser.

Open Graph + Twitter tags

Controls how your page looks when shared on Facebook, LinkedIn, X and more. Use an image around 1200×630px.

Free to use — premium coming soon

FREE
  • OG + Twitter tags
  • One-click copy
  • 100% private
PREMIUM
  • Remove ads
  • Live preview & image upload

About the Open Graph Generator

The Open Graph Generator builds the meta tags that decide what your page looks like when someone pastes its link into Facebook, LinkedIn, Slack, Discord, WhatsApp, or X. You fill in a title, description, canonical URL, and image, and the tool outputs ready-to-paste markup for both the og: namespace (the Open Graph protocol Facebook published in 2010) and the twitter: namespace (X's card spec). Without these tags a shared link usually collapses to a bare URL or a grey placeholder box, which reads as low quality and gets fewer clicks. The generator removes the guesswork of remembering exact property names and attribute syntax.

Reach for this tool whenever you publish or update a page you expect to be shared: a blog post, a product page, a landing page, or a documentation entry. It is also the fastest way to fix a preview that already looks broken. The four properties the protocol actually requires are og:title, og:type, og:url, and og:image; everything else (og:description, og:site_name, og:locale, og:image:width, og:image:height, og:image:alt) is optional but improves how cards render. The generator includes the optional fields by default so your previews look complete on the platforms that read them.

Under the hood, Open Graph tags are plain HTML meta elements written with property="og:..." and a matching content value, placed inside the page's <head>. Social platforms run a crawler that fetches your URL, parses those tags from the initial HTML, and assembles the card. That is why the tags must be present in the server-rendered or static HTML rather than injected later by client-side JavaScript that the crawler may never run. X reads its own twitter: tags first and falls back to your Open Graph tags when a twitter: equivalent is missing, so a complete OG set plus twitter:card and twitter:site covers nearly every platform.

This generator runs entirely in your browser. The title, description, URL, and image path you type are assembled into markup locally and are never uploaded to a server or stored by us, which matters when you are drafting tags for an unreleased page. One accuracy note: the tool can produce correct tags, but it cannot fetch or host your image. You must point og:image at a publicly reachable absolute URL (https://yoursite.com/image.png, never a relative path), and after deploying you should re-scrape the page in each platform's official debugger so cached previews refresh.

Frequently asked questions

What is the ideal og:image size?

Use 1200 by 630 pixels, a 1.91:1 aspect ratio that renders cleanly on Facebook, LinkedIn, Slack, Discord, and X's large-image card. Keep important text and faces within a centered safe area and the file under about 1MB (5MB maximum) as a JPG or PNG.

Which Open Graph tags are actually required?

The protocol requires only four: og:title, og:type, og:url, and og:image. In practice you should also add og:description for the snippet text, and the structured og:image:width and og:image:height so platforms can lay out the card before the image loads.

Do I still need Twitter Card tags if I have Open Graph tags?

Not strictly. X falls back to your Open Graph tags when a twitter: equivalent is missing. Adding twitter:card (set to summary_large_image) and twitter:site gives you explicit control on X, but a complete OG set alone will still produce a working card there.

Why does my link preview still show the old image after I changed the tags?

Platforms cache the first version of your card they crawled. Run your URL through the platform's official debugger (such as Facebook's Sharing Debugger or X's Card Validator) to force a re-scrape, and make sure og:image uses an absolute https URL, not a relative path.

Where do I put the generated tags?

Paste them inside the <head> of the page's HTML so they are present in the initial server response. If your site is built with React or Next.js, set them via server-side rendering or static generation rather than client-side script, because most social crawlers do not execute JavaScript.

From our blog

JSON to XML: When You Still Need XML and How the Mapping Works

By the Super Simple Digital Tools Team · Updated June 2026

JSON won the web. It is lighter, easier to read, and native to JavaScript, so almost every modern REST API speaks it by default. Yet XML never went away, and a working developer still bumps into it constantly. SOAP web services are built on XML envelopes, and large swaths of finance, healthcare, telecom, and government infrastructure run on SOAP. RSS and Atom feeds, podcast feeds, and XML sitemaps are XML by specification, an RSS document must conform to the XML 1.0 standard. Build tools like Maven, configuration for Spring and many Java frameworks, and the Office Open XML behind .docx and .xlsx files are all XML too. If your data starts as JSON but has to travel into one of these systems, you need a clean conversion rather than a rewrite.

Conceptually the two formats agree: both describe a hierarchical tree of named values. The differences are in syntax and in a handful of features each format has that the other lacks. JSON gives you typed values, strings, numbers, booleans, null, plus arrays and objects. XML gives you elements, attributes, namespaces, comments, and processing instructions, but it treats every value as text. A faithful converter has to bridge that gap, and most of the friction in JSON to XML comes from the things XML has that JSON does not, attributes and namespaces, and the things JSON has that XML does not, real arrays and real data types.

The core mapping is simple to picture. The whole document gets a single root element, because XML allows exactly one root while JSON can start with an object or an array. Each object key becomes an element name and its value becomes the element body. Nested objects become nested elements, so {"order":{"id":5}} turns into an order element containing an id element. Arrays expand into repeated sibling elements with the same tag, the only sensible way to express a list in XML. Scalar values are written as the text content of their element, and because the type information is gone, a consumer reading the XML back has to know from context or from a schema that a given field is a number rather than a string.

A few details trip people up. XML reserves &, <, and > for its own markup, so any of those characters appearing inside a JSON value must be escaped to &amp;, &lt;, and &gt; or the output will not parse. Element names are also constrained: they cannot begin with a digit and cannot contain spaces or most punctuation, so a JSON key like "2024-total" or "line items" has to be sanitised, commonly by prefixing an underscore for leading digits and replacing spaces with underscores. Empty objects, deeply nested arrays, and keys that differ only by case are other corners worth checking. Because of all this, JSON and XML are not a perfect round trip, converting JSON to XML and back can subtly change types or names.

The safe workflow is to convert, then verify. Generate the XML, eyeball the structure, and if you have a target schema, validate the output against the XSD or DTD that the receiving system publishes. If the target expects certain values as attributes rather than child elements, restructure your JSON first using an attribute convention the converter understands, rather than hand-editing the XML afterward. For SOAP, wrap the converted body in the correct envelope and namespaces the service requires. Treat the converter as a fast first draft of the document shape, and let your schema, not your eyes, be the final judge of correctness.

  • Wrap your JSON in a single top-level object before converting; XML needs exactly one root element, so a bare top-level array will be wrapped automatically and the tag name may not be what you expect.
  • Remember that arrays become repeated sibling elements, not a wrapper plus children, so use a singular, descriptive key name for array items to keep the XML readable.
  • If the receiving schema requires data types, add type attributes (for example type="number") yourself, because XML loses JSON's number, boolean, and null distinctions in plain conversion.
  • Rename any JSON keys that start with a digit or contain spaces before converting, so the element names are predictable instead of being silently underscored by the sanitiser.

Read the full guide →

Tool by the Super Simple Digital Tools Team. Reviewed by our editorial team. Free to use, no signup required.

Related tools