How to Create OG Images That Get Clicks on Twitter and LinkedIn

You wrote a great blog post. You share it on Twitter. The preview card shows a blurry logo on a white background. Three people click it.

Your competitor shares a mediocre post. Their preview card has a bold, eye-catching image with a clear headline. Three hundred people click it.

The difference isn't the content. It's the OG image.

Here's how to create social cards that actually get clicks on Twitter and LinkedIn — the two platforms where link sharing matters most.

What Makes People Click on a Social Card?

Before getting into tactics, understand what's happening psychologically. When someone sees a link in their timeline, they make a split-second decision: click or scroll.

Three things drive that decision:

• Visual pattern interrupt — Does the card stand out from surrounding content?
• Value clarity — Can I tell what I'll get if I click?
• Trust signals — Does this look professional and credible?

Your OG image needs to deliver all three in under a second. That's the game.

Most OG images fail because they try to do too much. They cram in logos, subtitles, author photos, and decorative elements. The result is visual noise. In a noisy feed, noise gets ignored.

The best-performing social cards are simple. A clear headline, a strong visual, and enough branding to establish credibility. Nothing more.

Twitter/X: What Actually Works

Twitter is fast-paced. Users scroll aggressively. Your card competes with memes, threads, and hot takes. Subtlety doesn't work here.

Card format matters

Twitter supports two card types: summary (small image) and summary_large_image (large image). Always use large image. The extra visual real estate is the difference between getting noticed and getting skipped.

Set this in your HTML:

```html

```

Design rules for Twitter:

• Use bold, saturated colors. Twitter timelines are mostly text with occasional photos. Bright gradients and strong colors pop against the white (or dark) feed background.
• Put the headline in the image. Don't rely on og:title text below the card. Many people only look at the image. If your key message isn't in the visual, they'll miss it.
• Keep aspect ratio at 1.91:1. Twitter crops to this ratio. Design at 1200 x 628 pixels to avoid losing important content to auto-cropping.
• Test in dark mode. More than 80% of Twitter users are on dark mode. If your OG image uses a white or very light background, it can look washed out. Darker or more saturated backgrounds tend to perform better.

What gets engagement on Twitter:

• Numbers in the headline ("7 ways to...", "We grew 300%...")
• Before/after visuals showing a transformation
• Screenshots of real products or dashboards
• Bold, single-color backgrounds with large text

LinkedIn: A Different Audience, Different Approach

LinkedIn is slower and more intentional. People are in professional mode. The aesthetic that works on Twitter can feel out of place here.

Design rules for LinkedIn:

• Cleaner, more professional look. Subtle gradients, neutral tones, and polished typography signal credibility to a professional audience.
• Show data and results. LinkedIn users respond to charts, metrics, and case study visuals. An OG image showing a graph or key metric can outperform a generic branded card.
• Include your brand clearly. LinkedIn audiences care about who's sharing. A recognizable brand element (logo, color scheme) builds trust.
• Use 1200 x 627 pixels. LinkedIn has its own ratio. Design specifically for it rather than hoping a Twitter-sized image works. A LinkedIn image generator ensures your images are sized correctly for this platform.

What gets engagement on LinkedIn:

• Professional-looking mockups of your product
• Clean cards with a single strong stat or insight
• Industry-relevant imagery (not generic stock photos)
• Thought leadership-style text cards with quotable lines

A/B Testing Your OG Images

Most people create one OG image and forget about it. That's leaving clicks on the table.

Here's a simple approach to testing:

1. Create two variations — Same content, different visual treatment (e.g., different background color, different headline emphasis)

2. Share each version on different days — Track clicks using UTM parameters or your analytics tool

3. Compare click-through rates — Not just likes. Actual clicks to your site

4. Keep the winner — Update your og:image tag to the better performer

Things worth testing:

• Dark vs. light backgrounds
• With product screenshot vs. text-only
• Different headline phrasings
• With author photo vs. without
• Minimal design vs. information-rich

Even small improvements compound. A 10% lift in CTR on every shared link adds up to significant traffic over time.

Building a Reusable Template

Creating OG images from scratch for every page isn't sustainable. You need a template.

A good OG image template has:

• Fixed elements: Logo position, brand colors, font choices
• Variable elements: Headline text, optional screenshot/visual
• Safe zones: Areas where text won't get cropped by any platform
• Consistent dimensions: 1200 x 630 as the universal starting point

Once you have a template, creating a new OG image should take under two minutes. A social card generator can speed this up even further with built-in templates optimized for each platform.

The Quick Way

You don't need Figma, Photoshop, or a designer on retainer. A dedicated tool gets you there faster.

With Screenhance, the process is:

• Upload your screenshot or product image
• Choose a background and device frame that matches your brand
• Export at the right dimensions for social sharing
• Set it as your og:image and you're done

The advantage of using a tool built for this: every export is already sized correctly, the backgrounds are designed to pop in social feeds, and the whole thing takes a couple of minutes.

For detailed design principles, check the OG Image Best Practices guide.

Frequently Asked Questions

Should I put text in my OG image?

Yes, in most cases. The og:title text that appears below the card is often truncated or ignored. Putting your key message directly in the image ensures people see it. Keep it to 5-7 words max — enough to communicate value, not so much that it becomes unreadable at small sizes.

How do I test what my OG image looks like before sharing?

Use platform-specific testing tools. Twitter has the Card Validator, LinkedIn has the Post Inspector, and Facebook has the Sharing Debugger. These tools fetch your page's OG metadata and show exactly how your card will render. Always test before sharing important content.

Do I need different OG images for Twitter and LinkedIn?

