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

From JSON to YAML Without Breaking Your Config: A Practical Guide

By the Super Simple Digital Tools Team · Updated June 2026

JSON and YAML are two ways of writing the same thing. Under the hood both encode a tree of mappings (key-value pairs), sequences (lists), and scalar values like strings, numbers, booleans and null. That shared model is why conversion is reliable: there is no information in well-formed JSON that YAML cannot represent. What changes is the surface syntax. JSON marks structure with braces, brackets, commas and quotes; YAML marks it with indentation and dashes. Strip the punctuation, indent consistently, and a dense JSON object becomes a YAML file you can scan top to bottom like a checklist.

So why bother, if a system accepts both? Because YAML won the configuration ecosystem. Kubernetes manifests, Helm charts, Docker Compose, GitHub Actions and GitLab CI pipelines, and Ansible playbooks are all written in YAML by convention. The big reasons are human ones: YAML files have less syntactic noise, nest more readably, and crucially support comments, something JSON flatly refuses. When a deployment file is edited by people during incidents, being able to annotate why a value is set the way it is matters more than raw parsing speed. JSON still dominates APIs and machine-to-machine data exchange, which is exactly where the conversion need arises.

The single biggest gotcha in YAML is indentation, because indentation is not cosmetic, it is the structure. There are no closing braces to fall back on, so one extra or missing space can silently move a key to the wrong nesting level or invalidate the file. The cardinal rule: never use tabs. The YAML spec forbids tab characters for indentation, and mixing tabs with spaces, often introduced by copy-pasting from a terminal or documentation, is one of the fastest ways to produce a file that looks fine but won't parse. Pick two spaces per level and stay consistent throughout.

The second classic trap is implicit typing. YAML tries to infer whether a bare value is a string, number or boolean. Under the still-common YAML 1.1 rules, words like yes, no, on, off, true and false (in many capitalisations) all become booleans, which is how the Norway problem got its name: the country code NO parses as the boolean false. Leading-zero values like 0755 or version-looking strings can also be coerced unexpectedly. The fix is simple and is why a good converter quotes proactively: wrap any value whose textual meaning matters in quotes so the parser treats it as a literal string.

A sensible workflow, then, is convert, scan, validate. Convert the JSON to get clean block-style YAML. Scan the output for any values that should be strings but were left bare, and confirm the indentation depth matches where the snippet will live in a larger file. Then run it through a YAML linter or the target tool's dry-run mode before committing. Because the conversion is lossless, anything that breaks afterwards is almost always one of the two YAML-specific issues, indentation or implicit typing, not the data itself.

  • Use two spaces per indentation level and never tabs; configure your editor to insert spaces on Tab so pasted YAML stays parseable.
  • After converting, check that values like NO, yes, off, or numbers with leading zeros are quoted if you meant them as strings, to dodge YAML's implicit-typing traps.
  • When pasting converted YAML into a Kubernetes or CI file, re-indent the whole block so its top level lines up with its parent key rather than the file's left margin.
  • Run the output through a YAML linter or your tool's dry-run (for example kubectl apply --dry-run) before committing, since YAML errors often hide in invisible whitespace.

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