Open Graph Tags for SaaS Landing Pages: The Complete Guide

Why SaaS landing pages need better OG tags

Every time a prospect drops your URL in Slack, Notion, or Twitter, the unfurl card is your first impression. A generic purple gradient with your domain name and no description loses clicks. A sharp, benefit-led card with a clear headline wins them.

SaaS products get shared constantly — in sales threads, investor updates, community channels, and social posts. Your OG metadata is free marketing real estate you should never leave blank.

The minimum viable OG tag set

Every page on your SaaS site should have at least these five tags:

<meta property="og:title"       content="Your Product — One-Line Value Prop" />
<meta property="og:description" content="2–3 sentence pitch. What it does, who it's for." />
<meta property="og:image"       content="https://yoursite.com/og/homepage.png" />
<meta property="og:url"         content="https://yoursite.com/" />
<meta property="og:type"        content="website" />

<!-- Twitter/X card -->
<meta name="twitter:card"       content="summary_large_image" />
<meta name="twitter:title"      content="Your Product — One-Line Value Prop" />
<meta name="twitter:description" content="2–3 sentence pitch." />
<meta name="twitter:image"      content="https://yoursite.com/og/homepage.png" />

Skip any of these and you risk a broken unfurl on at least one platform. The og:url tag prevents duplicate-card issues when your page is linked with UTM parameters or query strings.

OG image specs for SaaS

Use 1200 × 630 px at 72 dpi. This covers Twitter, LinkedIn, Facebook, Slack, Discord, and iMessage unfurls. Skew too small and images will look pixelated; skew too tall and platforms crop the bottom.

Design principles that drive clicks for SaaS cards:

• Put your product headline in the top half — it survives most crops
• Use high contrast: dark background, bright text
• Include a product screenshot or UI mockup if space allows
• Keep your logo small and in a corner — buyers buy outcomes, not logos
• Avoid dense body copy — no one reads 12px text in a 400px card

Per-page OG strategy

Your homepage OG image is your brand-level pitch. But every high-traffic landing page deserves its own unique card:

• Pricing page: highlight your lowest paid tier or free trial CTA
• Feature pages: lead with the feature name and the user outcome
• Blog posts: use the post title in large type — curiosity drives clicks more than design polish
• Case studies: show the customer name and result metric (e.g., "Acme cut churn 40%")
• Changelog / announcements: tease the change with a dynamic template

Dynamic OG images at scale

For SaaS blogs with dozens or hundreds of posts, generating a static image per post is impractical. Use a server-side image generation approach:

// app/og/route.tsx  (Next.js App Router)
import { ImageResponse } from "next/og";

export const runtime = "edge";

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get("title") ?? "My SaaS Product";

  return new ImageResponse(
    (
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          background: "#0f172a",
          width: "100%",
          height: "100%",
          padding: "60px",
          justifyContent: "center",
        }}
      >
        <p style={{ color: "#818cf8", fontSize: 24, margin: 0 }}>yourproduct.com</p>
        <h1 style={{ color: "#fff", fontSize: 60, margin: "16px 0 0" }}>{title}</h1>
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

Then set your blog post OG image to /og?title=Your+Post+Title. Every post gets a unique, on-brand card with zero manual work.

Common SaaS OG mistakes

• Same image on every page. Platforms cache aggressively. When someone shares your pricing page, they should see a pricing-specific card — not the homepage hero.
• Absolute URLs with a trailing slash mismatch. If your canonical is https://yoursite.com/pricing but og:url is https://yoursite.com/pricing/, caches split and you get inconsistent cards.
• Images behind auth. OG crawlers don't have a session. Any image that returns a redirect to login will show a broken card. Always serve OG images from a public path.
• Forgetting to purge cache after changes. Twitter/X caches cards for ~7 days. Use the Card Validator to force a re-fetch after you ship.

Test before you launch

Before any major launch or campaign, preview your OG cards on every platform that matters to your buyers. The fastest way: use OG Fixer to preview how your URL unfurls on Twitter, Slack, Discord, LinkedIn, and Facebook in one shot — without waiting for each platform to re-crawl.

Platforms to check before a SaaS launch:

• Twitter / X — runs its own card crawler, separate from OG
• LinkedIn — caches aggressively, use the Post Inspector to purge
• Slack — most common sharing surface for B2B SaaS
• Discord — common in dev-tool communities
• Facebook — matters if you run paid social

Quick-reference checklist

✅  og:title      — matches your H1 or a stronger hook
✅  og:description — 2–3 sentences, outcome-led
✅  og:image       — 1200×630, served from a public CDN URL
✅  og:url         — canonical URL, no trailing slash inconsistency
✅  og:type        — "website" for marketing pages, "article" for blog posts
✅  twitter:card   — "summary_large_image" for full-width cards
✅  twitter:image  — can match og:image
✅  Unique images per high-value page (home, pricing, features)
✅  Dynamic OG generation for blog / changelog
✅  Tested on Twitter, LinkedIn, Slack, Discord before launch

Related guides

• OG image size guide — exact dimensions for every platform
• Twitter card vs OG tags — what's different and why it matters
• OG image not showing? Fix it in 5 minutes