When someone shares your page on Twitter, Facebook, LinkedIn, or Slack, what do they see? The title, image, and description come from Open Graph (OG) meta tags — a set of
This guide covers every OG tag you need, how they differ per platform, and common mistakes that cause broken link previews.
What Are Open Graph Tags?
Open Graph was introduced by Facebook in 2010 and is now supported by every major social platform and messaging app. Tags live in your HTML
``html
`
The Four Essential Tags
These four are the minimum for a usable social preview:
og:title
The headline shown in the preview card. Keep it under 60 characters — platforms truncate at different lengths. Make it descriptive, not just your page heading.
og:description
The body text of the preview card. Aim for 120–160 characters. Summarise what the user will get, not what the page is called.
og:image
The preview thumbnail. Requirements:
- Minimum 600×315px; recommended 1200×630px (2:1 ratio)
- Maximum 8MB (keep it under 1MB for fast loading)
- Use absolute URLs (not relative paths)
- PNG or JPG — avoid GIF for static images
og:url
The canonical URL of the page. Must be an absolute URL. This matters for deduplication — if users share two slightly different URLs (with/without trailing slash, with tracking params), og:url tells the platform which one to canonicalise.
Twitter / X Tags
Twitter has its own parallel tag system (twitter: prefix), though it falls back to OG tags if Twitter-specific tags are missing. Add these alongside OG tags for best results:
<code>html
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A short description." />
<meta name="twitter:image" content="https://example.com/og-image.png" />
<meta name="twitter:site" content="@yourhandle" />
</code>
twitter:card controls the card layout:
summary — small square image, title, descriptionsummary_large_image — large hero image (use this for most content)app — for app download cardsplayer — for embedded video/audio
og:type — More Than Just "website"
og:type defaults to website for most pages. Use article for blog posts:
<code>html
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-06-20T10:00:00Z" />
<meta property="article:author" content="https://yoursite.com/author/" />
<meta property="article:section" content="Technology" />
</code>
Using article type signals to Facebook and LinkedIn that this is editorial content, which can affect how it's classified in feeds.
Dynamic OG Images
Static OG images work fine for landing pages, but for dynamic content (blog posts, product pages, user profiles) you need dynamic OG image generation.
Options:
- Vercel OG (@vercel/og
) — generates images via edge functions using JSX - Cloudinary — URL-based image transformation with text overlays
- Satori — Vercel's underlying renderer, usable standalone
A simple Vercel OG setup:
`js
// /app/api/og/route.tsx
import { ImageResponse } from 'next/og';
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const title = searchParams.get('title') || 'Default Title';
return new ImageResponse(
<div style={{ display: 'flex', padding: 40, background: '#fff' }}>
<h1>{title}</h1>
</div>,
{ width: 1200, height: 630 }
);
}
`
Then reference it:
<code>html
<meta property="og:image" content="https://yoursite.com/api/og?title=My+Post+Title" />
</code>
Common Mistakes
1. Using relative image URLs
og:image must be absolute. Crawlers don't have your domain context.
`html
<!-- Wrong -->
<!-- Right -->
`
2. Forgetting og:url on paginated or parameterised pages
If /products?page=2&sort=price and /products?sort=price&page=2 share the same OG tags without og:url, shares are counted separately.
3. Image too small or wrong ratio
Facebook requires at least 200×200px and recommends 1200×630px. LinkedIn shows a 1.91:1 crop. Design your OG image for 1200×630px and it will work everywhere.
4. Title/description too long
Twitter truncates og:title at around 70 characters. LinkedIn wraps at 119 characters. Keep both under 60/120 chars to be safe.
5. Not testing the preview
Tools like Facebook Debugger and LinkedIn Post Inspector will tell you exactly what they see — and will prompt you to flush their cache after you update your tags.
Testing Your Tags
- Facebook Sharing Debugger — developers.facebook.com/tools/debug/
- LinkedIn Post Inspector — linkedin.com/post-inspector/
- Twitter Card Validator — cards-dev.twitter.com/validator`
Or generate and preview all three at once without leaving your browser at SnappyTools Open Graph Meta Tag Generator — paste your details in and see exactly how your card will look on Twitter, Facebook, and LinkedIn.
Quick Reference
| Tag | Required? | Notes |
|---|---|---|
| og:title | Yes | Under 60 chars |
| og:description | Yes | 120–160 chars |
| og:image | Yes | 1200×630px, absolute URL |
| og:url | Yes | Canonical absolute URL |
| og:type | Recommended | website or article |
| og:site_name | Recommended | Your brand name |
| twitter:card | Recommended | summary_large_image |
| twitter:site | Optional | Your @handle |
| article:published_time | Articles | ISO 8601 datetime |
Add these tags to every page you want shared and your social link previews will work correctly on every platform.