Social Card Generator
Composes a 1200×630 share image from a title, subtitle, brand line and optional logo on a chosen template, and writes the meta tags to go with it.
Composes a 1200 × 630 share card from a title, a subtitle, a brand line and an optional logo, and emits the meta tags to paste alongside it. Text is drawn straight onto a canvas with the device’s own Korean font, wrapping Hangul by syllable and Latin by word, and the title shrinks itself rather than overflowing.
Preview (1200 × 630)
Content
Drop a logo image (optional)
A square PNG or SVG fits best. Without one, a block in the accent colour stands in.
Look
Meta tags for the page
Why 1200 × 630, and about the font
Open Graph, X (summary_large_image), KakaoTalk and Slack all crop to something near 1.91:1, so this size loses the least. The text is drawn straight onto the canvas with the device’s own Korean font — Pretendard if it is installed, otherwise Apple SD Gothic Neo, Malgun Gothic or Noto Sans KR — wrapping Hangul by syllable, which is why the same settings can look slightly different on another machine. Exporting at 2× gives 2400 × 1260, which stays sharp on a high-resolution screen.
To see how the card actually unfurls, the OG preview fetches the page; for a background texture, the pattern generator makes one.
How to use it
Write the title as it will be read
A share card is read at thumbnail size in a feed, so a short title in large type beats a complete sentence in small type. The line under the preview says how many lines it took and whether the size was reduced to fit.
Add the brand line and the footer
They are remembered between visits, because they are the parts that stay the same across every card you make. The title and subtitle are not.
Choose a template and the two colours
Gradient, solid, split or outline. The background colour and the accent do all the work; the light-text toggle is there because a mid-tone background can go either way and the eye should decide, not a threshold.
Add a logo if you have a square one
A square PNG or SVG fits best. Without one, a block in the accent colour stands in, which is often enough at thumbnail size.
Export the PNG and copy the meta tags
The tags carry the width and height as well as the URL, which is what lets a crawler lay out the card before the image has loaded. Change the example URL to where you actually put the file.
Common questions
Why 1200 × 630?
Because Open Graph, X’s summary_large_image, KakaoTalk and Slack all crop to something near 1.91:1, and this size loses the least on all of them. Going larger does not help — every consumer resamples it down — and going smaller means a soft card on a retina screen.
The card looks slightly different on my colleague’s machine.
The text is drawn with whatever Korean font that device has — Pretendard if it is installed, otherwise Apple SD Gothic Neo, Malgun Gothic or Noto Sans KR — so the same settings produce slightly different letterforms and line breaks on different machines. The exported PNG is fixed once you download it; it is only the preview that varies.
My title got smaller on its own.
It went past four lines at the size you set, so the size was reduced until it fit — and the line under the preview says so. Overflowing text would be worse: it would be silently cut off in the export. Shorten the title if you want the large size back.
How do I check the card actually renders?
Put the file up at the URL in the meta tags first, then use the OG preview tool, which fetches the page and shows what each platform will build from its tags. This page only draws the image — it cannot know whether the tags are on the page or whether the URL resolves.
Feed it from
Link Preview Debugger
Reads Open Graph and Twitter card tags from a URL and renders how the link will look when shared.
Background Pattern Generator
Generates tileable SVG patterns — stripes, dots, grids, noise — with colour and scale controls.
Device Mockup
Places a screenshot inside a phone, tablet, laptop or browser frame with a background and shadow.
Colour Picker
Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.
Next
These accept what this tool produces, so the result can go straight in.
Device Mockup
Places a screenshot inside a phone, tablet, laptop or browser frame with a background and shadow.
Link Preview Debugger
Reads Open Graph and Twitter card tags from a URL and renders how the link will look when shared.
Background Pattern Generator
Generates tileable SVG patterns — stripes, dots, grids, noise — with colour and scale controls.
PNG Compressor
Quantises the palette and rewrites the deflate stream to shrink a PNG without changing its dimensions.
Colour Picker
Picks a colour on an OKLCH field, with a screen eyedropper or from an uploaded image, and copies it in any notation.
Aspect Ratio Calculator
Works out the missing dimension for a target ratio and lists the standard sizes it matches.