Home › Generators & Text Tools › Open Graph Generator
Open Graph Generator
This free Open Graph Generator writes the meta tags that decide how your page looks when someone shares it on WhatsApp, Facebook, LinkedIn or X — the picture, the headline and the short description inside the preview card. Fill in the fields, watch the live preview, then copy the finished og: and Twitter card tags into your page's <head>. Everything runs in your browser.
Paste the tags inside the <head> of your page. Leave a field empty and its tag is simply left out.
How to use this tool
- Fill in your page's title and description as you want strangers to see them — these are marketing words, not copies of your page heading.
- Add the page URL and the image URL (a full https:// address; near 1200 × 630 pixels works best).
- Pick the type, site name, locale and Twitter card style.
- Press Copy Meta Tags and paste the block into the
<head>section of your HTML. - After publishing, test the link in the sharing debugger of the platform you care about so it fetches a fresh preview.
How Open Graph tags work
When a link is pasted into a chat or social app, the app does not read your whole page to build the little preview card — it looks for a handful of Open Graph meta tags in the page's head, a standard Facebook introduced in 2010 and everyone since has adopted. No tags, and the app guesses — often badly, with a random image and the first words it finds. The generator writes one tag per field, following the pattern:
The four that matter most are og:title, og:description, og:image and og:url; og:type tells the app whether the page is an article, a product, a video and so on, and og:site_name and og:locale add the brand and language. X (Twitter) uses its own twitter:card family, which mostly mirrors the og values, so this tool emits both sets from the same fields. Any character that could break the HTML — a quote inside your title, an ampersand — is escaped automatically, so a title like He said "Hi" & left cannot corrupt your page.
| Tag | Controls | Good practice |
|---|---|---|
| og:title | The card's headline | Under ~60 characters, benefit first |
| og:description | The two grey lines under it | Under ~160 characters, one clear promise |
| og:image | The picture | 1200 × 630 px, full https URL, under 5 MB |
| og:url | The canonical address | The page's permanent URL, no tracking codes |
| og:type | What the page is | article for posts, product for shop pages |
| twitter:card | Card size on X | summary_large_image for most pages |
Two traps catch people out. First, the image must be a complete public URL — a relative path like /images/pic.jpg is ignored by most apps. Second, apps cache previews aggressively: fix your tags after sharing and the old card keeps appearing until the platform re-fetches, which is what the sharing debuggers are for.
Worked example
A blogger fills the form for a new post: title “10 Easy Ways to Save Money Every Month”, a one-line description, the post's URL, an image URL, type article, site name Example Blog and the large Twitter card. The generator produces the matching block — the first lines look like this:
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/save-money">
<meta name="twitter:card" content="summary_large_image">
She pastes the block into her post's head section, publishes, and shares the link on WhatsApp: the preview card shows her headline, her description and her image — exactly as the preview panel on this page showed her — instead of the random crop the app would have guessed.
FAQ
What are Open Graph tags?
They are meta tags in a page's head that tell social apps exactly what to show in a link preview: the title (og:title), the description (og:description), the picture (og:image), the address (og:url) and the kind of page (og:type). Facebook created the standard in 2010; WhatsApp, LinkedIn, Telegram and most other apps read the same tags, and X adds its own twitter:card family alongside.
Where do I paste the generated tags?
Inside the <head> section of your page's HTML, alongside your title tag and meta description. In WordPress, a SEO plugin such as Yoast or RankMath has fields that create them for you; in a hand-built or static site — like the ones many small businesses use — you paste this block in directly. One set per page: each page should carry its own title, description and image.
Why does my shared link show the wrong picture or title?
Almost always caching. Social apps save the first preview they fetch and reuse it for days. Fix your tags, then run the URL through the platform's sharing debugger (Facebook's Sharing Debugger, LinkedIn's Post Inspector) to force a fresh fetch. Also check the basics: the image must be a complete public https URL — relative paths and images blocked by your server settings are silently ignored.
What size should my og:image be?
1200 × 630 pixels is the safe standard — it fills the large card on Facebook, LinkedIn and X (with summary_large_image) without cropping. Keep the file under about 5 MB, put the important content in the centre (some apps crop to a square in feeds), and avoid small text, which becomes unreadable at thumbnail size.
What is the difference between summary and summary_large_image?
On X, the summary card shows a small square thumbnail beside the text; summary_large_image shows a wide picture across the full width of the card, which earns far more attention. Most articles, products and landing pages should use summary_large_image with a 1200 × 630 image. The og: tags still cover Facebook, WhatsApp and LinkedIn either way.
Does this generator upload my page details?
No. The tags are written on your device as you type; nothing is sent to a server, saved or tracked. The preview card is also drawn locally — your image is fetched by your own browser only, the same as loading the image directly.