Open Graph Tags for SaaS: Why Your Blog Posts Look Broken on LinkedIn and Twitter

Q: Do Open Graph tags affect Google SEO rankings?

Open Graph tags don't directly affect Google rankings. However, they indirectly influence SEO through social signals and traffic: well-implemented OG tags increase click-through rates when content is shared, driving more referral traffic and social backlinks. For LinkedIn in particular — which many B2B SaaS companies use for distribution — an OG image increases engagement by 2-3x compared to a text-only link post.

Q: What is the difference between Open Graph tags and Twitter Card tags?

Open Graph (og:) tags were created by Facebook and are used by LinkedIn, Slack, WhatsApp, Facebook, and many other platforms. Twitter Card (twitter:) tags were created by Twitter/X and are specific to that platform. Both control how link previews appear, but they use different meta name formats. Best practice: implement both. Twitter falls back to OG tags if Twitter Card tags are missing, but explicit Twitter Card tags give better control over how content displays specifically on Twitter/X.

Q: What size should the Open Graph image be?

The recommended OG image size is 1200x630 pixels (1.91:1 aspect ratio). This works well across LinkedIn, Facebook, Twitter/X, and Slack. Minimum size is 600x315 pixels — anything smaller won't display as a large card. Use PNG or JPEG format. Keep file size under 8MB (ideally under 1MB for fast loading). Make sure the image URL is absolute (starting with https://) and publicly accessible without authentication.

Q: How do I test if my Open Graph tags are working?

Use these free tools: (1) LinkedIn Post Inspector (linkedin.com/post-inspector) — shows exactly how LinkedIn will render your link card, with a 'Clear Cache' button to force a refresh. (2) Twitter Card Validator (cards-dev.twitter.com/validator) — shows how your Twitter Card will display. (3) Facebook Sharing Debugger (developers.facebook.com/tools/debug) — also used for WhatsApp previews. (4) OpenGraph.xyz — shows previews across multiple platforms at once. Test after any OG tag change, as platforms cache link previews aggressively.

Your team just published a great blog post. Someone shares it on LinkedIn. Instead of a clean preview card with an image, title, and description, it shows up as a bare URL — or worse, pulls in a random image from your nav bar and truncates the title at 40 characters.

This happens because Open Graph tags are missing, misconfigured, or not rendering correctly. And for SaaS companies that rely on LinkedIn and social distribution for organic reach, it's a meaningful drag on every piece of content you publish.

This guide covers exactly what Open Graph tags are, which ones to implement, and how to do it correctly across the most common SaaS tech stacks.

What Are Open Graph Tags?

Open Graph (OG) tags are <meta> elements in your page's <head> section. They were created by Facebook in 2010 and have become the universal standard for controlling how URLs appear when shared on social platforms, messaging apps, and link-preview services.

When someone pastes your URL into LinkedIn, Slack, WhatsApp, or Twitter/X, the platform sends a bot to fetch your page and read the OG tags. Those tags tell the platform: what title to show, which image to display, what description to use, and what type of content this is.

Without OG tags, platforms either display a generic-looking link card or guess — often pulling the wrong image, a truncated page title, or no description at all.

With OG tags implemented correctly:

1200 × 630px branded image

autoseobot.com

Open Graph Tags for SaaS: Why Your Blog Posts Look Broken

Most SaaS companies have missing or broken Open Graph tags. When someone shares your blog post on LinkedIn, it shows up as a plain URL...

Without OG tags (platform guesses):

No preview available

https://yoursite.com/blog/our-product-launch-q2-2026.html

The Complete Open Graph Tag Reference for SaaS

