Designing OG Images That Drive Social Media Clicks
The OG image is the most underinvested part of social media marketing. Here's what makes social preview images drive clicks: dimensions, contrast, readable text at thumbnail size, template-based generation at scale, and platform-specific caching considerations.
By sadiqbd · June 8, 2026
The OG image is the most underinvested piece of social media marketing
You spend hours writing a great blog post. You promote it across LinkedIn, Twitter, and email. People share it. And then the social preview shows a generic site logo, or a random product image from the page, or — worst of all — no image at all. The post gets shared, but nobody clicks the link because the preview looks like there's nothing there.
The social preview image (set through the og:image tag) is the first visual contact most people have with your shared content. It determines click-through rate from social shares more than any other element. Yet most sites either use a generic template for all pages or leave it to chance.
What makes a social preview image work
Before design details, the functional requirements:
Correct dimensions: The standard og:image size is 1200 × 630 pixels (approximately 1.91:1 ratio). This renders correctly on Facebook, LinkedIn, Twitter (as summary_large_image), and Apple Messages. Using smaller images causes blurry rendering or incorrect cropping on some platforms.
HTTPS URL: The og:image URL must be HTTPS. HTTP images fail on many platforms.
Direct image URL: The URL must return the image file directly — not a web page containing the image, not a redirect. If the URL returns HTML instead of an image, the preview breaks.
Under 8MB: Facebook's documented maximum. Most platforms have similar limits. Optimise images; a 1200 × 630 JPEG should be well under 200KB.
No important content near edges: platforms crop og:images differently. Keeping critical content within the central 80% of the frame prevents cropping from cutting off your brand name or title text.
The design principles that drive clicks
Text that's readable at thumbnail size
Social feeds are visually noisy. Your og:image will be displayed at relatively small sizes — perhaps 400 × 210 pixels in a desktop LinkedIn feed. Text that looks reasonable at full size can become illegible at feed size.
Test your og:images at reduced sizes before deploying. Target a minimum font size of 40–48px at the 1200 × 630 canvas — this renders legibly at feed preview sizes.
High contrast
Light text on a medium-colour background fails. Dark text on a pale background fails. The safest combinations: white text on a dark solid colour, or dark text on a near-white background. If you use a photograph as the background, add a semi-transparent overlay to create contrast for text.
Single clear focal point
A great og:image answers one question in under 2 seconds: "What is this page about?" Too many elements — headline, subheading, author photo, URL, decorative graphics, plus a complex background — compete for attention. Strip to what matters: the page title and your brand identity.
Effective og:image elements (pick 2–3):
- The page title (or a shortened version) — prominently displayed
- Your brand name or logo — consistently positioned (corner or bottom)
- A relevant background image or colour — reinforces the topic
Template-based OG image generation
For sites with many pages, manually creating a custom og:image for every page is impractical. Template-based generation produces consistent, on-brand previews at scale.
Approach 1: Design template + manual population Create a Figma or Canva template with brand colours, fonts, and consistent layout. For each page, duplicate the template, swap the title text and any relevant illustration, export as JPEG. Works well for up to 20–50 pages.
Approach 2: API-based automated generation Services like Bannerbear, Placid, or custom code using Puppeteer or playwright can generate og:images programmatically from a template, inserting dynamic title and other data. Scales to thousands of pages.
Approach 3: Cloudinary transformations Cloudinary supports URL-based image transformations including text overlay. A template image URL can have the page title appended as URL parameters, producing a unique og:image on demand without pre-generation.
Platform-specific considerations
LinkedIn: uses og:image with strict caching. Changes take time to propagate — LinkedIn's cache can hold old previews for weeks. Use the LinkedIn Post Inspector to clear cache after changes.
Twitter/X: uses either twitter:card summary_large_image (preferred) or falls back to og:image. The twitter:card meta tag must be set for large image display; without it, only a small square image appears.
Facebook/Instagram: strict about image caching. Use the Facebook Sharing Debugger to force a cache refresh when og:image changes.
WhatsApp: respects og:image for link previews in messages. Widely used for content sharing in many markets — worth verifying WhatsApp previews specifically, particularly for pages that might be shared via messaging apps.
iMessage/Apple Messages: uses og:image. Testing on iOS with a real link share is the most reliable way to verify.
A/B testing og:images
Different og:image designs produce different click-through rates from social shares. Testing approaches:
Organic share observation: publish variations on different batches of similar content and track click-through rates from social referrers in analytics. Requires enough data volume to be meaningful.
Paid social with image variants: if running paid promotion of content, test og:image variants as creative variants in the campaign. This generates statistically valid data faster than organic sharing.
UTM parameters per variant: when manually sharing different versions, use UTM-tagged URLs to track which image variant drives more clicks.
Things worth testing:
- Photography background vs. solid colour background
- Title text as large headline vs. smaller with more white space
- Brand logo in corner vs. bottom centre vs. absent
- Short title vs. longer explanation
How to use the Open Graph Generator on sadiqbd.com
- Enter the page URL — the canonical URL
- Enter og:title — the social preview title (can differ from the HTML title tag)
- Enter og:description — 1–3 sentence social summary
- Enter og:image URL — the fully qualified HTTPS URL to your og:image
- Select og:type — website, article, product
- Generate — the tool produces all og: and twitter: meta tags
- Copy into your page's
<head>
After deploying, verify with:
- Facebook Sharing Debugger (developers.facebook.com/tools/debug)
- LinkedIn Post Inspector (linkedin.com/post-inspector)
- Twitter Card Validator (cards-dev.twitter.com/validator)
Frequently Asked Questions
How often should I update og:images? When the content significantly changes, when you rebrand, or when testing suggests a better-performing design. There's no need for regular rotation — consistent, brand-aligned previews build recognition over time.
Can og:image differ from the main page image? Yes — og:image is specifically for social previews and is independent of any images on the page itself. It's common for og:images to be designed specifically for social preview (landscape, text-forward) rather than being screenshots of the page.
What if I can't create custom og:images for all my pages? Set a good site-wide fallback og:image that represents your brand — better than nothing. Prioritise custom images for pages you actively promote and your highest-traffic content. A template-based approach (consistent design, dynamic title) is the scalable middle ground.
Is the Open Graph Generator free? Yes — completely free, no sign-up required.
The minutes spent crafting a compelling og:image multiply across every share of that page. It's one of the highest-leverage pieces of content production with the lowest time investment relative to impact on social traffic.
Try the Open Graph Generator free at sadiqbd.com — generate complete og: and Twitter Card meta tags for any page, ready to paste into your <head>.
