How to create an OG image
- Write the title people will see in the feed. Keep it short enough to read at a glance. A subtitle is optional; skip it if it repeats the headline.
- Choose a template and a size preset. Leave Open Graph 1200×630 selected unless you know you need a square, a tall pin, or an X-sized card.
- Set colours that match your site. If you upload a photo, raise the dark overlay until the type stays readable. Turn on the safe-area guide and keep words inside the box.
- Download PNG for sharp text, or JPG if the file is heavy. Host that file on your domain at a URL that will not change every deploy unless you plan to recache.
- Add the meta tags from this page to your document head, using the real https URL of the file. Then scrape the live page in a platform debugger or thelink preview checker.
What is an Open Graph image?
An Open Graph image is the picture a chat app or social network shows when someone pastes your URL. The Open Graph protocol defines a small set of meta tags. og:imageis the one that points at that picture. Facebook popularised the tags; LinkedIn, Slack, iMessage and many others still read them. X uses similar tags (and Twitter Card tags) for large summary images.
Without an og:image, the crawler guesses. You might get a random crop from the article, a tiny icon, or a blank box. A dedicated 1200×630 graphic with a readable title is more predictable than hoping the first photograph in the HTML is the right one. The file must be reachable with a normal GET request. Crawlers do not log in, run your single-page app, or wait on a client-side router.
You still need og:title andog:description for the text next to the picture. This generator only builds the image. Pair the PNG with those tags on the same page you intend to share.
Best OG image size and format
For a single file that works almost everywhere, export 1200×630 pixels (about 1.91:1). Facebook, LinkedIn and WhatsApp link previews all sit near that ratio. X large cards are close; this tool’s Twitter/X preset uses 1200×675 if you want a dedicated file. Square 1080×1080 and Pinterest 1000×1500 exist for those crops, not as a replacement for the default OG size.
PNG is the right default when the image is type on a flat or gradient background. JPG is reasonable when you start from a photograph and need a smaller download. Stay under a megabyte. Several platforms refuse or recode huge files, and a slow image delays the preview. SVG is a poor og:image: crawlers expect a raster. WebP support is still uneven, so prefer PNG or JPG for the tagged file.
Leave padding around the title. Some apps letterbox or crop toward the centre. The safe-area overlay on this page is a guide, not a guarantee. For a table of platform sizes, see thesocial media image size guide.
Common OG image mistakes
- Text too small. A headline that looks fine on a 27-inch monitor can vanish in a mobile feed. Use the auto-fit option and check the preview at the width of a phone.
- Wrong ratio. A vertical story frame tagged as og:image will be cropped. Start from 1200×630 unless you control the destination.
- File too large. Multi-megabyte PNGs fail silently on some crawlers. Compress or switch to JPG and watch the size warning above.
- Relative URL.
/og.pngis not enough. Usehttps://your-domain/og.png. - Cached preview. Replacing a file at the same URL often does nothing until you force a rescrape. Change the path or query string, then run the debugger.
OG image not showing?
If the live page has a valid, absolute og:image and the file returns 200 to anonymous requests, the usual leftover problem is cache. Facebook Sharing Debugger, LinkedIn Post Inspector and X’s card validator each have a scrape or refresh button. Run them after you deploy, not only after you save a local file.
Also confirm the tag is in the HTML source, robots.txt does not block the image, and the certificate is valid. A longer checklist will be published inGuides.