OG Image Generator
Note: og:image must be an absolute URL — a relative path is silently ignored by every scraper, and is the most common reason a card appears blank. The safe-area guide is turned off automatically in the downloaded file.
The part people get wrong is the crop. Different platforms crop that rectangle differently — some to a square for a smaller card layout, some trimming the sides in a timeline. Anything essential placed near an edge will be cut somewhere. The safe-area guide here marks the central region that survives every common crop, and keeping your text and logo inside it is the difference between a card that works and one that reads "…ing Websit…".
Text size is the other. A card that looks fine at full size is displayed at around 500 pixels wide in a feed, and often smaller in a chat preview. That means a headline at 40 pixels in your design renders at about 17. The preview here shows the feed size alongside the full size for exactly that reason — if you cannot read it in the small one, nobody will.
The tags matter as much as the image. og:image needs an absolute URL — a relative path is silently ignored by every scraper. Declaring the width and height lets the platform lay out the card before the image arrives. And og:image:alt is the alt text for people using a screen reader on a shared link, which is a real audience and almost universally forgotten.
Everything is drawn on a canvas locally and downloaded from your browser.
Frequently Asked Questions
What size should an OG image be?
1200×630. That matches the 1.91:1 ratio the platforms expect and is large enough to stay sharp when downscaled on a high-density screen. Going larger mostly adds file weight; going smaller shows as soft.
Why is my image not showing when I share the link?
In order of likelihood: og:image is a relative URL rather than an absolute one, the page is behind authentication so the scraper cannot fetch it, or the platform has cached an older version. Each platform has a debugger that forces a re-scrape.
How big should the text be?
Larger than feels right. The card is displayed around 500 pixels wide in a feed and smaller in a chat preview, so a 40px headline in your 1200px design renders at roughly 17px. If it is not comfortable in the small preview here, it will not be readable anywhere.
Do I need separate Twitter tags?
Not for the image — Twitter falls back to og:image when no twitter:image is present. The one tag worth adding is twitter:card set to summary_large_image, without which your card renders as a small thumbnail rather than the full-width version.
Does the alt text matter?
Yes, and it is almost universally missed. og:image:alt is what a screen reader announces for a shared link, which is a genuine audience. It costs one line and there is no downside.
