中文

OG Image Generator

A 1200×630 social card in a few clicks. Bring a background image or use a gradient, type your headline, download the PNG.

Rendered with the Canvas API in your browser. Nothing is uploaded.

The card that decides whether anyone clicks your link

Paste a URL into a chat app, a social network or a Slack channel and the thing that appears next to it — the image, the title, the description — is assembled from Open Graph tags in your page's <head>. Get them right and your link is a small advertisement. Get them wrong and it is a grey rectangle.

The tags that matter

Four carry almost all of the weight:

  • og:title — the headline. Keep it short enough to survive truncation.
  • og:description — one or two lines of support. Many platforms truncate or drop this, so lead with what matters.
  • og:image — an absolute URL to the image. Relative URLs are a very common and very silent failure.
  • twitter:card — set to summary_large_image if you want the full-width treatment on X/Twitter rather than the small square thumbnail.

Two more are worth adding because they prevent visible jank: og:image:width and og:image:height. Without them, crawlers may download the image before laying out the card, and some platforms delay rendering until it arrives.

The canonical size, and the ones that differ

1200×630 (a 1.91:1 ratio) is the de facto standard — it is what Facebook, LinkedIn and most of the ecosystem expect, and it is what this tool produces. It is not, however, universal:

  • X/Twitter's summary_large_image also wants 1200×630 but displays closer to 2:1, cropping slightly.
  • LinkedIn renders at roughly 1.91:1 as well, but truncates differently at the edges.
  • Slack, Discord and iMessage each have their own aspect preferences and some crop aggressively.

The practical consequence is the safe area. Treat the outer margin of your card as expendable and keep your headline, logo and any essential text inside the middle band. A design that only works at the exact right aspect ratio will be wrong somewhere.

Text on the image: the rule that changed

Facebook used to enforce a guideline limiting text to roughly a fifth of the image area, and it was widely copied as if it were a universal law. Facebook relaxed its own enforcement years ago. That said, the underlying instinct is still sound: a card that is entirely text reads as an ad, and text baked into an image is invisible to screen readers and unsearchable. Keep the headline short, keep supporting detail in og:description where it is real text.

Always provide og:image:alt. It is the accessible name for the image, and it costs you one line.

Why your image does not update

Social platforms cache preview images hard, and their crawler runs on their schedule, not yours. Change the image and the old one can persist. The fix is twofold: give the file a new URL when it changes, and use each platform's own debugger to force a re-scrape. Guessing and waiting is not a strategy.

Design notes that hold up in practice

High contrast beats clever — these images are frequently viewed at thumbnail size on a phone in daylight. Put the subject on one side and the text on the other rather than overlaying text on a busy photograph, and if you must overlay, add a scrim. Test the result at 200 px wide before you ship it; a card that only reads at full size is a card most people never read.

Frequently asked questions

What size should an OG image be?
1200×630 pixels is the safe default and what this tool produces. It satisfies Facebook, LinkedIn and X/Twitter's large-card format. Some platforms crop differently, so keep essential content away from the outer edges.
Why is my existing OG image not showing up?
The most common causes, in order: the URL in og:image is relative rather than absolute; the crawler is blocked by robots.txt or a firewall; the image is above the platform's size limit; or the platform has a stale cached copy. Use the platform's own debugger to see what it actually fetched.
Should I put text on the image?
A short headline, yes — it is what makes the card readable at a glance. Large blocks of text, no: it gets truncated, it cannot be read by assistive technology, and it reads as advertising. Put detail in og:description where it remains real text.
Do I need a separate image for Twitter?
Usually not. Set twitter:card to summary_large_image and the same 1200×630 asset works. X/Twitter crops slightly closer to 2:1, so keep your headline inside the safe area rather than flush to the top and bottom edges.
Can I use a transparent background?
You can, but do not. Many platforms composite preview images onto an unknown background — dark mode, light mode, or their own colour — and transparent PNGs can end up with invisible text. Always render onto an opaque background.