OpenGraph Images App

Preview, diagnose, and generate optimized OpenGraph images in the right dimensions with smaller file sizes.

Analyze a URL

Add Your AI Keys

No Key Added Yet

Use your own AI keys (stored only in your browser) so you can generate your own images and prompts.

○ Replicate API Key Not set ›
Get your API key from Replicate · Stored locally in your browser
○ Google AI Studio Gemini Key Not set ›
Get your Gemini API key from Google AI Studio · Stored locally in your browser

AI Image Prompt Helper

Generate optimized prompts for your OpenGraph images based on page content. Powered by Claude Sonnet 4.5 via Replicate.

Generate Optimized OpenGraph Image
Preset: 1280x720 (16:9), height divisible by 16, 1 output, deterministic seed

Optimize Image

Resizes to 1200×630 and compresses the image file size for you to meet different social platform requirements.

Download Hosted Image

FAQ

These recommendations are normalized from platform docs in docs/ and are intended to work across most major sharing platforms.

What OG image size works best across most platforms?
Use 1200×630 (about 1.91:1). Facebook, LinkedIn, WhatsApp, Slack unfurls, Apple Messages, and most RCS clients all handle this ratio well.
How large should the image file be?
Keep OG images under 300 KB when possible for reliable previews and faster loading, especially on mobile and messaging apps. Some platforms allow larger files, but 300 KB is a safe cross-platform target.
Can I use WebP for OpenGraph images?
Yes. Based on Yoast/Joost testing updated in December 2024, WebP works across major sharing platforms including Bluesky, Discord, Facebook, iMessage, Pinterest, LinkedIn, Mastodon, Slack, Threads, Twitter/X, and WhatsApp. AVIF support is still inconsistent, so WebP is currently the safer modern format for og:image and twitter:image. Source: joost.blog/use-avif-webp-share-images
Which meta tags are the minimum required?
At minimum include: og:title, og:description, og:image, og:url, and og:type. Add Twitter/X tags too: twitter:card, twitter:title, twitter:description, twitter:image. For attribution on Twitter/X, add twitter:site with your site’s Twitter handle in @username form (e.g. @kirwanseo).
What value should I use for twitter:site?
Use your website’s Twitter/X @username only (e.g. content="@kirwanseo"). No URL—just the handle. This attributes the card to your brand when the link is shared.
Should image URLs be absolute or relative?
Use absolute HTTPS URLs for og:image and twitter:image. Relative paths are a common reason previews fail in Slack and messaging clients.
Do I need server-side rendering for social tags?
Yes. Put OG/Twitter tags directly in the initial HTML response. Most crawlers do not run your JavaScript app before building previews.
Why does my preview still show old metadata?
Platforms cache previews. After updating tags or images, re-scrape with platform tools (for example: Facebook Sharing Debugger, LinkedIn Post Inspector) or change image URLs with a version query string.