Open Graph Protocol Explained: How OG Tags Work (2026) — share-preview.com

The Open Graph protocol lets you control how your links look on Facebook, LinkedIn, Twitter, and Slack. Complete guide with all OG tags, examples, and a free checker.

Open Graph Guide Updated February 2026 · 13 min read

Open Graph Protocol: What It Is and How to Use It

Every day, millions of links get shared on social media — and the ones with compelling preview cards (title, description, image) get clicked 2–3× more than bare URL strings. The technology behind those previews is the Open Graph protocol: a set of HTML meta tags that gives you complete control over how your content appears when shared. This guide covers every OG tag, platform-by-platform requirements, and working code examples for every major web framework.

Table of Contents
  1. What is the Open Graph protocol?
  2. All Open Graph meta tags explained
  3. Open Graph for each platform
  4. How to implement Open Graph tags
  5. Open Graph image best practices
  6. How to test your Open Graph tags
  7. Common Open Graph problems & fixes
  8. FAQ

1. What Is the Open Graph Protocol?

In 2010, Facebook introduced the Open Graph protocol to solve a messy problem: when someone shared a link on Facebook, the platform had no reliable way to know which image to use, what title to display, or how to describe the content. Pages looked inconsistent, sometimes pulling random images from the page body or displaying no image at all.

Facebook's solution was elegantly simple: add standardized HTML meta tags to your page's <head> that explicitly declare the title, description, image, and URL for social sharing. They named it "Open Graph" (inspired by the idea of a social graph connecting objects on the web) and published the specification at ogp.me. The protocol was quickly adopted by Twitter, LinkedIn, Slack, WhatsApp, Pinterest, Discord, and virtually every other platform that renders link previews.

Today, the Open Graph protocol is the universal standard for controlling how web content appears when shared anywhere on the internet. It works by having platform crawlers — bots that visit your page when someone shares a URL — look for <meta property="og:..."> tags in your HTML head and use those values to generate the preview card.

The core mechanic: Platform bot visits your URL → reads OG tags from your HTML head → renders a preview card using those values → user sees the card when the link is shared. The bot visit happens within seconds to minutes of the first share and the result is cached for hours to days.

Without Open Graph tags, platforms fall back to guessing — and they're usually wrong. They might pull your navigation text as a title, use a tiny logo as the image, or show nothing at all. With OG tags, you control every element of the preview card precisely.

2. All Open Graph Meta Tags Explained

The Open Graph specification defines a core set of tags that all pages should implement, plus optional tags for more specific content types. Here's the complete reference:

Tag Status Description Example Value
og:title Required The title shown in the preview card. Can differ from your HTML <title> — optimize this for social sharing, not SEO. "How I Built a SaaS in 30 Days"
og:description Required A 1–2 sentence description shown below the title. Keep under 200 characters. Compelling copy here drives clicks. "Step-by-step guide to launching a profitable SaaS product without burning out."
og:image Required Absolute URL to the preview image. Must be HTTPS. Recommended 1200×630px. The single biggest factor in click rate. "https://example.com/og/saas-guide.png"
og:url Required The canonical URL of your page. Platforms use this to aggregate share counts across URL variants. "https://example.com/blog/saas-30-days"
og:type Recommended Content type. Common values: website, article, video.movie, product. Defaults to website. "article"
og:site_name Recommended Your site or brand name. Displayed separately from the title, usually as smaller text above or below the card. "share-preview.com"
og:locale Optional Language and territory of the content. Helps platforms serve the right audience. "en_US"
og:image:width Recommended Width of the og:image in pixels. Helps platforms render immediately without fetching dimensions first. "1200"
og:image:height Recommended Height of the og:image in pixels. Pair with og:image:width for faster preview rendering. "630"
og:image:alt Recommended Alt text for the OG image. Required for accessibility compliance and used by LinkedIn as a relevance signal. "Illustration of a SaaS dashboard with metrics"
og:image:type Optional MIME type of the image file. Helps platforms that have format restrictions. "image/png"
og:video Optional URL to a video file. Used with og:type="video.movie" or video.other. "https://example.com/video.mp4"