Tag	Priority	What it does	Platforms
`og:title`	Required	The title shown in the link preview card. Can differ from your HTML `<title>` — OG title can be slightly longer or more compelling for social.	LinkedInSlackWhatsApp
`og:description`	Required	2–3 sentence description shown under the title. 155–200 characters. Summarize the key benefit, not just what the post is about.	LinkedInSlackWhatsApp
`og:image`	Required	The preview image URL. Must be absolute (https://). Recommended size: 1200×630px. This is the most impactful OG tag — a good image drives significantly more clicks than a text-only link.	LinkedInSlackWhatsApp
`og:url`	Required	The canonical URL for this page. Should match your `<link rel="canonical">`. Platforms use this to deduplicate shares and aggregate engagement metrics.	LinkedInSlackWhatsApp
`og:type`	Required	Content type: `website` for homepages/landing pages, `article` for blog posts. Affects how platforms handle engagement aggregation.	LinkedInSlack
`og:site_name`	Recommended	Your brand/company name. Shown as a secondary label in some platform preview cards. Helps with brand recognition in feed.	LinkedInSlack
`og:image:width` / `og:image:height`	Recommended	Pixel dimensions of your OG image. Helps platforms display the image correctly without waiting for it to load. Use `1200` and `630`.	LinkedIn
`og:image:alt`	Optional	Alt text for the OG image — accessibility for screen readers and platforms that display it.	LinkedIn

Twitter Card Tags (for Twitter/X)

Twitter/X uses its own meta tag namespace (twitter:) rather than OG tags. Twitter falls back to OG tags if Twitter Card tags are missing, but explicit Twitter Card tags give better control over how content displays on the platform.

Tag	Priority	What it does
`twitter:card`	Required	Card type. Use `summary_large_image` for a large image card (recommended for blog posts and landing pages). `summary` for a small thumbnail card.
`twitter:title`	Recommended	Title for the Twitter card. Defaults to `og:title` if not set. Can be slightly different for Twitter's audience.
`twitter:description`	Recommended	Description for the Twitter card. Defaults to `og:description` if not set.
`twitter:image`	Recommended	Image URL for the Twitter card. Defaults to `og:image` if not set. Twitter supports up to 5MB images.
`twitter:site`	Optional	Your Twitter/X handle (e.g., `@yourcompany`). Shown in the card footer and links to your profile.

The Complete Implementation — Copy-Paste Template

Here's the full set of OG + Twitter Card tags for a SaaS blog post. Paste this block into your <head> and customize per page:

HTML — Complete OG + Twitter Card tags (blog post)

<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://yoursite.com/blog/your-post-slug.html">
<meta property="og:title" content="Your Blog Post Title — Make It Compelling for Social">
<meta property="og:description" content="2-3 sentences that hook the reader. What will they learn? What problem does this solve? Keep it under 200 characters.">
<meta property="og:image" content="https://yoursite.com/images/blog/your-post-og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Brief description of what the image shows">
<meta property="og:site_name" content="Your Company Name">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourhandle">
<meta name="twitter:title" content="Your Blog Post Title">
<meta name="twitter:description" content="Same or similar to og:description.">
<meta name="twitter:image" content="https://yoursite.com/images/blog/your-post-og.png">

For a homepage or product landing page, change og:type to website:

HTML — OG tags for homepage / landing page

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://yoursite.com/">
<meta property="og:title" content="Your Product Name — Short, Punchy Value Prop">
<meta property="og:description" content="What your product does and who it's for. This is what shows up when anyone shares your homepage — make it count.">
<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:site_name" content="Your Company Name">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Product Name — Value Prop">
<meta name="twitter:description" content="What your product does.">
<meta name="twitter:image" content="https://yoursite.com/og-image.png">

Implementation by Tech Stack

Next.js (App Router)

Use the metadata export in each page.tsx. Next.js server-renders these as <meta> tags automatically:

Next.js App Router — metadata with OG tags

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next'

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug)

  return {
    title: post.title,
    description: post.excerpt,
    alternates: { canonical: `https://yoursite.com/blog/${params.slug}` },
    openGraph: {
      type: 'article',
      url: `https://yoursite.com/blog/${params.slug}`,
      title: post.title,
      description: post.excerpt,
      images: [{
        url: `https://yoursite.com/images/blog/${params.slug}-og.png`,
        width: 1200,
        height: 630,
        alt: post.imageAlt,
      }],
      siteName: 'Your Company',
      publishedTime: post.publishedAt,
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [`https://yoursite.com/images/blog/${params.slug}-og.png`],
    },
  }
}

