·9 min read·Rediate Team

The Complete Guide to Open Graph Tags (2026)

Every time you share a link on social media, messaging apps, or Slack, the platform reaches back to your page and reads its Open Graph (OG) meta tags. Those tags decide whether your link appears as a rich, eye-catching card or a sad, blank rectangle. In 2026, with social algorithms weighting engagement more than ever, getting OG tags right is not optional: it is table stakes.

What Are Open Graph Tags?

Open Graph is a protocol originally created by Facebook in 2010. It lets any web page become a "rich object" in a social graph by embedding a handful of <meta> tags inside the <head> of the HTML document. When a crawler from Facebook, LinkedIn, X (Twitter), Slack, Discord, iMessage, or WhatsApp fetches your URL, it reads these tags to build the link preview card users actually see.

Without OG tags the platform falls back to guessing: pulling the first image it finds, truncating your <title>, or showing nothing at all. The result is a preview that looks broken, unprofessional, and easy to scroll past.

The Four Required OG Tags

The Open Graph protocol defines four properties that every page must include:

  • og:title: The title of your page as it should appear in the card. Keep it under 60 characters so it does not get truncated on mobile.
  • og:type: The type of content. For most pages, use website. For articles, use article.
  • og:image: An absolute URL to the image that represents your page. This is the single most impactful tag. Use 1200 × 630 px for maximum compatibility. See our complete OG image size guide for platform-specific dimensions.
  • og:url: The canonical URL for the page. This tells crawlers which URL is authoritative when multiple URLs resolve to the same content.

Recommended Optional Tags

Beyond the four required tags, several optional properties dramatically improve how your card renders:

  • og:description: A 1-2 sentence summary (aim for 120-160 characters). If omitted, Facebook pulls the first text it finds on the page, which is rarely what you want.
  • og:site_name: Your brand name (e.g., "Rediate OG"). Shown as a small label above or below the title on most platforms.
  • og:locale: Language and territory, e.g., en_US.
  • og:image:width and og:image:height: Telling crawlers the exact dimensions avoids a second request to probe the image size, which speeds up preview generation and avoids cropping surprises.
  • og:image:alt: Alt text for the image. Important for accessibility and increasingly used by screen readers in social apps.

Twitter Card Tags

X (formerly Twitter) introduced its own meta tag system called Twitter Cards. For a deeper comparison, read our guide on OG tags vs Twitter Cards. The two most common card types are:

  • summary: A small square thumbnail next to the title and description.
  • summary_large_image: A large image card that dominates the tweet. This is what you want for most marketing pages.

The key Twitter-specific tags are:

  • twitter:card: Either summary or summary_large_image.
  • twitter:title: Falls back to og:title if not set.
  • twitter:description: Falls back to og:description.
  • twitter:image: Falls back to og:image.
  • twitter:site: Your brand's X handle (e.g., @getrediate).
  • twitter:creator: The author's X handle.

Pro tip: even though Twitter falls back to OG tags, explicitly setting twitter:card is critical. Without it, X defaults to summary (small image) instead of the large image card.

Common Mistakes That Break Link Previews

  1. Relative image URLs. og:image must be an absolute URL starting with https://. A relative path like /images/og.png will be ignored by every crawler.
  2. Image too small. Facebook requires at least 200 × 200 px. LinkedIn prefers 1200 × 627 px. Anything below 300 px wide will render as a tiny thumbnail or not at all.
  3. Missing twitter:card. Without this tag, X renders a small summary card even if you have a beautiful 1200 × 630 OG image.
  4. Caching issues. Facebook, LinkedIn, and Slack all cache previews aggressively. After updating your tags you need to purge the cache using each platform's debug tool.
  5. Client-side rendered tags. Crawlers do not execute JavaScript (with rare exceptions). If your OG tags are injected by React after hydration, crawlers see an empty <head>. You must render OG tags server-side.
  6. Duplicate tags. Having two og:title tags confuses crawlers. Ensure your framework or CMS does not inject a second set.
  7. Wrong image aspect ratio. A 1200 × 1200 image will be center-cropped to landscape by most platforms, cutting off important content. Always design for 1.91:1.

Framework-Specific Examples

Next.js (App Router)

Next.js 14+ with the App Router makes OG tags easy via the metadata export:

// app/page.tsx
export const metadata = {
  title: "My SaaS Product",
  description: "The best product ever.",
  openGraph: {
    title: "My SaaS Product",
    description: "The best product ever.",
    url: "https://example.com",
    siteName: "My SaaS",
    images: [
      {
        url: "https://example.com/og.png",
        width: 1200,
        height: 630,
        alt: "My SaaS Product",
      },
    ],
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "My SaaS Product",
    description: "The best product ever.",
    images: ["https://example.com/og.png"],
  },
};

Plain HTML

<head>
  <meta property="og:title" content="My Page Title" />
  <meta property="og:description" content="A short description." />
  <meta property="og:image" content="https://example.com/og.png" />
  <meta property="og:url" content="https://example.com/page" />
  <meta property="og:type" content="website" />
  <meta name="twitter:card" content="summary_large_image" />
</head>

Astro

In Astro, add meta tags directly in your layout's <head>:

---
const { title, description, image } = Astro.props;
---
<head>
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={image} />
  <meta name="twitter:card" content="summary_large_image" />
</head>

How to Test Your OG Tags

After deploying, validate with these tools:

  • Rediate OG: Instant score, visual previews for X/LinkedIn/Slack, and a prioritized fix list. Free.
  • Facebook Sharing Debugger: Shows exactly what Facebook sees and lets you clear the cache.
  • X Card Validator: The Twitter Card Validator has been deprecated. Use Rediate to check your Twitter cards.
  • LinkedIn Post Inspector: Debug LinkedIn previews and force a re-scrape.

For ongoing monitoring, run your key pages through Rediate's audit tool periodically: especially after deploys, CMS updates, or design changes that might accidentally remove or overwrite your meta tags. You can also use our platform-specific checkers for Twitter/X and LinkedIn.

Checklist: OG Tags Done Right

  • All four required tags present (og:title, og:type, og:image, og:url)
  • og:image is 1200 × 630 px, absolute HTTPS URL
  • og:description is 120-160 characters
  • twitter:card set to summary_large_image
  • Tags are server-side rendered, not injected by JS
  • No duplicate OG tags in <head>
  • Tested on Facebook Debugger and Rediate (the Twitter Card Validator has been deprecated: use Rediate to check your Twitter cards)

Check your OG tags now

Free audit with score, social previews, and a prioritized fix list.