The Definitive Guide to OG Images

An Open Graph image (og:image) is the visual preview social platforms display when a URL is shared. It is the single most important factor for driving click-throughs, brand recognition, and content comprehension on social media.

specs & design_guidelines

Aspect Ratio

1.91:1 (horizontal)

This is the universal standard (e.g., 1200×630). Platforms crop differently, so keep key elements centered.

Resolution

1200×630 (recommended)

Go closer to 1600px wide if you have small text, but keep file size managed.

Format

JPEG or PNG

Avoid WebP as primary; support is still spotty on strictly legacy scrapers.

File Size

Under 500 KB

Smaller images fetch faster and fail less often on weak connections.

technical_implementation

<!-- Open Graph -->
<meta property="og:image" content="https://example.com/og/brand-topic.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="Concise description" />

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og/brand-topic.jpg" />

*Always use absolute URLs (https://...) for images. Relative paths often fail to resolve.

platform_specifics

Most platforms will honor core Open Graph, but a few add their own tags or behaviors you should account for.

X (Twitter)

Use twitter:card plus mirrored title/description/image for reliable previews. Summary cards need 1200×630 images; avoid SVGs. Set twitter:card to summary_large_image for full-width.

Facebook / Instagram

OG is primary. Prefer 1200×630 JPG/PNG, include og:image:width/height, and og:type (article, website, product). Use the Sharing Debugger to clear cache; they may ignore overly long descriptions.

LinkedIn

Pure OG. Include absolute HTTPS og:image with dimensions and keep titles concise. Use Post Inspector to re-scrape when updating.

iMessage / Apple

Heavily rely on OG and fetch the first image; ensure SSL and valid HTML head. Large images work best; avoid animated GIFs for link previews.

Slack / Discord

Parse OG and Twitter tags, but OG wins. Add og:image:alt for accessibility on Slack; Discord prefers 1200×630 with a fast CDN.

Pinterest

Reads OG and also product/recipe rich data via Schema.org. Add JSON-LD for Product, Recipe, Article to unlock rich pins.

WhatsApp

OG only, but sensitive to HTTPS chain and image size; keep og:image under ~5 MB and provide width/height.

Recommended Strategy

Include standard OG tags plus platform-specific overrides where supported. Keep images fast, cached, and use immutable URLs when possible. For specialized content types, add JSON-LD (Article, Product, Event) to enhance rich previews.

naming_conventions

Use descriptive, hyphenated, lowercase filenames that reflect the brand and topic. This aids asset management and aligns with SEO hygiene.

Templated Pattern

brand-page-slug-og.jpg

Examples

  • Homepage: brand-og-default.jpg
  • Article: brand-react-router-beginners-guide-og.jpg
  • Product: brand-classic-car-restoration-kit-og.jpg

Avoid

  • Generic names like og.jpg or screenshot.png
  • Opaque hashes like ab12415.jpg (hard to debug)
  • Reliance solely on query strings for versions (some scrapers strip them)

caching_&_validation

Social platforms cache aggressively. If you update an image without changing the URL, it may take weeks to reflect.

  • Versioning: Change the filename (e.g., ...-v2.jpg) rather than just the query string.
  • Debuggers: Use the Facebook, LinkedIn, and Twitter validators to force a re-scrape.