Open Graph Tags: The Developer's Guide to Perfect Social Shares
A complete guide to Open Graph meta tags — the properties you need, platform-specific requirements, and how to preview shares before publishing.
Alex Torres
Frontend Engineer & SEO Specialist
What Are Open Graph Tags?
Open Graph (OG) is a protocol created by Facebook that standardises how web pages represent themselves when shared on social platforms. Every major platform — Twitter/X, LinkedIn, Facebook, Slack, Discord — reads OG tags to generate link previews.
Without OG tags, platforms make their best guess at what image, title, and description to show. The results are often wrong.
The Essential Tags
Paste these inside the <head> of every page:
<!-- Basic OG tags -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="120–160 character description." />
<meta property="og:image" content="https://yourdomain.com/og/page-image.png" />
<meta property="og:url" content="https://yourdomain.com/your-page" />
<meta property="og:type" content="website" />
<!-- Twitter-specific (falls back to OG if omitted) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourhandle" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="Slightly shorter for Twitter's card display." />
<meta name="twitter:image" content="https://yourdomain.com/og/page-image.png" />
Generate all of these in one pass with our Meta Tag Generator.
Image Requirements by Platform
| Platform | Recommended Size | Minimum | Ratio |
|---|---|---|---|
| 1200 × 630px | 600 × 315px | 1.91:1 | |
| Twitter/X | 1200 × 628px | 300 × 157px | 1.91:1 |
| 1200 × 627px | 200 × 200px | 1.91:1 | |
| Discord | Any | 80 × 80px | Any |
Golden rule: Design for 1200 × 630px. It works on every platform.
OG Type Values
og:type tells platforms what kind of content this is:
website: most pages (default)article: blog posts (use witharticle:published_time,article:author)product: e-commerce itemsvideo.movie,music.song: media content
For blog posts:
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-04-22T10:00:00Z" />
<meta property="article:author" content="https://yourdomain.com/about" />
Testing Before Publishing
Use our OG Image Preview tool to see exactly how your link will appear on Twitter, LinkedIn, and Facebook — before hitting publish.
Additionally:
- Twitter: cards-dev.twitter.com/validator (requires login)
- Facebook: developers.facebook.com/tools/debug
- LinkedIn: Post Inspection API in developer tools
Caching Issues
Platforms cache OG data aggressively. After updating your tags, you need to force a cache refresh:
- Facebook: use the Sharing Debugger and click "Scrape Again"
- LinkedIn: use the Post Inspector tool
- Twitter/X: the cache refreshes within 24 hours automatically
Next.js Implementation
In Next.js 15 App Router, handle OG metadata declaratively:
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return {
title: post.title,
description: post.description,
openGraph: {
title: post.title,
description: post.description,
images: [{ url: post.ogImage, width: 1200, height: 630 }],
type: "article",
publishedTime: post.publishedAt,
},
twitter: {
card: "summary_large_image",
title: post.title,
description: post.description,
images: [post.ogImage],
},
};
}
This approach ensures tags are server-rendered and visible to crawlers without any JavaScript execution.