Every time someone shares a link to your SaaS product — on Twitter, LinkedIn, Slack, Discord, or in a group chat — the platform generates a preview card. That card is powered by your OG image (Open Graph image), and it's often the single factor that determines whether people click through or scroll past.
Pages with optimized OG images see a 40–50% increase in social media click-through rates compared to pages without them. For SaaS companies that rely on social distribution, referral traffic, and community sharing, that's not a nice-to-have — it's a growth lever.
This guide covers everything you need to know about og image best practices for SaaS: the correct sizes for every platform, what your OG images should actually show, how to implement the meta tags, and how to generate them without a designer.
What Are OG Images and Why Do They Matter for SaaS?
Open Graph is a protocol originally created by Facebook that lets you control how your web pages appear when shared on social platforms. When you add specific meta tags to your page's HTML <head>, platforms use those tags — including og:image — to build the preview card people see.
Without an og:image tag, platforms either show nothing, grab a random image from your page, or display a generic placeholder. None of those outcomes help your click-through rate.
For SaaS companies, OG images matter in three specific ways. First, social distribution — when users, investors, or journalists share your product link, the preview card is your first impression. A polished OG image makes the link look credible and worth clicking. Second, community channels — SaaS products get shared in Slack workspaces, Discord servers, WhatsApp groups, and iMessage threads. These platforms all render OG previews, and a missing or broken preview image looks unprofessional. Third, backlink quality — people are more likely to link to content that looks good when shared. A strong OG image increases the likelihood that blog readers will share your post, driving organic backlinks and referral traffic.
The Right OG Image Size for Every Platform
The universal recommendation is 1200 × 630 pixels with a 1.91:1 aspect ratio. This single size works well across Facebook, Twitter/X, LinkedIn, Slack, Discord, and most other platforms. If you only create one size, make it 1200×630.
However, platforms have different minimums and some have optimized dimensions:
| Platform | Recommended Size | Aspect Ratio | Minimum Size | Notes |
|---|---|---|---|---|
| 1200 × 630 | 1.91:1 | 200 × 200 | Won't display image below minimum | |
| Twitter/X | 1200 × 675 | 1.91:1 | 300 × 157 | For summary_large_image cards |
| 1200 × 627 | 1.91:1 | 1200 × 627 | Hard minimum — smaller images won't show at all | |
| Slack | 1200 × 630 | 1.91:1 | No strict min | Renders inline in messages |
| Discord | 1200 × 630 | 1.91:1 | No strict min | Shows in link embeds |
| 1200 × 630 | 1.91:1 | 300 × 200 | Compressed heavily | |
| iMessage | 1200 × 630 | 1.91:1 | No strict min | Shows in link previews |
Key takeaway: LinkedIn is the strictest — images smaller than 1200×627 pixels simply won't appear, and your link renders as text-only. If your SaaS audience is on LinkedIn (and for most B2B SaaS, it is), always meet that minimum.
File format: Use PNG for images with text, logos, or sharp edges. Use JPEG for photograph-heavy images. Keep file size under 5MB, and always serve the image over HTTPS — all major platforms block HTTP images in social previews.
What Should a SaaS OG Image Actually Show?
This is where most OG image guides fall short. They tell you the dimensions but not what to put in the image. For SaaS products, there are three effective approaches:
Approach 1: Product Screenshot in a Device Frame
Take a screenshot of your core product view, place it inside a laptop or browser frame, and add a branded background. This works well for product pages and feature announcements because it shows the actual product — building trust and curiosity.
Best for: Product pages, feature announcements, changelog posts, demo pages.
Approach 2: Branded Template with Title
Create a consistent template with your logo, brand colors, and a text overlay showing the page title or a key value proposition. This scales well across blog posts because you can generate them programmatically.
Best for: Blog posts, documentation pages, company pages, career pages.
Approach 3: Hybrid (Product Screenshot + Brand Overlay)
Combine a product screenshot with a branded overlay: your logo in the corner, the page title as text, and a subtle gradient to ensure text readability. This approach gives you the trust signal of a real product screenshot with the branding consistency of a template.
Best for: Landing pages, pricing pages, comparison pages — anywhere you want both product proof and brand presence.
The common thread: Regardless of approach, the OG image should be visually distinct from a generic stock photo. Colorful, descriptive images with clear product context outperform generic logos or plain text every time.
How to Design OG Images That Get Clicks
Good OG image design follows a few consistent principles:
Keep text minimal and large. Social previews display at small sizes — especially on mobile. If you include text, limit it to 5–8 words maximum and use a font size that's readable at 400px wide (roughly how Twitter renders the card on mobile). A headline and maybe a subtitle is enough.
Use high contrast. Dark backgrounds with light text tend to perform well because they stand out in social feeds, which are predominantly white or light-gray. Your OG image needs to catch the eye among a stream of competing content.
Show the product. For SaaS companies, the most compelling OG images include an actual screenshot or UI element. This immediately differentiates your link from the sea of generic stock-photo-based previews. Even a small, partially visible product UI adds credibility.
Maintain brand consistency. Every OG image across your site should feel like it belongs to the same family — consistent colors, fonts, logo placement, and layout structure. This builds recognition over time.
Mind the safe zone. Different platforms crop slightly differently. Keep critical elements (text, logos, key UI) within the center 80% of the image to avoid unexpected cropping on any platform.
How to Implement OG Meta Tags
Adding OG images to your site requires placing the right meta tags in your page's <head> section. Here's the essential set:
<head>
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling description of the page" />
<meta property="og:image" content="https://yoursite.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yoursite.com/og-image.png" />
</head>
Critical details:
The og:image URL must be absolute (starting with https://). Relative paths like /images/og.png won't work — social media crawlers can't resolve them. Always include og:image:width and og:image:height — some platforms use these to decide whether to display the image before it fully loads. For Twitter/X, you need the separate twitter:card and twitter:image tags. Without twitter:card set to summary_large_image, Twitter may display a tiny thumbnail instead of the full preview.
Framework-Specific Implementation
Next.js (App Router):
export const metadata = {
openGraph: {
title: 'Your Page Title',
description: 'Your description',
images: [{ url: 'https://yoursite.com/og.png', width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
images: ['https://yoursite.com/og.png'],
},
}
WordPress: Use a plugin like Yoast SEO or RankMath, which provide UI fields for setting OG images per page without touching code.
Static HTML / Gatsby / Hugo: Add the meta tags directly to your layout template's <head>.
Dynamic OG Image Generation for SaaS Blogs
Manually creating an OG image for every blog post doesn't scale. If you're publishing regularly, you need an automated approach.
Vercel OG (for Next.js): Generates OG images at the edge using React components. You write a JSX template, and Vercel renders it as a PNG on each request. Free for Vercel-hosted projects and the standard approach for Next.js blogs.
Satori + @vercel/og: The open-source library behind Vercel OG. Converts HTML/CSS to SVG, then to PNG. You can self-host it on any Node.js server.
Cloudinary: URL-based image transformations. Construct a URL with text overlays, backgrounds, and logo placement as parameters. Works with any stack.
Framiq: Generates OG images (1200×630) from product screenshots as a core feature — you upload a screenshot, and it produces a branded OG image with the right dimensions, device framing, and background automatically. Particularly useful for SaaS landing pages and product pages where you want the OG image to show actual product UI.
Template-based tools: Canva, Figma, or Bannerbear let you create OG image templates and fill them with dynamic content (title, author, date) via API or manual process.
For most SaaS companies with a blog, the practical choice is Vercel OG for blog posts (auto-generated from title/description) plus Framiq or manual design for key product pages (where showing the actual product matters).
Testing and Debugging Your OG Images
Before sharing any link publicly, verify that your OG image renders correctly:
Facebook Sharing Debugger — Enter your URL and see exactly what Facebook will display. Also forces a cache refresh if you've updated your OG tags. This is the most commonly used debugging tool.
Twitter Card Validator — Preview how your link will appear on Twitter/X. Shows whether the large image card is rendering correctly.
LinkedIn Post Inspector — Check how LinkedIn renders your link preview. Particularly important given LinkedIn's strict minimum image size requirements.
OpenGraph.xyz — A free all-in-one preview tool that shows how your link looks across Facebook, Twitter, LinkedIn, and other platforms simultaneously.
Chrome DevTools: Right-click → View Page Source → search for og:image to verify the meta tag is present and the URL is correct. This catches issues before you even need the platform debuggers.
Debugging Checklist
If your OG image isn't showing, check these in order: is the og:image URL absolute (starts with https://)? Is the image actually accessible at that URL (try opening it in an incognito browser tab)? Is the image at least 1200×627 pixels (LinkedIn's minimum)? Have you cleared the platform's cache (Facebook Debugger's "Scrape Again" button)? Are width and height meta tags included?
Common OG Image Mistakes (and How to Fix Them)
Using relative URLs. The most common technical mistake. /images/og.png won't work — social crawlers need the full URL: https://yoursite.com/images/og.png.
Serving images over HTTP. All major platforms block non-HTTPS images. If your OG image URL starts with http://, it won't display anywhere.
Forgetting the Twitter card tag. Without <meta name="twitter:card" content="summary_large_image" />, Twitter falls back to a tiny thumbnail. This is separate from the Open Graph tags and easy to overlook.
Images too small for LinkedIn. LinkedIn has a hard minimum of 1200×627 pixels. Below that threshold, it won't show any image at all — your link appears as plain text. This is the strictest platform requirement and catches many SaaS sites off guard.
Not accounting for caching. Social platforms cache OG data aggressively. After updating your image, you must manually force a re-scrape using each platform's debugging tool. Simply changing the image file isn't enough.
Using your logo as the OG image. A small logo on a white background tells potential visitors nothing about what they'll find on the page. Show the product, show the content, or at minimum include a descriptive title.
OG Images for SaaS-Specific Channels
SaaS products get shared in places that generic OG guides don't cover:
Product Hunt: OG images appear when your launch page or blog post is shared. Product Hunt has its own thumbnail system, but external shares of your PH page still use OG tags. Make sure your OG image showcases the product — PH audiences want to see what you've built.
Hacker News: HN doesn't render image previews in the feed itself, but external tools (HN Algolia, social share buttons) and the Show HN discussion context benefit from proper OG images when links are copied elsewhere.
Slack and Discord: Both render rich link previews inline in chat. Since SaaS teams live in these tools, a broken or missing OG preview for your product page is embarrassing and undermines credibility. Slack unfurls links automatically — make sure yours look good.
WhatsApp and iMessage: These heavily compress images, so high-contrast designs with large text survive better than detailed screenshots. Keep your OG images bold and simple for messaging app contexts.
Email link previews: Some email clients (Apple Mail, Outlook) render OG previews for links in emails. This matters for SaaS companies doing outbound sales or sending newsletter content.
Tools to Create OG Images Without a Designer
Framiq — Generates OG images (1200×630) from product screenshots with automatic brand color detection, device framing, and backgrounds. Best for SaaS product pages where you want the OG image to show actual product UI. Also generates social media posts, hero sections, and Product Hunt packs.
OGImage.click — Free open-source OG image generator with templates optimized for blogs and documentation sites.
Vercel OG — Generates OG images at the edge using React components. The standard approach for Next.js projects.
Cloudinary — URL-based transformations for dynamic OG image generation at scale. Powerful but requires more setup.
Canva — General-purpose design tool with OG image templates. Good for teams already using Canva, but manual for each image.
Frequently Asked Questions
What size should an OG image be?
The recommended size is 1200 × 630 pixels with a 1.91:1 aspect ratio. This works across Facebook, Twitter/X, LinkedIn, Slack, Discord, WhatsApp, and iMessage. LinkedIn is the strictest platform — images smaller than 1200×627 pixels won't display at all.
What makes a good Open Graph image for SaaS?
A good SaaS OG image shows the actual product (a screenshot or UI element) combined with brand elements (logo, colors, minimal text). This approach builds trust by proving the product exists while maintaining visual consistency. Avoid generic stock photos or plain logos.
Why is my OG image not showing on social media?
The most common causes are: using a relative URL instead of an absolute one (must start with https://), serving the image over HTTP instead of HTTPS, the image being smaller than the platform's minimum size (especially LinkedIn's 1200×627 minimum), or platform caching showing an old version. Use Facebook's Sharing Debugger to diagnose and force a refresh.
Do OG images affect SEO?
OG images don't directly affect search rankings, but they have a strong indirect impact. Better OG images lead to higher social click-through rates, which drives more referral traffic and increases the likelihood of backlinks — both of which are SEO signals. Pages with strong social engagement tend to perform better in search over time.
How do I add an OG image to my website?
Add meta tags to your page's HTML <head> section: <meta property="og:image" content="https://yoursite.com/og-image.png" /> along with og:image:width and og:image:height tags. For Twitter/X, also add <meta name="twitter:card" content="summary_large_image" />. Use absolute HTTPS URLs only.
Your OG image is often the first visual impression people have of your SaaS product — before they ever visit your site. Get it right, and every shared link becomes a mini billboard for your product. Tools like Framiq can generate optimized OG images from a single product screenshot, so you don't have to choose between looking professional and shipping fast. For more on building a complete set of marketing visuals, see our guide on making SaaS screenshots look professional.