Article-Specific OG Tags

When you set og:type to article, additional properties unlock that help news aggregators, Facebook, and LinkedIn surface your content correctly:

<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-02-19T10:00:00Z">
<meta property="article:modified_time" content="2026-02-19T10:00:00Z">
<meta property="article:author" content="https://yoursite.com/author/name">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="SEO">
<meta property="article:tag" content="Open Graph">

3. Open Graph for Each Platform

🔵 Facebook

  • Preview dimensions: ~1200×628px (landscape)
  • Title max: ~100 chars (truncates beyond)
  • Description: Shown below title in some placements
  • Min image size: 600×315px
  • Max file size: 8MB
  • Cache: 24–72 hours; force-refresh with Sharing Debugger
  • Strictest rule: Image URL must return HTTP 200 on HEAD request

🔷 LinkedIn

  • Preview dimensions: 1200×627px (strict)
  • Title max: ~119 chars (desktop)
  • Description: Shown only in some post formats
  • Min image size: 1200×627px (hard minimum)
  • Max file size: 5MB
  • Cache: ~7 days; refresh with Post Inspector
  • Strictest rule: Won't show any image below minimum size

🐦 Twitter / X

  • Uses: twitter: tags; falls back to OG
  • Card type: Set twitter:card to choose format
  • large_image: 1200×630px (recommended)
  • Summary: 120×120px square thumbnail
  • Max file size: 5MB
  • Cache: A few hours; use Card Validator to refresh
  • Strictest rule: twitter:card must be set explicitly

💬 Slack & Discord

  • Slack image: Reads og:image; shows as thumbnail
  • Discord: Shows og:image as embed image (large)
  • Title: Reads og:title (Slack limits to ~80 chars)
  • Description: Both show og:description
  • Min image: 200×100px (Slack); any size (Discord)
  • Cache: 24–48 hrs Slack; shorter on Discord
  • Note: No manual cache-clear tool; wait or change URL

4. How to Implement Open Graph Tags

Plain HTML

For static HTML sites, add OG tags directly inside your <head> section. This is the foundation — all other implementations ultimately output HTML like this:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Page Title — Your Site</title>
  <meta name="description" content="Your SEO description here.">
  <link rel="canonical" href="https://yoursite.com/page">

  <!-- Open Graph -->
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://yoursite.com/page">
  <meta property="og:title" content="Compelling Social Headline Here">
  <meta property="og:description" content="Short, punchy description for sharing.">
  <meta property="og:image" content="https://yoursite.com/og/page-image.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Description of the image">
  <meta property="og:site_name" content="Your Site Name">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Compelling Social Headline Here">
  <meta name="twitter:description" content="Short, punchy description for sharing.">
  <meta name="twitter:image" content="https://yoursite.com/og/page-image.png">
</head>

WordPress (Yoast SEO)

Yoast SEO automatically generates Open Graph tags for every post and page. To ensure they're correct:

  1. Go to SEO → Social and enable Open Graph metadata
  2. On each post, scroll to the Yoast meta box → Social tab
  3. Set a Facebook title, description, and upload a dedicated OG image
  4. The plugin handles the HTML output automatically

Rank Math, All in One SEO, and SEOPress work similarly — all have dedicated Social/Open Graph tabs in their per-post meta boxes.

Next.js

In Next.js 13+ with the App Router, use the built-in Metadata API:

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  return {
    title: 'Your Page Title',
    description: 'Your page description',
    openGraph: {
      title: 'Your Social Headline',
      description: 'Your social description',
      url: `https://yoursite.com/blog/${params.slug}`,
      images: [
        {
          url: 'https://yoursite.com/og/image.png',
          width: 1200,
          height: 630,
          alt: 'Description of the image',
        },
      ],
      type: 'article',
      siteName: 'Your Site Name',
    },
    twitter: {
      card: 'summary_large_image',
      title: 'Your Social Headline',
      description: 'Your social description',
      images: ['https://yoursite.com/og/image.png'],
    },
  }
}

