Open Graph Tags for Landing Pages: Maximize Click-Through Rates

Why landing page OG tags are different

Landing pages have a single job: convert. Every element on the page exists to drive one action. Your OG tags should follow the same principle — they're the first thing someone sees before they even click through to your page.

When someone shares your landing page in a Slack channel, on Twitter, or in a group chat, the OG preview is your pitch. A compelling OG image with a clear value proposition can double your click-through rate compared to a generic favicon-only preview.

Unlike blog posts or documentation, landing page OG tags should be benefit-driven, not descriptive. Don't tell people what the page is — tell them what they'll get.

Essential OG tags for landing pages

<!-- Landing page OG tags -->
<meta property="og:title" content="Ship 10x Faster — Free for Solo Devs" />
<meta property="og:description" content="AI-powered deployment that just works. Deploy to production in 30 seconds. No config needed." />
<meta property="og:image" content="https://yourapp.com/og/landing-deploy.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://yourapp.com/deploy" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Ship 10x Faster — Free for Solo Devs" />
<meta name="twitter:description" content="AI-powered deployment that just works." />
<meta name="twitter:image" content="https://yourapp.com/og/landing-deploy.png" />

Crafting high-converting OG titles

Your og:title is the headline of your social preview. Follow these rules for landing pages:

• Lead with the benefit: "Save 10 hours/week on deploys" beats "Acme Deploy Platform"
• Include a hook: Numbers, comparisons, or timeframes create urgency
• Keep it under 60 characters: Longer titles get truncated on most platforms
• Match the page headline: Consistency builds trust when someone clicks through
• Test variations: A/B test OG titles the same way you'd test ad copy

OG image design for landing pages

Landing page OG images should function like a billboard — clear, branded, and immediately understandable. Here's what works:

• Product screenshot + value prop text: Show what they'll get with a supporting headline
• Social proof overlay: "Used by 10,000+ developers" builds instant credibility
• Clear CTA hint: "Try free →" or "See demo" primes the click action
• Brand colors: Make your links instantly recognizable in a feed

Avoid using your landing page screenshot as the OG image — it's too detailed at preview size and looks lazy. Create a purpose-built OG image that works at 600×315 (the smallest common render size).

Platform-specific optimization

Different platforms render OG previews differently. Optimize for where your landing page is most likely to be shared:

Twitter/X

Uses summary_large_image for full-width previews. Your image should be eye-catching in a scrolling feed.

LinkedIn

Renders a larger image with the title below. Professional audience — keep the design clean and authoritative.

Slack

Shows a compact preview with image, title, and description. Slack users share landing pages in channels for team evaluation — make sure the description sells.

iMessage / WhatsApp

Renders a small thumbnail with title. Your image needs to work at very small sizes here.

UTM tracking and OG tags

When running paid campaigns or email marketing, you'll add UTM parameters to your landing page URLs. Make sure your og:url points to the canonical URL without UTM parameters:

<!-- Shared URL: https://yourapp.com/launch?utm_source=twitter&utm_medium=paid -->
<!-- og:url should be the canonical: -->
<meta property="og:url" content="https://yourapp.com/launch" />

This ensures that all shares consolidate engagement signals to the same URL, regardless of the tracking parameters in the shared link.

Common landing page OG mistakes

• Using the homepage OG image on every landing page
• Writing descriptive titles instead of benefit-driven ones
• Forgetting to set twitter:card to summary_large_image
• Not testing the preview on Slack/Discord (where many B2B links are shared)
• Serving OG images over HTTP instead of HTTPS
• Using images smaller than 1200×630px