Next.js (Pages Router)

Next.js Pages Router — Head with OG tags

import Head from 'next/head'

export default function BlogPost({ post }) {
  return (
    <>
      <Head>
        <meta property="og:type" content="article" />
        <meta property="og:url" content={`https://yoursite.com/blog/${post.slug}`} />
        <meta property="og:title" content={post.title} />
        <meta property="og:description" content={post.excerpt} />
        <meta property="og:image" content={`https://yoursite.com/images/${post.slug}-og.png`} />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="630" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content={post.title} />
        <meta name="twitter:description" content={post.excerpt} />
        <meta name="twitter:image" content={`https://yoursite.com/images/${post.slug}-og.png`} />
      </Head>
      {/* page content */}
    </>
  )
}

Webflow

In Webflow's Page Settings → SEO tab, you can set the page's Open Graph title, description, and image directly in the UI. For blog posts using CMS collections, use CMS bindings to pull the OG image from a CMS field — this lets you set a unique OG image per post without touching code.

Webflow CMS tip: Add an "OG Image" field to your Blog Posts collection and upload a 1200×630px image for each post. Bind this field to the page's OG Image setting. Webflow will render the correct image URL in the output HTML.

WordPress

Rank Math and Yoast SEO both set OG tags automatically based on your page title, description, and featured image. If you're using either plugin, OG tags are handled — but verify the OG image is being set by checking view source or using the LinkedIn Inspector. Common issue: OG image defaults to your site logo (60px tall) instead of a proper 1200×630 image.

Creating the OG Image

The OG image is the most impactful tag. A well-designed OG image increases click-through from social shares by 2–3x. Here's how SaaS companies typically generate them:

Static per-post images: Design a template in Figma, Canva, or Adobe Express. For each blog post, update the title text and export. Store at a consistent path: /images/blog/post-slug-og.png. Best quality — worth the effort for high-priority posts.
Dynamic OG images via Next.js: Use the next/og library (ImageResponse) to generate OG images at build time or on-demand. Template accepts post title, category, date — renders a 1200×630 image automatically for every post without manual design work.
Shared fallback image: Create a single branded 1200×630 image (og-image.png) that works for any page. Use this as the fallback when you haven't designed a per-post image. Better than no OG image — but won't drive as many clicks as a post-specific image.

Minimum viable OG image: A branded background (your brand color + logo), the post title in large white text, and your domain name in the corner. You can create this in Canva in 5 minutes and it's 10x better than a missing image.

The 5 Most Common OG Tag Mistakes in SaaS Sites

Relative image URLs. og:image must be an absolute URL starting with https://. Relative URLs like /og-image.png will break on LinkedIn and Slack — they resolve against the platform's domain, not yours. Always use the full absolute URL.
Wrong image dimensions. LinkedIn requires a minimum of 1200×627px for a large card. Images smaller than this display as tiny thumbnails in the bottom-left corner of the card instead of a full-width preview. Webflow logos (200×60px) are a common culprit.
OG tags injected by JavaScript. Platform scrapers don't execute JavaScript. If your OG tags are set by a client-side script (React Helmet with no SSR, useEffect, etc.), platforms won't see them. Tags must be in the server-rendered HTML. Verify with curl -s https://yoursite.com/blog/post | grep 'og:'.
Missing og:url. Without og:url, engagement metrics from shares of the same content (UTM variants, www vs non-www) don't get aggregated. LinkedIn shows a lower engagement count per post because each URL variant is treated as separate content.
Same OG title and description for every page. If your global layout sets a single og:title and og:description and blog posts don't override it, every shared blog post will show your company's generic homepage description. Check: share three different blog posts and see if LinkedIn shows the same description for all of them.

How to Test Your Open Graph Tags

Use these four tools to validate your implementation:

