Free tool · No account
Open Graph meta tag generator
Fill in the page details and copy a complete set of Open Graph and X card tags. The preview updates as you type, so you can see what X, LinkedIn, Discord, and Slack will truncate before the page ships.
Page details
Live preview
A new post with a link.
example.com
How to design an Open Graph image that gets clicked
A practical guide to 1200 x 630 cards, safe areas, and meta tags that render correctly on every platform.
Paste into <head>
<!-- Open Graph -->
<meta property="og:type" content="article" />
<meta property="og:title" content="How to design an Open Graph image that gets clicked" />
<meta property="og:description" content="A practical guide to 1200 x 630 cards, safe areas, and meta tags that render correctly on every platform." />
<meta property="og:url" content="https://example.com/blog/open-graph-images" />
<meta property="og:image" content="https://example.com/og/open-graph-images.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="A dark Open Graph card with the headline How to design an Open Graph image that gets clicked" />
<meta property="og:site_name" content="Example Blog" />
<meta property="og:locale" content="en_US" />
<!-- X / Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="How to design an Open Graph image that gets clicked" />
<meta name="twitter:description" content="A practical guide to 1200 x 630 cards, safe areas, and meta tags that render correctly on every platform." />
<meta name="twitter:image" content="https://example.com/og/open-graph-images.png" />
<meta name="twitter:image:alt" content="A dark Open Graph card with the headline How to design an Open Graph image that gets clicked" />What each tag does
| Tag | Purpose | Notes |
|---|---|---|
| og:title | Card headline | Not the same as the HTML title tag; it can be shorter and more direct. |
| og:description | Supporting sentence | Around 200 characters before platforms truncate. |
| og:url | Canonical page URL | Use the final URL, not a redirect or a tracking link. |
| og:image | The card image | Absolute HTTPS URL. 1200 x 630, under 1 MB. |
| og:image:width / height | Image dimensions | Lets a crawler lay out the card before the file loads. |
| og:image:alt | Image description | Used by screen readers and increasingly by AI systems. |
| og:type | Page kind | website for a homepage, article for a post or guide. |
| og:site_name | Brand name | Shown by some platforms above the title. |
| twitter:card | X card layout | summary_large_image for a wide image, summary for a small square. |
Where the tags go
Put the block inside the document <head>, after the title and description. In a framework, use the framework's metadata API rather than pasting raw tags into a layout: Next.js has generateMetadata and the metadata export, which emit the correct tags per route. The Next.js Open Graph guide has a working example.
How to add the tags
- 01Enter the page details. Fill in the page title, description, canonical URL, and the absolute URL of a 1200 x 630 image.
- 02Check the previews. Switch between X, LinkedIn, Discord, and Slack to see how the card is truncated. Shorten the title or description until nothing important is cut.
- 03Copy the tags. Press Copy tags and paste the block into the document head, replacing any existing Open Graph and Twitter tags.
- 04Re-scrape the live URL. Deploy the page, then run the URL through the X Card Validator or LinkedIn Post Inspector so the old cache is replaced.
Check the tags before you ship
- One set of tags. Duplicate
og:imagetags from a plugin and a hand-written block confuse crawlers; the first or last may win depending on the platform. - No `noindex` on the image. A robots rule that blocks the page or the image file also blocks the card.
- Alt text on the image. It is read by assistive technology and used by search and AI systems that cannot see the card.
- A stable URL. Bump the filename when the artwork changes; platforms cache by image URL for weeks.
Generate the image too
Tags describe the card; they do not design it. The Open Graph image generator opens at 1200 x 630 with a safe area, layers, and platform presets, and the template gallery has 45 editable layouts. Neither requires an account, and the image never leaves your browser.
Keep reading
- Open Graph meta tags, explainedEvery tag, what reads it, and the mistakes that break a card.
- OG image size guideDimensions, ratios, and safe areas for each platform.
- OG image not showing?A debugging order for missing, cropped, and stale previews.
- All toolsGenerators and checkers that run in the browser.
Frequently asked questions
What tags does an Open Graph image need?
At minimum: og:title, og:description, og:url, og:image, og:image:width, og:image:height, og:image:alt, og:type, and og:site_name. Add twitter:card, twitter:title, twitter:description, and twitter:image for X. The generator above produces all of them.
Should the image URL be absolute?
Yes. Crawlers fetch the image from outside your page, so a relative path such as /og.png cannot be resolved reliably. Use the full https:// URL, including the domain.
What size should the image be?
1200 x 630 pixels for a 1.91:1 link card. That size works on X, LinkedIn, Discord, Slack, and Facebook. Keep the file under 1 MB and the important content inside a 64 px safe area.
Do I need both Open Graph and Twitter tags?
X falls back to Open Graph tags when twitter:* tags are missing, but the fallback is inconsistent. Adding twitter:card, twitter:title, twitter:description, and twitter:image makes the card predictable.
Why is my new card not showing?
The platform cached the old one. Re-scrape the URL with the X Card Validator, LinkedIn Post Inspector, or Facebook Sharing Debugger after the page is live. Caches can last for days.
Does the order of the tags matter?
No. Meta tags in the document head are not order-dependent. Keep them grouped for readability, but any order works.
Tags are half the job
The image has to earn the click
A correct card with a weak headline still gets ignored. Start from a layout that already handles hierarchy, then change the words.