Webflow

In Webflow: open the Page Settings (gear icon on any page) → scroll to SEO Settings → fill in the Open Graph Title, Description, and upload an OG image. Webflow outputs the correct property= attributes automatically. For dynamic CMS pages, use Webflow's dynamic binding to pull fields from your CMS collection into the OG tag values.

5. Open Graph Image Best Practices

Your og:image is the most powerful element in a social preview card. It's the first thing eyes go to in a feed. Here are the five rules that matter most:

  1. Use 1200×630px as your standard size. This single resolution works on Facebook, LinkedIn (just meets their 1200×627px minimum), Twitter, Slack, and Discord. There's no need to create platform-specific variants if you use this size.
  2. Keep file size under 1MB. Large images slow down the platform's rendering and can cause timeouts. A well-optimized PNG or JPG at 1200×630px should be under 500KB. See our OG image size guide for optimization tips.
  3. Always use an absolute HTTPS URL. Relative paths like /og-image.png are invalid. Social platform crawlers don't know your domain when reading the tag value, so the URL must be fully qualified with https://.
  4. Include text in your image — but keep it safe-zone safe. Some platforms overlay your title or URL in the bottom corner of the image, cropping the edges. Keep important text and logos within the center 80% of the image to avoid overlap.
  5. Always add og:image:alt. This is required for accessibility on screen readers and is used by LinkedIn as a relevance signal. Write a clear, descriptive alt text for your image (don't just repeat the title).

LinkedIn hard rule: LinkedIn will not display any image smaller than 1200×627px — even if you have a valid og:image tag. If you're seeing LinkedIn previews without images, check your image dimensions first. This is the #1 cause of LinkedIn preview failures.

6. How to Test Your Open Graph Tags

After implementing OG tags, always verify them before publishing. Platform crawlers cache pages, so it's important to test before your content goes live and gets shared.

🔍 Test All Platforms at Once — share-preview.com

Paste any URL into share-preview.com and instantly see platform-accurate previews for Twitter/X, Facebook, LinkedIn, Slack, and WhatsApp simultaneously — plus a full OG tag diagnostic report showing missing tags, broken URLs, and truncation warnings.

Check Your Open Graph Preview Free →

Platform-Specific Validators

  • Facebook Sharing Debugger: developers.facebook.com/tools/debug — Shows exactly what Facebook sees, validates image URLs, and lets you force-clear Facebook's cache by clicking "Scrape Again".
  • LinkedIn Post Inspector: linkedin.com/post-inspector — Checks LinkedIn's parsed view of your tags and refreshes LinkedIn's cache. Essential for verifying LinkedIn image requirements are met.
  • Twitter Card Validator: cards-dev.twitter.com/validator — Validates your Twitter Card markup and shows how the card renders. Note: X/Twitter has reduced public access to this tool.
  • Slack: No official validator. Use share-preview.com for Slack preview simulation. Actual Slack previews can be tested by pasting your URL in a Slack channel (unfurl happens on paste).

After Making Changes

Social platforms cache metadata aggressively. After updating your OG tags, the old preview will continue showing until the cache expires or you force a refresh:

  • Facebook: Use Sharing Debugger → click "Scrape Again" to force immediate cache refresh
  • LinkedIn: Use Post Inspector → "Inspect" refreshes LinkedIn's cache
  • Twitter/X: Cache typically expires within a few hours; Card Validator may trigger a refresh
  • Slack: Cache expires in 24–48 hours; no manual refresh available
  • WhatsApp: Cache expires in 3 days; no manual refresh available

7. Common Open Graph Problems & Fixes

  • ❌ Problem: Image not showing in social preview

    Most common causes: (1) using a relative URL instead of absolute HTTPS URL, (2) image server returns 4xx/5xx when bots request it, (3) image is too small for the platform.

    ✅ Fix: Use an absolute HTTPS URL, verify the image URL returns HTTP 200, check dimensions meet platform minimums. Test with Facebook Sharing Debugger for details.
  • ❌ Problem: Old cached image still showing after update

    You updated your og:image but social platforms still show the old preview. This is a caching issue, not a tag error.

    ✅ Fix: Use Facebook Sharing Debugger ("Scrape Again"), LinkedIn Post Inspector ("Inspect"), or wait for cache to expire naturally (24–72 hours depending on platform).
  • ❌ Problem: Wrong title showing in social preview

    Your og:title tag may be overridden by a duplicate tag later in the document, or you may be using name= instead of property= on your OG tags.

    ✅ Fix: View your page source and search for "og:title" — ensure there's only one instance and it uses property="og:title". OG tags must use property= not name=.
  • ❌ Problem: LinkedIn ignoring og:image and showing no image

    LinkedIn has a hard minimum image size of 1200×627px. Images below this threshold are silently ignored, even if the tag is technically valid.

    ✅ Fix: Recreate your OG image at exactly 1200×630px (or at minimum 1200×627px). Verify with LinkedIn Post Inspector after updating.
  • ❌ Problem: Twitter using summary (small image) instead of large image card

    Twitter won't show a large image card unless twitter:card is explicitly set to summary_large_image. If this tag is missing, Twitter defaults to the summary format (small square thumbnail).

    ✅ Fix: Add <meta name="twitter:card" content="summary_large_image"> to your HTML head. See our Twitter card validator guide for more details.

For more social preview troubleshooting, see our guides on Facebook link preview fixes and social media preview not showing. For a comprehensive OG tag reference, read our complete Open Graph tags guide.

8. Frequently Asked Questions

What is the Open Graph protocol?

The Open Graph protocol is a standard created by Facebook in 2010 that allows web pages to become rich objects in social networks. By adding Open Graph meta tags to your page's HTML head, you control what title, description, image, and URL appears when someone shares your link on platforms like Facebook, LinkedIn, Slack, WhatsApp, and others. The protocol is now maintained at ogp.me and is the universal standard for social sharing metadata.

Do Open Graph tags affect SEO?

Open Graph tags don't directly influence Google search rankings. However, they indirectly affect SEO by improving your click-through rate when links are shared on social media. Better-looking previews get more clicks and shares, which can drive more traffic and backlinks to your content — both of which are positive SEO signals. Additionally, the og:url tag helps consolidate social share counts across URL variants.

How do I test my Open Graph tags?

The fastest way is to use share-preview.com — paste your URL and see instant, accurate previews for Twitter/X, Facebook, LinkedIn, Slack, and WhatsApp simultaneously, plus a full OG tag diagnostic. For platform-specific testing: use Facebook's Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn's Post Inspector (linkedin.com/post-inspector), or Twitter's Card Validator. Remember to force-refresh each platform's cache after making tag changes.

What image size is best for Open Graph?

The universally safe Open Graph image size is 1200×630 pixels. This meets or exceeds the minimum requirements for all major platforms: Facebook requires at least 600×315px, LinkedIn requires at least 1200×627px, Twitter recommends 1200×630px, and Slack renders well from 600×315px and up. Keep your file size under 1MB (ideally under 500KB) for fast loading. Always use an absolute HTTPS URL for the og:image value.

✅ Test Your Open Graph Tags — Free

See exactly how your link will appear on Facebook, LinkedIn, Twitter/X, Slack, and WhatsApp before you share it. Get a full OG tag diagnostic with actionable fixes.

Check Your Open Graph Preview Free →

Related guides: Complete Open Graph Tags Reference · Open Graph Image Sizes for Every Platform · Twitter Card Validator Guide · Fix Facebook Link Preview · Social Media Preview Not Showing

See How Your Page Looks When Shared

Test your OG tags across Twitter, LinkedIn, Facebook, Slack, and WhatsApp instantly.

Test Share Preview Free →