Guides
Open Graph images, explained without the guesswork
Start with the definition, get the dimensions right, then copy the tags or fix the preview that refuses to appear. Every guide is written for the person shipping the page.
Start here
Fundamentals · 8 min read
What is an Open Graph image?
An Open Graph image is the preview card shown when a link is shared. Learn what og:image does, why 1200 x 630 is the standard, and how to add it correctly.
Read the guide- Standard size
- 1200 x 630 px (1.91:1)
- Defining tag
- og:image in the page head
- Formats
- JPG, PNG, or WebP
- Safe file size
- Under 1 MB
Fundamentals
What an OG image is, why it matters, and how to make one.
What is an Open Graph image?
An Open Graph image is the preview card shown when a link is shared. Learn what og:image does, why 1200 x 630 is the standard, and how to add it correctly.
8 min · Updated October 27, 2026
How to create an Open Graph image
A step-by-step guide to creating an Open Graph image at 1200 x 630, exporting it, adding the og:image tag, and checking the preview on each platform.
8 min · Updated October 27, 2026
Sizes
The dimensions, ratios, and safe areas for every platform.
Open Graph image size: the 1200 x 630 guide
The complete Open Graph image size guide: 1200 x 630 for OG, 1200 x 628 for X, 1200 x 627 for LinkedIn, plus safe areas, file sizes, and crop behaviour.
7 min · Updated October 27, 2026
Twitter card image size for X
The right image size for X cards: 1200 x 628 for summary_large_image, a square for summary, plus the tags, safe areas, and common cropping fixes.
6 min · Updated October 27, 2026
Implementation
Tags, frameworks, CMS plugins, and generated cards.
Open Graph meta tags: the complete reference
Every Open Graph meta tag, what it does, and a copy-paste example. Includes the minimum viable set, Twitter card tags, and the mistakes that break previews.
9 min · Updated October 27, 2026
Next.js Open Graph images: metadata and dynamic OG cards
Add Open Graph images in the Next.js App Router with static metadata, generateMetadata, or a dynamic opengraph-image.tsx built with next/og.
9 min · Updated October 27, 2026
WordPress Open Graph images: plugins, defaults, and code
Set a WordPress Open Graph image with Yoast, Rank Math, or a small code snippet. Fix missing previews, set defaults, and avoid duplicate og:image tags.
7 min · Updated October 27, 2026
Design
Type, contrast, composition, and a repeatable card system.
Open Graph image best practices that survive every feed
Practical Open Graph image best practices: type sizes that survive thumbnails, safe areas for aggressive crops, contrast, file weight, and a repeatable card system.
7 min · Updated October 27, 2026
Open Graph image examples, and why they work
Eight annotated Open Graph image examples for blog posts, launches, changelogs, podcasts, and product pages. Open any example and edit it for free.
8 min · Updated October 27, 2026
Troubleshooting
Fix a missing, cropped, or stale preview.
Skip the reading
Make the card, copy the tags
The editor exports a 1200 x 630 image and generates the Open Graph tags. No account, no upload, no watermark.