Hey there! 👋 Let's dive into the technical stuff. No fluff, just practical knowledge you can use today.
What We'll Cover 🗺️
- Core OpenGraph specs that actually matter
- Platform-specific requirements
- Implementation patterns that work
- Testing & validation approaches
- Common gotchas and fixes
The Core Specs You Need 📋
Let's start with the essentials. Here's what you actually need (I've tested these across platforms):
<!-- Essential Meta Tags -->
<meta property="og:title" content="Your Title Here">
<meta property="og:description" content="Your Description">
<meta property="og:image" content="https://your-domain.com/og-image.png">
<meta property="og:url" content="https://your-domain.com/page">
Image Specifications That Work Everywhere 🎨
After testing across platforms, here are the optimal specs:
Dimensions: 1200x630px (Ratio 1.91:1)
Format: PNG or JPEG
Max file size: 8MB
Min file size: 10KB
Pro tip: If you're targeting multiple platforms, 1200x630px is your sweet spot. It works well everywhere and doesn't get cropped weirdly.
Platform-Specific Requirements 🎯
Let's break it down by platform (updated for 2024):
<!-- Twitter-specific -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourusername">
<meta name="twitter:creator" content="@yourusername">
<!-- These will fallback to og: tags if not specified -->
<meta name="twitter:title" content="Your Title">
<meta name="twitter:description" content="Your Description">
<meta name="twitter:image" content="https://your-domain.com/og-image.png">
Key points:
- Images are displayed at 800x418px
- Keep important content in the center
- Text remains readable at smaller sizes
<!-- LinkedIn optimization -->
<meta property="og:type" content="article">
<meta property="og:title" content="Your Professional Title">
<meta property="article:published_time" content="2024-11-19T08:00:00+00:00">
Notes:
- Aggressive image caching
- May take hours to update
- Use LinkedIn's Post Inspector for faster updates
<!-- Facebook optimization -->
<meta property="fb:app_id" content="your_app_id">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">
Tips:
- Use Facebook's Sharing Debugger
- Force cache refresh with ?v=[timestamp]
- Test mobile rendering specifically
Implementation Patterns 💡
Here are three approaches, from simple to advanced:
1. Static Images
// Next.js example
export const metadata = {
openGraph: {
title: 'Your Title',
description: 'Your Description',
images: [{
url: 'https://your-domain.com/og-image.png',
width: 1200,
height: 630,
alt: 'Image description',
}],
},
}
2. Dynamic Generation with @vercel/og
// pages/api/og.tsx
import { ImageResponse } from '@vercel/og'
export const config = {
runtime: 'edge',
}
export default async function handler(request: Request) {
try {
const { searchParams } = new URL(request.url)
// Get dynamic parameters
const title = searchParams.get('title') ?? 'Default Title'
return new ImageResponse(
(
<div
style={{
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: 128,
background: 'white',
}}
>
{title}
</div>
),
{
width: 1200,
height: 630,
},
)
} catch (e) {
return new Response('Failed to generate image', { status: 500 })
}
}
3. Template-based System (What we use at gleam.so)
interface OGTemplate {
id: string;
layout: TemplateLayout;
dimensions: ImageDimensions;
elements: TemplateElement[];
}
const generateOG = async (template: OGTemplate, data: TemplateData) => {
// Render template with data
// Cache result
// Return optimized image URL
}
Testing & Validation 🧪
Here's a testing checklist I use:
const ogChecklist = {
basics: [
'All required meta tags present',
'Image loads under 3 seconds',
'Text readable at small sizes',
'Proper fallbacks set'
],
platforms: [
'Twitter preview correct',
'LinkedIn rendering properly',
'Facebook mobile/desktop check',
'Discord embed working'
],
technical: [
'Valid image dimensions',
'Proper file size',
'CORS headers set',
'Cache headers optimized'
]
};
Validation Tools
Common Gotchas & Fixes 🔧
- Image Not Updating
// Add cache buster
const imageUrl = `${baseUrl}/og.png?v=${Date.now()}`;
- CORS Issues
// Next.js API route
export default function handler(req, res) {
res.setHeader('Access-Control-Allow-Origin', '*')
// Rest of your code
}
- Slow Loading Times
// Implement preloading
<link
rel="preload"
as="image"
href="your-og-image.png"
>
Performance Tips ⚡
- Image Optimization
import sharp from 'sharp';
const optimizeOG = async (buffer: Buffer) => {
return sharp(buffer)
.resize(1200, 630)
.jpeg({
quality: 80,
progressive: true
})
.toBuffer();
};
- Caching Strategy
// Example with Redis
const CACHE_TTL = 3600; // 1 hour
async function getOGImage(key: string) {
const cached = await redis.get(key);
if (cached) return cached;
const image = await generateOGImage();
await redis.set(key, image, 'EX', CACHE_TTL);
return image;
}
Quick Implementation Checklist ✅
1. Meta Tags
□ Basic OG tags
□ Platform-specific tags
□ Fallback values
2. Images
□ Correct dimensions
□ Optimized file size
□ Proper hosting setup
3. Testing
□ Cross-platform checks
□ Mobile rendering
□ Load time verification
4. Monitoring
□ Error tracking
□ Performance metrics
□ Usage analytics
What's Next? 🚀
In the next part of this series, we'll look at:
- Automation techniques
- Template systems
- A/B testing setups
- Performance optimization
Want to implement all this without the technical overhead?
- Try gleam.so - it's free to start
- Follow me for more technical deep-dives
Have questions? Drop them in the comments! I'm here to help and will use your questions to update this guide. 😊
PS: If you're finding this helpful, don't forget to follow the series for more practical OG image tips!
This is Part 2 of the "Making OpenGraph Work" series. Check out Part 1 if you missed it!
Top comments (0)