The Open Graph image that actually gets clicks
The image is the largest part of a link preview, and most products waste it on a logo or nothing at all. Here are the specs that make an OG image render correctly, and the choices that make it earn a click in a crowded feed.
Last updated June 17, 2026Your Open Graph image is the biggest element of a shared link card, so it does most of the work of earning a click. Make it 1200x630 pixels (1.91:1), under 5MB, at an absolute HTTPS URL, served in the page’s HTML. To earn the click: show the product or a few words of large, readable text, keep high contrast, and make it legible at thumbnail size. The common waste is a bare logo, tiny text, or no image at all, which drops you to a bare-URL card.
- Specs that make it render: 1200x630 px (1.91:1 ratio), under 5MB, PNG or JPEG, at an absolute HTTPS URL in your server-rendered HTML.
- Earn the click with one of two things: a clean shot of the product, or a few words of large, high-contrast text saying what it is.
- Design for thumbnail size. If the text is unreadable when the card is small, it is not doing its job.
- The waste cases: a bare logo with no context, text too small to read, or no
og:imageat all, which gives you a plain-URL card.
Your Open Graph image is the biggest element of a shared link card, which makes it the part that does most of the work of earning a click, and most products waste it on a bare logo or skip it entirely. Get it right and your link stands out in a feed; get it wrong and you either drop to a plain-URL card or show a thumbnail nobody can read. Here are the specs that make it render correctly, and the choices that make it actually pull a click.
01 · Get it to show at allThe specs that make it render
Before design, get the mechanics right, or the image will not appear no matter how good it looks:
- Size: 1200x630 pixels, a 1.91:1 ratio. This is what every major platform crops to for the large card, so designing at this size avoids awkward cropping.
- File: under 5MB, PNG or JPEG.
- URL: absolute and HTTPS.
https://pagewatch.dev/og.png, never a relative/og.png. Scrapers need the full URL, and X requires HTTPS for the image. - Location: in your server-rendered HTML. Like all Open Graph tags, if the
og:imageonly appears after JavaScript runs, the scraper never sees it.
Get those four right and your image renders everywhere. Get any one wrong and you are back to a bare-URL card.
02 · Design for the feedWhat earns the click
A link card competes for attention in a fast-moving feed, where your image is on screen for a fraction of a second. The images that win do one of two things, clearly:
- Show the product. A clean screenshot of Pagewatch actually monitoring a page tells a stranger more than any tagline. People trust what they can see.
- Say what it is, big. A few words of large, high-contrast text (“Watch any page for changes”) works when a screenshot would be too detailed to read small.
The card is often shown small, so judge your image at thumbnail scale, not on your full screen. If the text is unreadable or the screenshot turns to mush when shrunk, it fails where it counts. Big text, few words, strong contrast, and one focal point. If you have to squint at the thumbnail, so will everyone scrolling past it.
03 · Common mistakesThe ways it gets wasted
Most OG images underperform for predictable reasons:
- A bare logo. Means nothing to a stranger who has never seen your brand. It is the single most common waste of the card’s best real estate.
- Text too small to read. Detail that looks fine at full size disappears at thumbnail scale.
- No
og:imageat all. Drops you to a plain-URL card with no image, the worst outcome. - A generic stock illustration. Says “template” and tells the viewer nothing specific about your product.
The fix for all of them is the same: make the image show or state what your product is, legibly, at small size.
04 · The shareable surfaceWhere it fits
The OG image is the visual front door of every link you share, and it is pure Findable work: on your own site, quick to make, and decisive for how a shared link performs. It pairs with your Open Graph tags and the same discipline as your above-the-fold visual, show the product, do not just describe it. Make it once, test how it renders, and every share you ever get works a little harder.
Common questions
Get your free launch-readiness score
See what else is between your product and its first real users — Nilkick scores your readiness and hands you the map. Free, no login.
https:// optional · no account · we don't email you
Why your link looks broken when pasted, and the Open Graph tags that fix it
When your link shows up as a bare URL in Slack or X, you are missing Open Graph tags. The four that matter, the X card tag, and why they must be in your server-rendered HTML.
How to test your link preview before you share it anywhere
Before you post your launch, check how your link card renders. The tools to preview it, the caching gotcha that shows a stale card, and the checklist to run first.
Title tag and meta description for a product no one is searching for yet
When nobody searches your name yet, your title tag should lead with what you do, and your meta description should read like ad copy. Lengths, what Google rewrites, and what to write.