OG Image Guides & Tutorials
Everything you need to know about OG images — from dimensions and best practices to framework-specific integration guides for Next.js, React, Astro, Gatsby, WordPress, and more.
Educational
Understand OG images, dimensions, best practices, social media sizes, and dynamic generation.
What Is an OG Image? A Complete Guide to Open Graph Images
Learn what OG images are, why they matter for social media sharing, and how to create them. Covers Open Graph protocol, dimensions, and best practices.
Quick Answer
An OG (Open Graph) image is the preview image that appears when you share a URL on social media platforms like Twitter, Facebook, LinkedIn, Slack, and Discord. It is defined using the og:image meta tag in your HTML and is typically 1200×630 pixels.
OG Image Dimensions: The Complete Size Guide for Every Platform
The definitive guide to OG image sizes for Facebook, Twitter, LinkedIn, Slack, Discord, and more. Includes pixel dimensions, aspect ratios, and file size limits.
Quick Answer
The standard OG image size is 1200×630 pixels with a 1.91:1 aspect ratio. This single size works across Facebook, Twitter/X, LinkedIn, Slack, Discord, WhatsApp, and iMessage. Keep file size under 5MB (ideally under 1MB) and use PNG or JPEG format.
Dynamic OG Images: How to Generate Social Previews Automatically
Learn how to generate dynamic OG images automatically for blogs, SaaS, and e-commerce. Covers API-based generation, Satori, headless Chrome, and edge rendering.
Quick Answer
Dynamic OG images are social preview images generated automatically from page data (title, description, author) instead of being manually designed. The three main approaches are: API-based generation (fastest, no infrastructure), Satori/Vercel Edge (self-hosted, React-based), and headless Chrome (most flexible, slowest).
OG Image Best Practices: 12 Rules for Maximum Social Media Engagement
Master the 12 essential OG image best practices for social media. Covers text sizing, contrast, safe zones, branding, A/B testing, common mistakes, and design templates.
Quick Answer
The most important OG image best practices are: use 1200x630px dimensions, keep text above 40px font size at that resolution, maintain a 60px safe zone from edges, use high contrast between text and background, include your brand logo, and always test across platforms before publishing.
Social Media Image Sizes 2026: Complete Guide for Every Platform
The definitive 2026 guide to social media image sizes for every platform. Covers OG images, profile pictures, cover photos, post images, stories, and reels for Facebook, Twitter, LinkedIn, Instagram, TikTok, Pinterest, YouTube, and Discord.
Quick Answer
The universal OG image size for link previews is 1200x630px (1.91:1 ratio), which works across Facebook, Twitter, LinkedIn, Slack, and Discord. Profile pictures are typically 400x400px. Cover photos vary: Facebook uses 820x312px, Twitter 1500x500px, and LinkedIn 1128x191px. Story/reel dimensions are 1080x1920px (9:16).
Framework Guides
Step-by-step integration guides for Next.js, React, Astro, Gatsby, WordPress, and HTML.
How to Add OG Images to Next.js — Step-by-Step Guide
Add dynamic Open Graph images to your Next.js app in 5 minutes. Covers App Router metadata API, dynamic routes, and API-based generation.
Quick Answer
To add OG images in Next.js App Router, export a metadata object or generateMetadata function from your page and set the openGraph.images property to an image URL. The fastest approach is using an API like ogimg.xyz that generates images from your page title and description.
How to Add OG Images to React Apps (Vite, CRA, Remix)
Add Open Graph images to your React application. Covers react-helmet, Vite SSR, Remix meta, and API-based OG image generation.
Quick Answer
To add OG images in React, you need to set og:image meta tags in the HTML head. For client-side React (Vite/CRA), use react-helmet-async. For SSR frameworks like Remix, use the built-in meta function. Point the og:image URL to an API endpoint that generates images from your page data.
How to Add OG Images to Any HTML Website
Add Open Graph images to any HTML website in 2 minutes. Copy-paste meta tags for static sites, WordPress, Hugo, Jekyll, and any HTML page.
Quick Answer
To add an OG image to any HTML page, add a <meta property="og:image" content="https://your-image-url.png"> tag inside the <head> section. The image URL must be absolute (starting with https://). The recommended image size is 1200x630 pixels.
How to Add OG Images to Astro — Step-by-Step Guide
Add dynamic Open Graph images to your Astro site in minutes. Covers content collections, Layout components, head injection, and API-based OG image generation.
Quick Answer
To add OG images in Astro, place a <meta property="og:image"> tag inside the <head> of your Layout component and pass the image URL as a prop from each page. The fastest approach is using an API like ogimg.xyz to generate images dynamically from your page title and description.
How to Add OG Images to Gatsby — Complete Guide
Add dynamic Open Graph images to your Gatsby site. Covers the Gatsby Head API, gatsby-plugin-react-helmet, GraphQL data for dynamic OG images, and API-based generation.
Quick Answer
To add OG images in Gatsby, use the Gatsby Head API (Gatsby 4.19+) by exporting a Head function from your page component that returns og:image meta tags. For older versions, use gatsby-plugin-react-helmet. Point the og:image URL to an API like ogimg.xyz to auto-generate images from page data.
How to Add OG Images to WordPress — No Plugin Required
Add dynamic Open Graph images to WordPress without a plugin. Covers functions.php, Yoast SEO, Rank Math, custom themes, and API-based OG image generation.
Quick Answer
To add OG images to WordPress without a plugin, add a wp_head action in your theme's functions.php that outputs og:image meta tags using the post title. For a plugin-based approach, Yoast SEO and Rank Math both support custom OG images. The fastest automated method is pointing the og:image to an API like ogimg.xyz.
Try OG Image Generator Free
50 images/month on the free plan. No credit card required. Start generating OG images in minutes.