The Complete Guide to Open Graph Tags in 2026 — share-preview.com

Learn everything about Open Graph tags: what they are, how to add them, how to test them, and how to create the perfect social media previews on LinkedIn, Twitter, Facebook, and more.

Open Graph Tags Updated February 2026 · 15 min read

The Complete Guide to Open Graph Tags in 2026

Open Graph tags are HTML meta tags that control exactly how your pages appear when shared on social media. Master them and every shared link becomes a high-converting preview. Miss them and you get a blank grey box. This comprehensive guide walks you through everything: what OG tags are, all the properties, image specifications, testing strategies, and real-world implementation across LinkedIn, Twitter, Facebook, and more — with complete code examples you can copy right now.

Table of Contents
  1. What are Open Graph tags?
  2. Why Open Graph tags matter for social sharing
  3. The 4 essential OG tags you need
  4. Image best practices: size, format, dimensions
  5. How to test your OG tags before sharing
  6. Platform-specific differences and requirements
  7. 7 common mistakes and how to fix them
  8. Advanced OG properties and article tags

1. What are Open Graph tags?

Open Graph (OG) is a protocol created by Facebook in 2010 that transforms web pages into rich objects in social networks. When you share a URL on Facebook, Twitter, LinkedIn, Slack, or WhatsApp, those platforms send a bot to crawl your page and search for Open Graph meta tags. These tags tell the platform exactly what to show: the headline, description, image, and more.

Without OG tags, social platforms either display nothing or make embarrassing guesses — pulling random text fragments and tiny, unrelated images. With properly configured OG tags, you control the entire preview card. This simple difference makes the distinction between a link that converts and one that gets scrolled past.

OG tags live in your page's <head> element and follow a simple syntax:

<!-- Basic Open Graph meta tag -->
<meta property="og:title" content="Your Compelling Title">

The property attribute defines which OG property you're setting (with the og: prefix), and the content attribute holds the value. Simple concept, but there are dozens of properties, platform variations, and image specifications that make getting them exactly right a critical skill for modern web development.

Real impact: Research shows social posts with rich preview cards get 2–5× more clicks than bare text links. Your OG tags are free marketing real estate.

2. Why Open Graph tags matter for social sharing

Every time someone shares your content on social media, they're competing with thousands of other posts for attention. A blank grey box with no description loses that battle instantly. A rich, visually appealing preview card with a compelling headline and professional image stands out.

