Open Graph & Twitter Card Generator

What the Open Graph & Twitter Card Generator does

Open Graph tags are <meta> elements in the head of a page that tell chat apps and social networks how to present a shared link: the title, a short description, the image and the canonical address. The protocol was introduced by Facebook and is now read by most apps that build link previews. X (formerly Twitter) reads its own twitter: tags and falls back to Open Graph for anything they do not set.

This generator takes the page details you enter, such as title, description, image URL, page URL, type and site name, and produces the matching og: tags plus a twitter:card tag, written the way apps expect: property attributes for Open Graph and name attributes for Twitter tags.

Why it matters

Without these tags, apps guess. A shared link may show a bare URL, the wrong image from the page or a description cut from navigation text, and that preview is what people see when they decide whether to click. Explicit tags make the link card look intentional and keep it consistent across apps.

The details trip people up: an image given as a relative path, an og:url that differs from the canonical URL, or a title written for search that reads oddly in a chat. Generating the tags from one set of inputs avoids those mismatches. See our Open Graph guide.

How to fix common problems

Paste the tags inside the <head> of the page they describe. Each page needs its own values, so on a site with many pages, add the tags to your templates and fill them from each page’s title, description and featured image rather than repeating one set everywhere. Most CMSs and SEO plugins have fields for this; if yours already outputs Open Graph tags, edit those instead of adding duplicates.

Use absolute HTTPS URLs for og:image and og:url, and make sure the image is publicly reachable. An image of 1200 by 630 pixels suits most apps; keep important text away from the edges and the file reasonably small. Keep og:title close to your title tag and og:description close to your meta description.

After publishing, check the page with the Open Graph Preview tool to see the card and catch missing or inconsistent tags. Apps cache previews, so if an old image still appears, use the platform’s own debugging tool to request a fresh copy.

Questions

Do I need both Open Graph and Twitter tags?

Open Graph covers most apps. For X, add twitter:card with the value summary_large_image for a large image card; X falls back to the og: tags for the title, description and image.

What size should the og:image be?

1200 by 630 pixels, a 1.91:1 ratio, works well across apps. Much smaller images may be shown as a small thumbnail instead of a large card.

Should og:url be the canonical URL?

Yes. Use the same address as your canonical tag, so shares and reactions for the page are collected under one URL instead of being split between variants.