Open Graph Meta Tag Generator

Runs in your browser — your data is never uploaded.

Generate the Open Graph and Twitter card tags that decide what your link looks like when someone shares it. The tags themselves are easy; what breaks previews is almost always the image — a relative path, a host behind a login, or a file too small to be accepted. The output covers each of those, and the caching behaviour that makes a fixed card keep looking broken for days.

How to use Open Graph Generator

  1. 1

    Enter the title, description and the page’s canonical URL.

  2. 2

    Add an absolute URL to a 1200×630 image on a publicly reachable host.

  3. 3

    Click “Generate”, paste into <head>, then re-scrape the URL in the platform’s debugger.

Share

Embed this tool on your site

Paste this where you want the tool to appear. It runs entirely in your visitor's browser — no uploads, no account, no tracking.

Please keep the attribution line — it's what keeps these tools free.

Need a different size, a dark theme, or a different tool? Build an embed lets you preview it first.

Frequently asked questions

Why is my link preview blank?+

Nearly always the image. og:image must be an absolute URL — a relative path is not resolved by scrapers. The host has to be publicly reachable, so a staging site behind basic auth or a Cloudflare bot rule serves nothing. And the file must not be blocked by robots.txt. None of these produce an error anywhere; you just get a card with no picture.

What size should the image be?+

1200×630 is the safe answer everywhere — a 1.91:1 ratio that Facebook, LinkedIn and X all render without cropping. Below roughly 200×200 the image is rejected outright, and above about 5 MB some scrapers give up. Square images work but get cropped differently on each platform.

Do I need separate Twitter tags?+

Only twitter:card. X falls back to the Open Graph tags for title, description and image, so duplicating them as twitter:title and twitter:description adds bytes and nothing else. The card type has no OG equivalent, which is why it is the one tag emitted here.

Why do og: tags use property and twitter: tags use name?+

Open Graph is built on RDFa, which uses property; the Twitter card spec uses the plain HTML name attribute. Swapping them is a common copy-paste error that leaves a card working in one place and blank in another, with nothing to indicate why.

I fixed my tags but the old preview is still showing.+

Scrapers cache aggressively, often for days. Each platform has a debugger that force-refetches the page — use it after any change, or you will be looking at the old card long after the markup is right.