Here's what happens when OG tags are missing:

  • Facebook shows a grey box with no image and a generic default description (often pulled from your page's first paragraph)
  • LinkedIn might display no preview at all, forcing the reader to click blind
  • Twitter/X shows a text-only card that gets buried in feeds
  • Slack unfurls as plain text with no visual component
  • WhatsApp shows just your page title and no image

With correct OG tags:

  • Your headline appears exactly as you wrote it (optimized for clicks, not SEO)
  • Your description is concise and conversion-focused
  • Your image is professional, on-brand, and optimally sized for each platform
  • The preview works consistently across all platforms

The result? Your shared content gets 2–5× more engagement. This isn't optional — it's table stakes for any URL worth sharing.

3. The 4 essential OG tags you need

Every page you want to share successfully needs at minimum these four tags. Skip any one and you'll get degraded previews or broken functionality on some platforms.

<!-- The 4 essential Open Graph tags -->
<meta property="og:title" content="Build a Profitable SaaS Faster Than You Think">
<meta property="og:description" content="A complete step-by-step guide to validating, building, and launching a SaaS product without burning out. Real examples from 7-figure founders.">
<meta property="og:image" content="https://yourdomain.com/images/saas-guide-og.png">
<meta property="og:url" content="https://yourdomain.com/blog/saas-guide">

Breaking down each essential tag:

  • og:title — The headline shown in the preview card. Keep it under 60 characters to prevent truncation. This should be compelling and optimized for clicks, not your HTML <title> tag.
  • og:description — Supporting text displayed below the title. Aim for 150–200 characters. This is your conversion copy — make every word count.
  • og:image — The preview image URL. Must be an absolute URL with https://. This is the most impactful element for drawing clicks.
  • og:url — The canonical URL of your page. Platforms use this to deduplicate shares and aggregate like counts across URL variants.

4. Image best practices: size, format, dimensions

Your og:image is the single most critical element of your OG tag strategy. It's the first thing viewers notice and the primary driver of click-through rates.

Recommended dimensions by platform

PlatformRecommendedMinimumMax File SizeFormat
Facebook1200 × 628px600 × 314px8MBPNG, JPG, GIF
Twitter/X1200 × 630px300 × 157px5MBPNG, JPG, GIF
LinkedIn1200 × 627px1200 × 627px5MBPNG, JPG
Slack600 × 315px200 × 100px2MBPNG, JPG
WhatsApp400 × 400px300 × 200px5MBPNG, JPG

The universal solution

Create a single image at exactly 1200 × 630px, under 1MB, in PNG or JPG format. This satisfies all platforms simultaneously. Always use absolute HTTPS URLs (relative paths do not work with social crawlers).

Image optimization tips

  • Use high contrast — Make sure your image is readable as a thumbnail. Test at 300px width.
  • Include text sparingly — Only critical headlines. Avoid small fonts that won't be legible at thumbnail size.
  • Brand consistently — Include your logo in a corner. Consistency builds recognition across shares.
  • Optimize file size — Use tools like TinyPNG or ImageOptim. Smaller files load faster on social platforms.
  • Add alt text — Use the og:image:alt property for accessibility and SEO.

LinkedIn gotcha: LinkedIn enforces strict minimum size requirements. If your image is smaller than 1200 × 627px, LinkedIn won't display it at all, regardless of what other platforms show.

5. How to test your OG tags before sharing

Never assume your OG tags work — always verify them before sharing widely. Testing takes 30 seconds and prevents embarrassing broken previews from spreading across your network.

🔍 Test with share-preview.com

Instantly see exactly how your link will look on Twitter/X, Facebook, LinkedIn, Slack, and WhatsApp — all at once. Get a complete OG tag analysis report showing what's missing or misconfigured.

Check Your URL Free →

Platform-specific testing tools

  • Facebook Sharing Debugger: developers.facebook.com/tools/debug — Shows exactly what Facebook crawls and lets you force-clear cached versions
  • Twitter Card Validator: cards-dev.twitter.com/validator — Validates Twitter Card-specific markup and preview
  • LinkedIn Post Inspector: linkedin.com/post-inspector — Tests LinkedIn preview and refreshes cached data
  • share-preview.com: Free tool for testing Slack, WhatsApp, and comparing all platforms simultaneously

Clearing cache after changes

Social platforms aggressively cache page metadata. After fixing OG tags, you must clear each platform's cache to see your changes:

  • Facebook: Use the Sharing Debugger → click "Scrape Again" button
  • LinkedIn: Use Post Inspector → click "Inspect" to refresh
  • Twitter/X: Cache usually expires within 24 hours, but you can verify with the Card Validator
  • Slack: Cache expires in 24–48 hours; no manual refresh available

6. Platform-specific differences and requirements

Each platform handles OG tags slightly differently. Understanding these quirks prevents surprises:

Facebook (strictest requirements)

Facebook validates image URLs with a HEAD request and requires a 200 status response. If your image server returns 403, 404, or any non-2xx status, Facebook displays no preview. It also respects the og:locale property for multi-language content.

Twitter/X (character limits and card types)

Twitter truncates og:title at ~70 characters and og:description at ~200 characters. It also uses its own card format system: summary (small image) vs summary_large_image (preferred). Twitter respects twitter:creator tags separately from OG author tags.

LinkedIn (strict dimensions, company overlays)

LinkedIn enforces exact image dimensions and won't display images smaller than 1200 × 627px. It also automatically adds a company logo overlay if it detects a verified company page — test this in advance so your design accounts for it.

Slack (unique unfurl requirements)

Slack generates its own thumbnail from your og:image URL. It respects a slack-app-id meta tag for deep linking. Slack also uses the first 240 characters of og:description.

WhatsApp (image-first)

WhatsApp shows only og:title and og:image — it ignores og:description entirely. Your image and headline must stand alone.

7. Seven common mistakes and how to fix them

Mistake 1: Using relative image URLs

Social bots don't know your domain, so relative URLs like /images/og.png result in broken images.

<!-- ❌ Wrong —relative URL -->
<meta property="og:image" content="/images/og.png">

<!-- ✅ Correct — absolute HTTPS URL -->
<meta property="og:image" content="https://yourdomain.com/images/og.png">

Mistake 2: Image too small or wrong aspect ratio

Images below 600×315px get rejected by Facebook. Always create a dedicated 1200×630px image.

Mistake 3: og:title identical to HTML <title>

Your HTML <title> is optimized for SEO (keywords, site name). Your og:title should be optimized for social clicks (compelling, short, benefit-focused). They don't need to match.

Mistake 4: Missing og:url on paginated pages

Without og:url, platforms can't correctly aggregate shares across URL variants like /page vs /page/ vs /page?ref=twitter. Always set it to the canonical URL.

Mistake 5: Wrong attribute (name= vs property=)

OG tags use property=. Twitter tags use name=. Mixing them means the tags are silently ignored.

<!-- ❌ Wrong — using name= for OG tags -->
<meta name="og:title" content="Title">

<!-- ✅ Correct -->
<meta property="og:title" content="Title">

Mistake 6: Wrong og:type value

Default is website. Use article for blog posts, product for product pages. The type unlocks additional properties and affects indexing.

Mistake 7: Skipping og:image:alt

The og:image:alt tag provides accessibility and is a ranking signal on LinkedIn. Don't skip it.

8. Advanced OG properties and article-specific tags

Beyond the four essentials, the Open Graph protocol defines many advanced properties. Here are the most useful:

Recommended properties for all content

<meta property="og:type" content="article">
<meta property="og:site_name" content="My Website">
<meta property="og:locale" content="en_US">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Description of image for accessibility">

Article-specific properties (when og:type=article)

<meta property="article:published_time" content="2026-02-20T10:00:00Z">
<meta property="article:modified_time" content="2026-02-20T10:00:00Z">
<meta property="article:author" content="https://yourdomain.com/about">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="SEO">

Pro tip: Use og:type="article" for blog posts, guides, and news content. This unlocks article-specific properties and helps platforms index your content correctly in news feeds and search.

Ready to get started?

OG tags are one of the highest-ROI investments you can make for your content. They cost nothing to implement and directly impact click-through rates, social engagement, and sharing velocity.

Test your current tags right now: Visit share-preview.com — paste any URL to see your OG tags and how they'll look across all platforms.


Next, read our guide: Twitter Cards vs Open Graph Tags — understand the differences and when to use each one.

See How Your Page Looks When Shared

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

Test Share Preview Free →