- og:image should be 1200×630 pixels (1.91:1 aspect ratio)
- Minimum size is 600×315 pixels; smaller images may not display
- File size should stay under 5 MB; under 1 MB is preferred
- Use JPEG or PNG; WebP has limited support on older platforms
Rule Details
The og:image is the visual preview displayed when a link is shared on social platforms. An incorrect size leads to the image being cropped, distorted, skipped, or replaced with a blank card.
Code Examples
<!-- ✅ Good: Correct size, absolute URL, explicit dimensions -->
<head>
<meta property="og:image" content="https://example.com/og/home.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="BakeCo – Artisan bread recipes" />
<meta property="og:image:type" content="image/jpeg" />
</head><!-- ❌ Bad: Relative URL, no dimensions, small image -->
<meta property="og:image" content="/images/logo.png" />
<!-- logo.png is 200×60 px — too small, wrong ratio -->Why It Matters
An incorrectly sized og:image is displayed poorly or not at all on social platforms—Facebook, Twitter/X, LinkedIn each crop or skip images that don't meet their requirements, resulting in blank or distorted link previews.
Recommended Dimensions
| Platform | Recommended Size | Minimum Size | Aspect Ratio |
|---|---|---|---|
| 1200×630 px | 600×315 px | 1.91:1 | |
| 1200×627 px | 1200×627 px | 1.91:1 | |
| Twitter/X (summary_large_image) | 1200×628 px | 300×157 px | 2:1 |
| Slack | 1200×630 px | any | — |
| iMessage | 1200×630 px | any | — |
Use 1200×630 px to satisfy all major platforms.
Next.js Dynamic OG Images
// app/og/route.tsx — using @vercel/og
import { ImageResponse } from 'next/og'
export const runtime = 'edge'
export async function GET(request: Request) {
const { searchParams } = new URL(request.url)
const title = searchParams.get('title') || 'Default Title'
return new ImageResponse(
(
<div
style={{
width: '1200px',
height: '630px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: '#fff',
fontSize: 48,
}}
>
{title}
</div>
),
{ width: 1200, height: 630 }
)
}// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
const post = await getPost(params.slug)
return {
openGraph: {
images: [
{
url: `https://example.com/og?title=${encodeURIComponent(post.title)}`,
width: 1200,
height: 630,
alt: post.title,
},
],
},
}
}File Format and Size
✅ JPEG 1200×630 @ 80% quality ≈ 100–300 KB (recommended)
✅ PNG 1200×630 ≈ 300–600 KB (for text/transparency)
⚠️ WebP 1200×630 ≈ 80–200 KB (limited platform support)
❌ GIF ≈ varies (not recommended)Exceptions
- Utility or intentionally noindex pages may keep minimal metadata when richer search presentation is not a goal.
- Template-driven pages can look repetitive in isolation; confirm the fully rendered production output before flagging duplication or omission.
- If a page is intentionally redirected or excluded from indexation, resolve that crawlability decision before treating metadata polish as the primary issue.
Verification
Automated Checks
- Facebook Sharing Debugger (opens in new tab) — shows exact image dimensions and warnings
- X Cards Getting Started (opens in new tab)
- LinkedIn Post Inspector (opens in new tab)
Manual Checks
- Review representative live pages manually and confirm there is no stronger conflicting signal that changes the intended SEO outcome.
Use with AI
Copy these prompts to use with your AI assistant, or install the MCP server to use directly from Claude, Cursor, or Windsurf.
Check
Verify implementation
Find the og:image meta tag in <head> and fetch the image URL. Check the image dimensions and file size. Flag if width < 1200px, height < 630px, aspect ratio differs significantly from 1.91:1, or file size exceeds 5 MB.
Fix
Auto-fix issues
Generate or resize the og:image to exactly 1200×630 pixels. Export as JPEG at 80–85% quality to balance visual quality and file size. Reference the absolute HTTPS URL in the og:image meta tag. Add og:image:width and og:image:height tags to help platforms render the image without downloading it first.
Explain
Learn more
Social platforms use og:image to construct the visual card shown when a URL is shared. An image too small may be skipped or shown as a thumbnail. An image with the wrong aspect ratio gets cropped, often cutting off important content. The recommended 1200×630 size ensures optimal display across Facebook, LinkedIn, Slack, and iMessage.
Review
Code review
Check the og:image meta tag value. Fetch the image and verify: (1) dimensions are at least 1200×630 px, (2) aspect ratio is approximately 1.91:1, (3) file size is under 5 MB, (4) URL is absolute HTTPS, (5) og:image:width and og:image:height tags match actual dimensions. Flag relative URLs or images smaller than 600×315 px.
