Complete Open Graph Guide
Everything you need to know about Open Graph protocol for social media link previews.
Logan Renz
• DeveloperComprehensive Open Graph implementation guide based on official platform documentation.
What is Open Graph?
Open Graph (OG) is a protocol created by Facebook in 2010 that controls how web pages appear when shared on social media. It uses HTML meta tags in your page's <head> section.
<head>
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling description" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
</head>Required Tags
At minimum, include these four tags:
| Tag | Description |
|---|---|
og:title | Page title (60-70 chars) |
og:description | Brief description (150-160 chars) |
og:image | Absolute HTTPS image URL |
og:url | Canonical page URL |
Image Best Practices
Universal Image Size
1200 × 630 pixels (1.91:1 ratio)
Works on Facebook, LinkedIn, Slack, Discord, Telegram, WhatsApp, iMessage. Keep under 1MB, use JPG or PNG.
Platform-specific differences:
- Twitter: Prefers 1200×675px (16:9 ratio) for large cards
- LinkedIn: Uses 1200×627px (slightly different)
- WhatsApp: Strict 300KB file size limit
Common Mistakes
❌ Relative URLs
/images/og.jpg → Use https://example.com/images/og.jpg
❌ Client-side only tags
Social crawlers don't run JavaScript. Use SSR/SSG.
❌ Missing image dimensions
Add og:image:width and og:image:height for faster loading.
Framework Examples
Nuxt 3
useSeoMeta({
ogTitle: 'Your Page Title',
ogDescription: 'Your description',
ogImage: 'https://example.com/og-image.jpg',
ogUrl: 'https://example.com',
twitterCard: 'summary_large_image'
})Next.js 14+
export const metadata = {
openGraph: {
title: 'Your Page Title',
description: 'Your description',
images: ['https://example.com/og-image.jpg'],
url: 'https://example.com'
}
}Debugging Tools
- Facebook Sharing Debugger — Preview and clear cache
- LinkedIn Post Inspector — Preview and debug
- Twitter Card Validator — Test Twitter Cards
- Our Preview Tool — Test all platforms at once
Official Resources
Test Your OG Tags
Preview how your links appear on Facebook, Twitter, LinkedIn, and 5 more platforms.
Open Preview Tool