Ideally, yes. Twitter supports its own meta tags (twitter:image) that override the default og:image. This lets you serve a Twitter-optimized image to Twitter and a LinkedIn-optimized image via the standard og:image tag. If you can only create one, design for 1200 x 630 and it will work reasonably well on both.

Should every page have its own OG image, or is one site-wide image enough?

Pages that get shared independently need their own OG image. Pages that only get reached from a navigation menu can share a site-wide default. In practice, that means your homepage, every blog post, every product or feature page, and every landing page should have a unique OG image. Documentation deep-links, account settings, and similar utility pages can fall back to the site default with no real loss. The deciding question is whether the URL is ever shared as a primary destination — if yes, it deserves its own card.

How do Slack and Discord render OG images differently from Twitter and LinkedIn?

Slack and Discord pull OG metadata aggressively and unfurl links into a preview card inline in the chat. Both prefer a 1200x630 image but render it smaller than social platforms do — usually around 350-400 pixels wide. That means text designed to be legible on Twitter at small sizes will still be legible in Slack, but anything you tuned for full-size rendering will be unreadable. Slack and Discord also honor the `og:image:alt` tag, which is worth setting for accessibility. Unlike Twitter, they refresh OG metadata more aggressively, so cached-image issues are less common but still worth testing.

Why does LinkedIn's link preview look different from what I designed?

LinkedIn applies its own image processing on top of your OG image — it crops, compresses, and sometimes adds a subtle border. Light backgrounds occasionally pick up a faint gray frame on LinkedIn that does not appear on other platforms. The fix is to design with at least 60 pixels of safe space around any critical text or visual element, use a slightly darker or more saturated background to avoid the border artifact, and verify with the LinkedIn Post Inspector before publishing. Never trust a Twitter or Facebook preview as a stand-in for LinkedIn's rendering.

Do I need to regenerate OG images after a site redesign?

Yes, and the trap is that you also need to convince every social platform to re-fetch them. Updating the meta tag is not enough on its own — platforms cache OG images by URL, so unless the URL changes, they will keep serving the old image for days or weeks. The reliable pattern is to version your OG image URLs (append a query parameter or hash the filename), update the meta tag to point at the new URL, and manually trigger a re-scrape on the major platforms via their debugger tools. For sites with thousands of pages, automate the URL versioning as part of your build rather than doing it by hand.

The OG Image Template Most Websites Should Ship in 2026

After looking at thousands of OG images across blogs, SaaS products, and content sites, the template that works for the broadest set of websites is depressingly consistent. It is not the most creative answer. It is the answer that performs.

The shape: a 1200x630 canvas with the headline occupying roughly the left two-thirds of the frame, the visual element (screenshot, illustration, or product mark) occupying the right third, and a small brand strip (logo + domain) anchored in one corner. The headline is short — six words or fewer — set in a heavyweight sans-serif at around 60-80 pixels, with enough leading that two-line headlines do not feel cramped. The background is a single confident color or a subtle gradient that does not compete with the typography. The visual element is large enough to register as a visual, small enough to leave the headline as the primary focal point.

Why this template wins is mostly negative — it avoids the failure modes of more ambitious designs. Centered text struggles when headlines vary in length. Full-bleed background images compete with the headline. Heavy decorative elements compress at small render sizes and become visual noise. Author photos and timestamps are vestigial: nobody clicks a link because they recognize the author from a 200-pixel-wide preview card. Stripping the design down to "headline plus one visual plus brand mark" leaves enough room for the actual content to lead, and the template scales gracefully across every page on a site without looking templated. Tools like a social card generator ship templates close to this shape because the template fits how OG previews actually render in the wild.

Branded OG Cards vs Neutral OG Cards

The other strategic decision worth making explicit is how heavily to brand the OG cards in the first place. There are two coherent answers, and the right one depends on what kind of product you sell.

A heavily branded OG card — consistent palette, prominent logo, recognizable layout — works for B2B audiences and trust-driven categories. The viewer often does not need the specific page's content to make a click decision; they need to know that a brand they vaguely trust published something. A clean, branded card communicates "this is a credible source" before the headline does. Newsletter-led businesses, developer tools, and enterprise SaaS tend to lean here because their audience is repeat-encounter.

A neutral OG card — content-forward, lighter branding, headline as the dominant element — works for consumer audiences and discovery-driven categories. The viewer is encountering you cold and does not have a prior relationship to leverage. The job of the card is to sell the specific piece of content, not the brand. Recipe sites, media properties, and consumer apps almost universally favor this approach because every share is competing on the merits of that one piece.

The hybrid pattern that bridges both audiences is "headline-dominant with a quiet brand strip." The headline does the work of selling the content, while a small logo and domain mark in a corner provides enough brand recognition to compound across repeat shares. For most websites, especially mixed B2B-and-consumer ones, this is the safer default. Use the OG image generator workflow to lock in the brand strip across templates so you get the consistency without the heavy-handedness.

Related Reading

• OG Image Best Practices: The Complete Guide to Social Share Images - Foundational design principles
• How to Make Screenshots That Go Viral on Twitter/X - Twitter-specific visual strategies
• How to Create LinkedIn Post Images That Get Engagement - LinkedIn image optimization
• Free OG Image Generator: Create Social Cards Without Design Skills - Tool comparison and guide

Conclusion

Creating OG images that get clicks isn't about being a designer. It's about understanding what makes people stop scrolling.

On Twitter, that means bold colors and clear headlines. On LinkedIn, it means professional polish and value-driven visuals. On both, it means consistency and intentional design.

Invest a few minutes per page. The return shows up in every single share.