The Complete Guide to Open Graph Images in 2026

When someone shares your link on Twitter, LinkedIn, Slack, or iMessage, a preview card appears. That card has a title, a description, and an image. That image is your Open Graph image — and it has more influence on whether someone clicks your link than almost anything else on the page.

This guide covers everything: what OG images are, how they work technically, exact specifications for every major platform, the most common mistakes that cause broken previews, and how to generate perfect ones without a designer or any code.

What Is an Open Graph Image?

Open Graph is a protocol originally created by Facebook in 2010 that allows any web page to define how it should appear when shared on social media. You add a set of meta tags to your HTML, and platforms read those tags to build the preview card.

The og:image tag tells platforms which image to show in that preview card. Without it, platforms either show no image, pick one randomly from your page, or display a gray placeholder.

The full set of OG tags that matter: og:title, og:description, og:image, og:url, og:image:width, og:image:height (explicit dimensions prevent async loading issues), and og:type (usually

Why OG Images Matter: The Click-Through Effect

Branded short links with custom preview images have been shown to improve click-through rates by up to 39% compared to links with no image or a poor auto-generated one. The image is the first thing people see. Before they read your title or description, they've already made a subconscious decision about whether to click.

A well-designed OG image communicates brand, context, and credibility instantly. A broken or irrelevant image communicates the opposite. In a feed where dozens of links compete for attention, your OG image is your headline.

Exact Specifications for Every Platform in 2026

Recommended: 1200×627px. Formats: JPG and PNG only — LinkedIn does not support WebP. Max file size: 5MB, aim for under 300KB. Title: max 150 characters.

Twitter / X

Recommended: 1200×628px for summary_large_image cards. Aspect ratio 2:1. Formats: JPG, PNG, WebP. Twitter requires its own twitter:card tag — without it many clients won't show an image even if og:image is set.

Facebook

Recommended: 1200×630px. Images under 600px wide display as a small left-side thumbnail, not a large card. Use Facebook's Sharing Debugger at developers.facebook.com/tools/debug.

Slack

Recommended: 1200×630px. Keep file size under 1MB — Slack's bot has a short timeout.

Hard file size limit: 300KB. If your og:image exceeds 300KB, WhatsApp silently drops the preview with no error. This is poorly documented and catches a lot of people out.

Discord

Recommended: 1200×630px. Add ?nocache=1 to a URL to force Discord to re-fetch metadata without cache.

The Universal Safe Spec

1200×630px JPG, under 300KB. This satisfies LinkedIn, Twitter, Facebook, Slack, Discord, WhatsApp, and iMessage. Keep key content centred — some platforms crop edges on mobile. Always include explicit og:image:width and og:image:height to prevent async loading issues on first share.

The 7 Most Common OG Image Mistakes

Image too small — always use 1200×630px minimum. Anything smaller gets rejected or shown as a tiny thumbnail.
HTTP instead of HTTPS — og:image must be served over HTTPS. HTTP silently fails on most platforms.
No width/height tags — without og:image:width and og:image:height, Facebook parses your image asynchronously. The first person to share your link often sees a broken preview.
Image over 300KB — WhatsApp silently drops it. Compress aggressively if WhatsApp is in your audience.
WebP on LinkedIn — LinkedIn doesn't support WebP. Use JPG or PNG only.
No twitter:card tag — Twitter/X requires twitter:card even if og:image is set. Without it, many clients won't show the image.
Stale cached previews — platforms cache OG data from the first crawl. Force a re-scrape via each platform's debugging tool.

How to Generate Great OG Images

Manually in Figma or Canva: Create a 1200×630px frame, add your branding and title text, export as JPG under 300KB. Good for one-off important pages like your homepage.

Automated with Satori: Programmatically generate OG images from JSX templates. Define a React component, pass in dynamic text, get a PNG back. Ideal for blogs and docs where every page needs a unique image.

AI-generated with Peeksy: Paste any URL, AI generates a branded image, get a short link that serves your custom OG tags — even for pages you don't own.

How to Test Your OG Images

Before sharing any important link, test it on the platform's own debugging tool:

LinkedIn: linkedin.com/post-inspector
Twitter/X: Twitter Card Validator at developer.twitter.com
Facebook: developers.facebook.com/tools/debug
All platforms at once: opengraph.xyz

Taking Full Control With Peeksy

The fundamental limitation of Open Graph tags is they only work if you control the destination page. For your own website, this guide fixes everything. But when sharing YouTube videos, news articles, or any external content — you're at the mercy of what that site set.

Peeksy creates a short link that acts as a proxy for OG metadata. You define the title, description, and image. Platforms crawl your Peeksy link, read your custom tags, and show your perfect preview. The user clicks through to the original destination. Works for any URL, regardless of what the destination page has set.