Make a 1200 × 630 share card, then check the Open Graph tags on a page you already have. Both run in this browser, and nothing is uploaded.
The preview is the export: one 1200 × 630 canvas, downloaded exactly as drawn.
YOURSITE.COM
Add a logo or a background image
Click, or drop a file. It is read on this device and never sent anywhere.
This takes pasted markup, not a URL, and that is deliberate. A page running in your browser is not allowed to read another site’s HTML — the same-origin policy throws the response away — and there is no server behind this page to fetch it for you. Every checker that accepts a URL is a backend doing the fetch. Rather than send your URL to somebody else’s, this one reads what you paste. Open the page, view its source (Ctrl+U, or Cmd+Option+U), copy the <head>, and drop it below. That markup is parsed here by the browser’s own HTML parser into an inert document, which loads nothing and runs nothing.
Paste a link into Slack, LinkedIn, X or Facebook and the client fetches the page, reads a few <meta> tags from the <head>, and builds a card. og:image is the picture on it: usually the only thing a person sees before deciding to click, and the piece most sites leave to a crawler’s guess — which is how a careful article ends up illustrated with a stock photograph of a laptop.
The wide slot is 1.91 to 1. Facebook’s documented minimum is 600 × 315, and 1200 × 630 is exactly twice that: the smallest file that fills the slot on a high-density screen without upscaling. Wider buys nothing but bytes; below 600 × 315 the network stops offering the wide card and the link renders as a thumbnail beside two lines of text.
The square matters too. A small summary card on X, previews in several chat clients and LinkedIn’s narrower slots crop to a square out of the middle, so anything within 285 pixels of either edge disappears — which the second preview above shows.
Type set for a monitor. A card renders 300 to 500 pixels wide on a phone, about a third of the file’s size, so type that looks generous at 32px arrives at 11px. Set the headline between 60 and 80 pixels, and never below about 34.
Weight. A flat card is a PNG of about 100 KB, a gradient closer to 700 KB because a PNG stores every one of those slightly different pixels, a photograph several megabytes. Facebook accepts 8 MB and X 5 MB, but a crawler that times out shows nothing. A gradient or a photograph belongs in a JPEG; both weights are printed under the button.
Transparency and SVG. An alpha channel is composited against whatever colour the client picks, frequently black, so fill the background. And no major crawler rasterises SVG: an og:image pointing at one produces an empty card.
A browser resolves /img/card.png against the page it is on. A crawler does not: it reads the tag as a string, with no base to resolve against, so a relative path fetches nothing. Write the scheme and host out, serve it over https, and make sure it needs no login — a staging site behind basic auth is the usual reason a card is blank for everyone but you. og:image:width and og:image:height beside it let the network lay the card out before the file arrives.
Every network caches the card it scraped, so editing the markup changes nothing until that cache clears: Facebook’s Sharing Debugger, LinkedIn’s Post Inspector and X’s card validator each re-scrape on demand. And if your head tags are added by JavaScript, view-source has no og: tags at all — which is why a card works in preview and fails when shared.
SVG to PNG
Convert SVG files to PNG at any scale, in the browser. Batch and transparent background.
HEX to RGB
Paste a hex colour, get RGB, HSL and CSS you can copy.
RGB to HEX
The other direction, with the same converter underneath.
PNG to SVG
Trace a bitmap into vector paths, in the browser. Honest about when it works.
CSS Grid generator
Draw a grid, copy the CSS. Flexbox on a second tab.
Mesh gradient generator
Layered radial gradients, exportable as CSS or PNG.
Website mockup generator
Drop a screenshot into a browser or device frame and export it.
Designing a site? Siter.io builds it from Figma.