Master Open Graph and Twitter Card meta tags to control how your content appears when shared on social media, Slack, Discord, and messaging apps.
Every time you share a link on Twitter, Slack, or WhatsApp, the platform fetches that URL and reads Open Graph meta tags to create a preview card. Get these tags right, and every shared link becomes a mini-advertisement for your content.
<head>
<!-- Required -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling description under 160 chars" />
<meta property="og:image" content="https://yoursite.com/og/page.png" />
<meta property="og:url" content="https://yoursite.com/your-page" />
<!-- Recommended -->
<meta property="og:type" content="website" /> <!-- or 'article' for blog posts -->
<meta property="og:site_name" content="YourSite" />
<!-- Twitter/X specific -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourusername" />
<meta name="twitter:creator" content="@yourusername" />
</head>
The image is the most important element — it's what makes people stop scrolling.
| Platform | Recommended size | Aspect ratio | Min size |
|---|---|---|---|
| Facebook / OG | 1200 × 630 | 1.91:1 | 600 × 315 |
| Twitter/X large | 1200 × 630 | 2:1 | 300 × 157 |
| Twitter/X small | 800 × 800 | 1:1 | 144 × 144 |
| 1200 × 627 | 1.91:1 | 1200 × 627 |
Use 1200 × 630 px and you'll cover every platform. Use PNG for graphics/text, JPEG for photos.
Static OG images don't scale — you'd need one per blog post, per product, per user. Generate them dynamically with next/og in Next.js:
// app/blog/[slug]/opengraph-image.tsx
import { ImageResponse } from 'next/og';
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';
export default async function Image({ params }: { params: { slug: string } }) {
const post = await getPost(params.slug);
return new ImageResponse(
<div style={{ display: 'flex', background: '#0a0a0a', width: '100%', height: '100%' }}>
<h1 style={{ color: 'white', fontSize: 64 }}>{post.title}</h1>
</div>,
{ width: 1200, height: 630 }
);
}
For blog posts and articles, add these additional tags:
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2025-01-15T00:00:00Z" />
<meta property="article:modified_time" content="2025-02-01T00:00:00Z" />
<meta property="article:author" content="https://yoursite.com/about" />
<meta property="article:tag" content="javascript" />
<meta property="article:tag" content="web-development" />
1. Using relative image URLs — always use absolute URLs with HTTPS.
2. Images smaller than 300×157 — platforms won't show them as large cards.
3. Not setting og:url — without it, some platforms use the current URL which may differ from canonical.
4. Descriptions over 160 characters — they'll be truncated on most platforms.
5. No Twitter Card tags — Twitter uses its own twitter:* tags and falls back to OG if missing, but explicit Twitter tags give more control.
6. Serving images that require authentication — crawlers can't log in. OG images must be publicly accessible.
Use these official validators to preview how your links appear:
Note: Facebook and LinkedIn aggressively cache OG tags. After updating them, use the official debugger to force a cache refresh.