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):
CODE
<!-- 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:
CODE
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
CODE
<!-- 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
CODE
<!-- 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
CODE
<!-- 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
CODE
// 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
CODE
// 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)
CODE
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:
CODE
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
- - 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!
Vollständiger Original-Bericht
Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.
SOCIAL SHARE CARD GENERATOR