Open Graph Tags: The Complete Guide (2026) — share-preview.com
Everything you need to know about Open Graph tags. All OG properties explained with code examples, Twitter Card tags, how to test them, and common mistakes to avoid.
Open Graph Tags: The Complete Guide (2026)
Open Graph tags are HTML meta tags that control how your pages appear when shared on social media. Get them right and your links get clicks. Get them wrong and you get a blank grey box. This guide covers every OG property, Twitter Card tags, how to test everything, and the most common mistakes — with code examples throughout.
1. What are Open Graph tags?
Open Graph (OG) is a protocol originally created by Facebook in 2010 that lets web pages become "rich objects" in social networks. When you share a URL on Facebook, Twitter, LinkedIn, or Slack, those platforms send a bot to crawl your page and look for Open Graph meta tags to determine what to show in the preview card.
Without OG tags, platforms either show nothing or make their best guess — often pulling random text and a poorly-sized image. With properly configured OG tags, you control exactly what headline, description, and image appears.
OG tags live inside the <head> element of your HTML and follow this basic format:
<meta property="og:title" content="Your Page Title">The property attribute uses the og: namespace, and the content attribute holds the value. Simple in concept, but there are dozens of optional properties and platform-specific variations that make getting them exactly right a bit of an art.
Why it matters: Research consistently shows that social posts with rich preview cards get 2–3× more clicks than bare URL links. Your OG tags are free real estate — don't waste them.
2. The 4 essential OG tags
Every page you want to share needs at minimum these four tags. Skip any one of them and platforms will either refuse to generate a preview or fill in the gaps with wrong information.
<!-- The 4 required Open Graph tags -->
<meta property="og:title" content="How to Build a SaaS in 30 Days">
<meta property="og:description" content="A step-by-step guide to validating, building, and launching a SaaS product in 30 days — without burning out.">
<meta property="og:image" content="https://yourdomain.com/images/saas-guide-og.png">
<meta property="og:url" content="https://yourdomain.com/blog/saas-30-days">- og:title — The headline shown in the preview. Keep it under 60 characters so it doesn't get cut off. Should be compelling, not just your page's HTML title.
- og:description — The supporting text shown below the title. Aim for 150–200 characters. This is your conversion copy — make it count.
- og:image — The preview image. This is the most impactful element. Must be an absolute URL (including
https://). - og:url — The canonical URL of your page. Used by platforms to deduplicate shares and aggregate like counts.
3. All OG properties reference
Beyond the four essential tags, the Open Graph protocol defines many additional properties. Here's the full reference:
| Property | Status | Description | Example |
|---|---|---|---|
| og:title | Required | The title of your page for social sharing | "My Blog Post" |
| og:description | Required | A 1-2 sentence description | "Learn how to…" |
| og:image | Required | Absolute URL to your share image | "https://…/og.png" |
| og:url | Required | Canonical URL of the page | "https://…/blog/post" |
| og:type | Recommended | Content type: website, article, video, product |
"article" |
| og:site_name | Recommended | Your website's name (displayed separately from title) | "My Website" |
| og:locale | Optional | Language and territory, e.g. en_US |
"en_US" |
| og:image:width | Recommended | Width in pixels of og:image | "1200" |
| og:image:height | Recommended | Height in pixels of og:image | "630" |
| og:image:alt | Recommended | Alt text for the image (accessibility) | "Blog post hero image" |
| og:image:type | Optional | MIME type of the image | "image/png" |
| og:video | Optional | URL to a video file or embed | "https://…/video.mp4" |
| og:audio | Optional | URL to an audio file | "https://…/audio.mp3" |
Article-specific properties
When og:type is set to article, you unlock additional properties that help platforms surface your content correctly in news feeds and search:
<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://yourdomain.com/about">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="SEO">4. Twitter Card tags
Twitter (now X) uses its own meta tag namespace twitter: in addition to reading OG tags. While Twitter will fall back to your OG tags if Twitter-specific ones are missing, having both gives you more control — especially over card format.
Summary Card (small image)
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="How to Build a SaaS in 30 Days">
<meta name="twitter:description" content="A step-by-step guide to launching a SaaS product.">
<meta name="twitter:image" content="https://yourdomain.com/images/saas-og.png">
<meta name="twitter:site" content="@yourhandle">Summary Large Image Card (recommended)
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="How to Build a SaaS in 30 Days">
<meta name="twitter:description" content="A step-by-step guide to launching a SaaS product.">
<meta name="twitter:image" content="https://yourdomain.com/images/saas-og.png">
<meta name="twitter:image:alt" content="Illustration of a SaaS dashboard">
<meta name="twitter:creator" content="@authorhandle">Use summary_large_image for blog posts, product pages, and anything visual. Use summary for small utility pages. Note that Twitter uses name= instead of property= — this is intentional and must match exactly.
Twitter card priority: If both twitter:title and og:title exist, Twitter uses twitter:title. If only og:title exists, Twitter uses that. You can safely omit Twitter-specific tags if your OG tags are perfect, but having both gives you more control.
5. OG image requirements by platform
Your og:image is the single most important element for driving clicks. Each platform has slightly different requirements:
| Platform | Recommended Size | Min Size | Max File Size | Format |
|---|---|---|---|---|
| 1200 × 628px | 600 × 314px | 8MB | PNG, JPG | |
| Twitter/X | 1200 × 630px | 300 × 157px | 5MB | PNG, JPG, GIF |
| 1200 × 627px | 1200 × 627px | 5MB | PNG, JPG | |
| Slack | 600 × 315px | 200 × 100px | 2MB | PNG, JPG |
| 400 × 400px | 300 × 200px | 5MB | PNG, JPG |
The practical rule: Create one image at exactly 1200 × 630px at under 1MB (PNG or JPG). This satisfies all platforms at once. Always use an absolute HTTPS URL — relative paths do not work.
LinkedIn gotcha: LinkedIn has strict minimum size requirements. If your image is smaller than 1200 × 627px, LinkedIn will show your page without an image, regardless of what other platforms show.
6. How to test your OG tags
After adding OG tags, don't assume they work — verify them. Here are the best tools:
🔍 Test with share-preview.com
The fastest way to see exactly how your link will look on Twitter/X, Facebook, LinkedIn, Slack, and WhatsApp — all at once, with a full OG tag analyzer.
Check Your URL Free →Platform-specific validators
- Facebook Sharing Debugger:
developers.facebook.com/tools/debug— Shows what Facebook sees and lets you force-clear the cache - Twitter Card Validator:
cards-dev.twitter.com/validator— Validates your Twitter Card markup - LinkedIn Post Inspector:
linkedin.com/post-inspector— Checks LinkedIn's view and refreshes cache - Slack: No official validator — use share-preview.com for Slack previews
After making changes — force cache refresh
Social platforms aggressively cache page metadata. After fixing your OG tags, you must clear each platform's cache before your changes appear:
- Facebook: Use the Sharing Debugger → click "Scrape Again"
- LinkedIn: Use the Post Inspector → click "Inspect"
- Twitter: Use the Card Validator — Twitter caches are usually short-lived (hours)
- Slack: Unfurl cache expires in 24-48 hours; no manual refresh available
7. Seven common Open Graph mistakes
Mistake 1: Using relative image URLs
The single most common OG error. Social media bots don't know your domain when they parse the tag value, so relative URLs like /images/og.png result in a broken image.
<!-- ❌ Wrong — relative URL -->
<meta property="og:image" content="/images/og.png">
<!-- ✅ Correct — absolute URL with https:// -->
<meta property="og:image" content="https://yourdomain.com/images/og.png">Mistake 2: Image too small
Images below 600×315px get rejected by Facebook and don't display on most platforms. Always create a dedicated OG image at 1200×630px.
Mistake 3: og:title identical to the HTML <title>
Your HTML <title> is optimized for SEO (includes keywords, site name). Your og:title should be optimized for social sharing (compelling, click-worthy). They don't need to match.
Mistake 4: Missing og:url on paginated or duplicate pages
Without og:url, platforms can't correctly aggregate share counts across URL variants (/page vs /page/ vs /page?ref=twitter). Always set og:url to the canonical URL.
Mistake 5: Using Twitter's name= on OG properties
OG tags use property=. Twitter tags use name=. Mixing them up means the tags are silently ignored.
<!-- ❌ Wrong -- using name= for OG -->
<meta name="og:title" content="My Title">
<!-- ✅ Correct -->
<meta property="og:title" content="My Title"> <!-- OG uses property= -->
<meta name="twitter:title" content="My Title"> <!-- Twitter uses name= -->Mistake 6: Setting og:type to the wrong value
The default for og:type is website. If your page is a blog post, set it to article. If it's a product, use product. The type unlocks additional properties and affects how platforms index your content.
Mistake 7: Skipping og:image:alt
The og:image:alt tag provides alt text for your OG image. This matters for accessibility (screen reader users who encounter your link in social apps) and is a ranking signal on LinkedIn. Don't skip it.
8. Platform differences to know
Each platform has quirks beyond just image sizes:
- Facebook is the strictest — it validates image URLs with a HEAD request before displaying them. If your server returns a non-200 status for the image URL, Facebook will show no image.
- Twitter/X truncates titles at ~70 characters and descriptions at ~200 characters. They also stopped showing og:description in some card formats, making the image and title more critical than ever.
- LinkedIn requires exact image dimensions. It also adds a "company logo" overlay when it detects a verified company page, which can look great or terrible depending on your image design.
- Slack uses the og:image URL to generate its own thumbnail. Slack respects a Slack-specific
slack-app-idmeta tag for deep linking into Slack apps. - WhatsApp generates previews by fetching the og:image directly. It doesn't show og:description, only og:title and og:image — so those two must be perfect.
The fastest way to check all platforms at once: Use share-preview.com — paste your URL and instantly see platform-accurate previews for all five platforms simultaneously, plus a complete OG tag diagnostic report.
Complete OG tag template
Here's a complete, production-ready template you can copy into your <head> and customize:
<!-- Primary Meta Tags -->
<title>Page Title for SEO — Site Name</title>
<meta name="description" content="155-character description for SEO.">
<link rel="canonical" href="https://yourdomain.com/your-page">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://yourdomain.com/your-page">
<meta property="og:title" content="Compelling Social Title (under 60 chars)">
<meta property="og:description" content="Compelling description for social (150-200 chars).">
<meta property="og:image" content="https://yourdomain.com/images/og-1200x630.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 content">
<meta property="og:site_name" content="Your Site Name">
<meta property="og:locale" content="en_US">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourTwitterHandle">
<meta name="twitter:creator" content="@authorHandle">
<meta name="twitter:title" content="Compelling Social Title">
<meta name="twitter:description" content="Compelling description for Twitter.">
<meta name="twitter:image" content="https://yourdomain.com/images/og-1200x630.png">
<meta name="twitter:image:alt" content="Description of the image content">See How Your Page Looks When Shared
Test your OG tags across Twitter, LinkedIn, Facebook, Slack, and WhatsApp instantly.
Test Share Preview Free →