LinkedIn Post Inspector — linkedin.com/post-inspector — Shows exactly how LinkedIn will render your link preview. The "Inspect" button also clears LinkedIn's cache so you see fresh data after an OG tag update.
Twitter Card Validator — Available at developer.x.com — Shows how your Twitter Card renders. Requires login.
Facebook Sharing Debugger — developers.facebook.com/tools/debug — Also used for WhatsApp previews. Shows the scraped OG data and any warnings.
OpenGraph.xyz — Shows previews for LinkedIn, Facebook, Twitter/X, and Slack in one view. Good for a quick multi-platform check.

Quick server-render check: Run curl -s https://yoursite.com/blog/your-post/ | grep 'property="og:' in your terminal. If you see OG tags in the output, they're server-rendered. If you see nothing, they're JavaScript-only and invisible to platform scrapers.

OG Tags vs SEO Meta Tags: What's the Difference?

There are two separate systems for page metadata — and many SaaS sites only implement one:

SEO meta tags: <title>, <meta name="description">, <link rel="canonical">. These control how Google indexes and displays your page in search results. Google ignores OG tags for search results.
Open Graph tags: og:title, og:description, og:image, og:url. These control how social platforms and messaging apps display link previews. LinkedIn, Slack, WhatsApp, and Facebook ignore SEO meta tags for link previews.

Both systems are independent. You need both. The good news: you can have different values for each. Your SEO title might be optimized for a keyword ("Open Graph Tags SaaS Guide: Implementation for LinkedIn and Twitter") while your OG title is more social-friendly ("Why Your Blog Posts Look Broken on LinkedIn — And How to Fix It in 20 Minutes").

Frequently Asked Questions

What are Open Graph tags and why do SaaS companies need them?

Open Graph (OG) tags are meta tags in your page head that control how your content appears when shared on social platforms — LinkedIn, Twitter/X, Slack, WhatsApp, Facebook. Without OG tags, platforms display a generic-looking link card with no image, wrong title, or missing description. For SaaS companies, every shared blog post and landing page is a distribution moment — broken OG tags reduce click-through from every share.

Do Open Graph tags affect Google SEO rankings?

OG tags don't directly affect Google rankings. However, they indirectly influence SEO through social signals and traffic: well-implemented OG tags increase click-through when content is shared, driving more referral traffic and social backlinks. For LinkedIn in particular — which many B2B SaaS companies use for distribution — an OG image increases engagement by 2–3x compared to a text-only link post.

What is the difference between Open Graph tags and Twitter Card tags?

OG tags (og:) were created by Facebook and are used by LinkedIn, Slack, WhatsApp, and most platforms. Twitter Card tags (twitter:) are specific to Twitter/X. Twitter falls back to OG tags if Twitter Card tags are missing, but explicit Twitter Card tags give better control. Best practice: implement both.

What size should the Open Graph image be?

1200×630 pixels (1.91:1 aspect ratio). This works across LinkedIn, Facebook, Twitter/X, and Slack. Minimum is 600×315px — anything smaller displays as a tiny thumbnail. Use PNG or JPEG, keep file size under 1MB, and always use an absolute HTTPS URL.

How do I test if my Open Graph tags are working?

Use LinkedIn Post Inspector (linkedin.com/post-inspector), Twitter Card Validator, Facebook Sharing Debugger, or OpenGraph.xyz. Also run curl -s https://yoursite.com/your-page | grep 'og:' to confirm OG tags are server-rendered and not injected by JavaScript.

Why is LinkedIn showing the wrong image or old content for my page?

LinkedIn caches link previews for up to 7 days. After updating OG tags, use the LinkedIn Post Inspector and click "Inspect" — this forces a cache refresh. If the new image still doesn't appear, confirm your OG tags are in the server-rendered HTML (not client-side JavaScript) and that your OG image URL is publicly accessible.

Want to know how your site looks when shared?

Our free audit checks your OG tags, Twitter Cards, image dimensions, and social preview across LinkedIn, Slack, and WhatsApp — with a fix list prioritized by impact.

Get Your Free Social SEO Audit