How it works
Everything is drawn on a 1200×630 canvas in your browser. The title is wrapped into three lines (four in the split template) and the font shrinks step by step until it fits; if the title is still too long at the smallest size, the last line is cut with an ellipsis. That’s your cue to shorten it. Your logo is read from your device and never uploaded. The text contrast check uses the WCAG formula and warns under 4.5:1.
Sizes, and what we checked
- Facebook recommends images at least 1200×630, as close to 1.91:1 as possible, and suggests og:image:width and og:image:height so the preview can render on the first share.
- The Open Graph protocol defines og:image:width, og:image:height and og:image:alt and says a page with og:image should also set og:image:alt.
- X shows a large image card when you set twitter:card to summary_large_image. We couldn’t open X’s current card documentation when we wrote this, so we don’t quote its limits. Share a test post and check the crop.
Add it to your page
Download the PNG, upload it to your site (for example /og-image.png), and put its absolute URL in the tags under the tool. Keep the file name stable: when you change the image, platforms that cached the old one may keep showing it for a while. Paste the tags with the rest of your Open Graph tags, deploy, then test the live URL with the Open Graph checker.
For a clear image: one short title, with the benefit in plain words, not your tagline. Keep text away from the edges, and use the subtitle for what the reader gets. A matching favicon in the same brand colour makes links from your site easier to spot.