OG image examples: make your link look like something when it is shared

How many pages ship without a share image

Across 237 launch pages we checked, 32% had no social share image (og:image), 21% were missing an Open Graph title and description, and 26% had no X (Twitter) card tag.

Strong pages almost never skip this. An Open Graph title and description were missing on 0% of pages scoring 70 or more, against 43% of pages under 50. The share image was missing on 12% of top pages and 53% of low ones. Pages with a share image averaged 57.4 points; pages without averaged 36.

This matters most on launch day. A launch is mostly links being shared: your own post, a friend's repost, a community thread, a DM. Each one unfurls into a card. A card with a clear image and headline invites a click; a bare URL or a blurry logo does not.

The tags you need

Put these in the head of every page you want shared:

<meta property="og:title" content="Invoices that chase themselves" />
<meta property="og:description" content="Mossbill sends polite reminders until your client pays. Free for freelancers." />
<meta property="og:image" content="https://example.com/og/home.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Mossbill dashboard showing three invoices marked paid" />
<meta property="og:url" content="https://example.com/" />
<meta name="twitter:card" content="summary_large_image" />

(Mossbill is a made-up brand we use for examples.)

Notes:

• Use an absolute URL for og:image, including https. Relative paths fail on many platforms.
• Declare the size. Width and height tags let platforms render the card without fetching the image first.
• Add alt text. og:image:alt makes the card accessible, and it is the text screen readers announce.
• Set twitter:card to summary_large_image to get the big image card on X instead of a small thumbnail.
• One image per page. Pages with their own topic (pricing, a blog post, a changelog entry) deserve their own image.

OG image size

The safe size is 1200 × 630 pixels (a 1.91:1 ratio), under about 1 MB, as PNG or JPG. That renders well on X, LinkedIn, Facebook, Slack, Discord and iMessage. Some sites export at double resolution (2400 × 1260) for sharp rendering on high-density screens, which also works.

Keep the important content in the centre: some platforms crop the edges or round the corners, and on small phone screens the card can be shown much smaller than you expect. Text should be readable at about 600 pixels wide.

What to put in the image

The best share images do one of three things:

1. Restate the promise. The headline from the page, large, with the product name. The simplest option and the most reliable.
2. Show the product. A cropped screenshot of the key screen, with a short headline. Best for visual products.
3. Show the result. A generated output, a chart, a before-and-after. Best for tools whose output is the selling point.

Avoid: the logo alone on a plain background (it says who, not what), tiny text, full-page screenshots that become unreadable when shrunk, and anything that disagrees with the page title.

OG image ideas by page type

Different pages deserve different cards:

• Homepage: the main promise in large type, the product name and a cropped product screenshot. This is the card people see most, so spend the most time on it.
• Pricing page: the plan names, or a single line such as "Free for up to 3 users". People share pricing links when they are recommending you to a colleague.
• Blog posts and guides: the article title, large, with a small brand mark. Readable titles get more clicks than decorative illustrations.
• Changelog entries: the feature name and a screenshot of it. A good changelog card turns every release into something worth posting.
• Waitlist pages: the promise and a hint of the product, plus the call to action ("Join the waitlist"). See waitlist page examples.
• Launch day: some teams make a special card for the launch week, then switch back. If you do, remember that platforms cache old cards.

Keep brand colors and type consistent across all of them, so a stranger who sees two of your links recognises them as the same product.

Generate them instead of designing them

If you have more than a handful of pages, generate the images from the page data. Next.js, Vercel and most static site generators can render an image from a template at build or request time. Several of the examples below use a generated route: Linear's share image comes from an /api/og endpoint, and Screen Studio and Raycast serve theirs from an opengraph-image route. One template, consistent cards, and every new page gets a preview automatically.

Test before you post

Paste the URL into a private chat or a draft post before launch and look at the card. Platforms cache previews, sometimes for days, so if you fix the image after sharing, use the platform's own preview or debugging tool to refresh it. Check it in dark mode too.

The landing page analyzer checks the share image, the Open Graph title and description and the X card on every scan, as part of the social share readiness dimension. For what goes on the page itself, see hero section examples.