Free tool OG image generator for share cards
A link without a share image becomes a grey box in feeds and chat apps. Pick a template, type the title, add your logo and colors, and export a correctly sized PNG for Facebook, X, LinkedIn or a WeChat mini program. The tool also writes the og:image tags and sends you to the Open Graph preview to check the card.
- PNG and JPG export
- Sized per platform docs
- Logo never leaves your browser
Design a share image
Text wraps and shrinks to fit. Colors accept HEX, RGB or names. The preview is the exact image you will download.
Template
200–4096
200–4096
Usually the page headline. Up to three lines; it shrinks before it is cut.
Optional, up to two lines.
Short tag above the title, such as Blog, Guide or Release.
Domain, author or date.
Shown with an initial badge.
PNG, JPG, WebP or SVG up to 5 MB. Read in your browser, not uploaded.
Color presets
Auto picks white or dark, whichever contrasts more.
0 = up, 90 = right, 135 = diagonal.
Badge, label, bar and split panel.
Where you will host the PNG. Used for the tags and the preview link.
Describes the image; defaults to the title.
Preview
1200 × 630
Checks
- OK1200 × 630 with readable text. Ready to export.
- NoteAdd the image URL after uploading to fill in the tags. A placeholder address is shown for now.
<meta property="og:image" content="https://www.example.com/og/share.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="How to read your traffic sources in 5 minutes">
<meta name="twitter:card" content="summary_large_image">Upload the image to your site, put its address in “Image URL after upload”, then paste these tags into the page <head> next to og:title and og:description.
Version v1.0Updated Update history
What the preview and checks tell you
The preview is the downloaded file, pixel for pixel. The checks catch the problems that show up only once the link is shared.
Size and ratio
1200 × 630 (1.91:1) suits Facebook and LinkedIn and is close enough for X’s 2:1 large card. Pick the X or square preset when you make an image only for that platform.
Contrast
Text must stay readable at thumbnail size. The tool measures the text color against both ends of the gradient and warns below 4.5:1, the WCAG level for normal text.
Square crop
Chat apps such as WeChat, DingTalk and Feishu often show a small square thumbnail. Turn on the crop overlay to see what survives; keep the logo or key word in the middle.
Tags and file size
The tags declare width, height and type so platforms can lay out the card before the image loads. After export, the file size is shown: X and LinkedIn accept up to 5 MB, Facebook 8 MB.
Platforms cache images. If you replace an image at the same URL, re-scrape it in Facebook’s Sharing Debugger or LinkedIn’s Post Inspector, or change the file name.
Four steps
From blank to a live share card in a few minutes.
-
1
Pick a template and size
Classic and Centered suit articles; Split shows a big logo; Card works on bright gradients. Use 1200 × 630 unless you target one platform.
-
2
Write and style
Type the title and subtitle, choose a color preset or your brand colors, and add a logo.
-
3
Export and upload
Download PNG (sharp text) or JPG (smaller), upload it to your site and paste the address into “Image URL after upload”.
-
4
Add the tags and check
Copy the og:image tags into the page head, then open the Open Graph preview to see the card on each platform.
Image sizes from each platform’s documentation
Numbers come from the platforms’ own pages; where a platform states only a ratio, the pixel size is our choice and marked as such.
- Text wraps by word for Latin scripts and by character for Chinese; closing punctuation stays on the previous line
- The title starts at 72 px (scaled to the canvas) and shrinks to 40 px before it is shortened
- Auto text color picks white or near-black, whichever has the higher contrast against both gradient ends
- PNG keeps text edges sharp; JPG at 92% quality is usually several times smaller for photos and gradients
| Platform | Preset | Documented rule | Source |
|---|---|---|---|
| 1200 × 630 | At least 1200 × 630, close to 1.91:1; minimum 200 × 200; up to 8 MB | Meta for Developers | |
| 1200 × 627 | 1200 × 627, 1.91:1, up to 5 MB | LinkedIn Help | |
| X | 1200 × 600 | Large card 2:1, at least 300 × 157, up to 5 MB; summary card 1:1 | X developer docs |
| WeChat mini program | 1000 × 800 | Share card image shown at 5:4 (pixel size not specified) | WeChat mini program docs |
| Square thumbnails | 1200 × 1200 | WeChat Moments share and favorites 1:1; X summary card 1:1 | WeChat docs, X docs |
Laying out the default image
How the example on this page is built on a 1200 × 630 canvas with the Classic template.
| Part | Value | Why |
|---|---|---|
| Margin | 64 px on every side | Keeps text clear of rounded corners and cropping |
| Title | 72 px bold, 2 lines | Fits in three lines at full size, so it does not shrink |
| Subtitle | 30 px, 2 lines, slightly muted | Faded toward the background only as far as 4.5:1 allows |
| Text color | White: 6.05:1 against #2050F0, 19.1:1 against #0B0F19 | Auto takes the lower of the two ends, which is 6.05:1 |
| Accent bar | 10 px at the bottom in #5B82FF | Ties the image to the brand color |
A square crop of this image keeps only the middle 630 × 630 pixels, so the start of every left-aligned line is cut. If chat-app thumbnails matter, use the Centered template and check with the crop overlay.
Why share images look wrong
Most problems come from the image being made for one place and shown in another.
Small text
Feeds show the image around 500 px wide on phones, so 24 px text becomes 10 px. Keep titles large and short.
Logo at the edge
Square thumbnails cut the left and right sides of a 1.91:1 image. Keep anything essential in the middle.
Relative image URL
/og.png works on your site but not for a crawler. og:image must be a full https:// address.
Same URL, new image
Platforms cache images for days. Give updated images a new file name or re-scrape the page.
See what the share brought back
A good image earns the click. Analytics shows where it came from and what happened next.
Social as its own channel
Visits from Facebook, X, LinkedIn and other social sites are grouped as Social, with the source kept.
Learn moreUTM on shared links
Links opened in chat apps often arrive without a referrer. Tag them and they count as the campaign you meant.
Learn moreLanding pages
See which shared pages people land on, how long they stay and whether they convert.
Learn moreOG image questions
Still have a question?
Chat with the team behind TapCub — we usually reply within a few hours on business days.
What size should an OG image be?
1200 × 630 pixels works across platforms: Facebook recommends at least 1200 × 630, LinkedIn 1200 × 627, and X’s large card is 2:1, close enough that the crop is small. Keep the file under 5 MB.
How do I add an OG image to my page?
Upload the PNG to your site and add <meta property="og:image" content="https://…/image.png"> to the page head, plus width, height and alt tags. The generator writes them for you; paste them next to og:title and og:description.
PNG or JPG?
PNG keeps text and flat colors sharp and is the safe default for text-heavy images. JPG is smaller for photos and gradients. Both are accepted by Facebook, X, LinkedIn and WeChat.
What image does X use?
With twitter:card set to summary_large_image, X shows a 2:1 image and falls back to og:image if there is no twitter:image. Use the X preset if you want no crop.
Does WeChat use og:image?
Not reliably for web pages. A page shared in WeChat shows a custom thumbnail only when set through the official-account JS-SDK. Mini programs set it in onShareAppMessage, shown at 5:4; use the WeChat preset and the code the tool writes.
Is my logo uploaded anywhere?
No. The logo is read by your browser and the image is drawn on a canvas on your device. Nothing is sent to TapCub.
Update history
New features, fixes and data refreshes for this tool, newest first.
-
· v1.0
LaunchedFirst release.
Missing something or found an error? Tell us — requests that come up often go into the next update. All tool updates
Track the visits your shares send
Add TapCub to the page and see social traffic, campaigns and conversions in one place.