OGP Image Optimal Sizes and Creation Guide - Platform-Specific Recommendations

What are OGP Images - Thumbnails That Drive Social Sharing

OGP (Open Graph Protocol) images are thumbnail previews displayed when web pages are shared on social media. Established by Facebook in 2010, the protocol is now supported by Twitter/X, LINE, Slack, Discord, LinkedIn, and many other platforms. When users post links, platforms parse the destination HTML and retrieve image URLs from OGP meta tags for display.

OGP images are specified using HTML <meta> tags:

• <meta property="og:image" content="https://example.com/ogp.png">
• <meta property="og:image:width" content="1200">
• <meta property="og:image:height" content="630">
• <meta property="og:image:type" content="image/png">
• <meta property="og:image:alt" content="Article title or description">

Setting appropriate OGP images significantly improves click-through rates (CTR) on social media. According to BuzzSumo research, links with images achieve 2.3x more engagement compared to those without. Conversely, missing or improperly sized OGP images result in unattractive auto-generated previews (small cards with just a favicon), dramatically reducing click rates.

Recommended Sizes by Platform - Optimal Solutions Per Platform

Each social platform displays OGP images differently, so optimal sizes vary. However, 1200x630px (aspect ratio 1.91:1) is recommended as a universal size that works across all platforms. Preparing this single size ensures proper display on all major social networks.

• Twitter/X: 1200x630px (Summary Large Image card). Set twitter:card to summary_large_image for large previews. For summary cards, square 800x800px is optimal. Minimum is 300x157px - below this, cards won't display
• Facebook: 1200x630px optimal. Images 600x315px+ display in high resolution. Smaller images become tiny thumbnails with significantly reduced CTR. Facebook may crop to square, so place important elements centrally
• LINE: 1200x630px recommended. LINE chat rooms show landscape previews. Near-square images may be cropped, so maintain landscape orientation
• Slack: 1200x630px displays without issues. Slack auto-resizes during unfurl, so oversized images aren't problematic
• Discord: 1200x630px recommended. Supports up to 4096x4096px but large images load slowly. Discord auto-resizes to embed width
• LinkedIn: 1200x627px officially recommended. 1200x630px also displays correctly

Keep file size under 1MB. Files exceeding 5MB may fail to load on some platforms. PNG or JPEG formats are safe - WebP may not be supported on some platforms (particularly LINE).

Design Principles for Effective OGP Images

OGP images compete with other posts in social media timelines, requiring designs that communicate content instantly. Users scroll timelines rapidly, spending only 1-2 seconds per post. Following these principles creates high-CTR OGP images:

• Text: large and minimal: Keep titles under 15-20 characters with font size 40px+. Must be readable at smartphone display sizes (approximately 300px width). Limit subtitles to 2 lines maximum
• Mind the safe area: The outer 10-15% may be cropped by platforms. Place important elements (text, logos) within the central 70%. LINE tends to crop more from top and bottom
• Ensure contrast: Maintain sufficient contrast between background and text (WCAG AA 4.5:1 ratio as guideline). Use semi-transparent overlays (black 50-70% opacity) when placing text over photos
• Brand consistency: Include site logo and brand colors for immediate source recognition. Use unified templates for article series to build brand awareness
• Leverage numbers and data: Specific numbers like "5 Methods" or "30% Reduction" catch attention. Titles with numbers tend to have higher CTR than abstract titles

Patterns to avoid: images with text too small, overloaded with information, or low contrast between background and text. Always verify readability at mobile display sizes (approximately 300px width).

Automated OGP Image Generation - Programmatic Approaches

For sites with many articles, manually creating OGP images one by one is impractical. Building template-based auto-generation systems efficiently produces consistent-quality OGP images at scale.

Node.js + Canvas (node-canvas / @napi-rs/canvas): Generate images server-side using Canvas API. Define templates (background image + text placement rules) and dynamically generate based on article titles and categories. Japanese font rendering requires pre-loading font files like Noto Sans JP. Implementing auto-wrapping and auto-sizing logic handles long titles.

Puppeteer / Playwright HTML rendering: Render HTML+CSS designed templates in headless browsers, capturing as screenshot images. Leverages CSS layout capabilities (Flexbox, Grid) for high design flexibility. Vercel's og-image service uses this approach. Slower than Canvas (1-3 seconds per image) but fine when pre-generating at build time.

Satori + Resvg (Vercel OG): Converts React components to SVG, then rasterizes to PNG. Available via Next.js @vercel/og package, generating OGP images dynamically on Edge Runtime. Writing designs in JSX makes it familiar for frontend developers.

Implementation and Debugging - Fixing Display Issues

Proper OGP implementation requires placing appropriate meta tags in HTML <head> and verifying display with each platform's validator. Implementation mistakes and configuration oversights are extremely common, making pre-publication debugging essential.

Required meta tags:

• og:image: Absolute URL (relative paths not accepted). Must start with https://
• og:image:width and og:image:height: Explicit dimensions. Without these, platforms download images to determine size, slowing initial display
• og:image:type: MIME type (image/png or image/jpeg)
• og:image:alt: Alternative text for accessibility and screen readers

Debugging tools:

• Facebook Sharing Debugger: Clear OGP cache and verify. "Scrape Again" forces cache refresh
• Twitter Card Validator: Preview Twitter cards with card type determination results
• LINE URL Checker: Official LINE preview tool for checking LINE-specific crop behavior
• LinkedIn Post Inspector: LinkedIn preview and cache clearing

After updating OGP images, platform caches prevent immediate reflection. Re-scrape with debuggers or append query parameters (?v=2) to bypass cache. Cache duration varies: Facebook ~7 days, Twitter ~7 days, LINE ~1 day.

Practical SNS marketing books are available on Amazon

Common OGP Problems and Solutions

Summary of frequently encountered OGP image problems and solutions. These issues trip up experienced developers, not just beginners.

• Image not displaying: Most common cause is relative URL paths. Always specify absolute URLs starting with https://. Also verify the image file doesn't return 404 and is HTTPS-accessible. Redirects cause fetch failures on some platforms
• Old image displaying: Platform cache is the cause. Clear cache via debugging tools or append version parameters (?v=20260501) to the image URL for recognition as a different URL. Also check CDN cache
• Image cropped cutting important parts: Occurs when important elements aren't within the safe area (central 70%). Anticipate square cropping cases (Facebook feed display) and concentrate information centrally
• Image displaying small: Occurs when og:image:width/og:image:height are unspecified or image size doesn't meet minimums. Twitter requires 300x157px+, Facebook requires 600x315px+
• Twitter showing Summary card instead of Large Image: Missing <meta name="twitter:card" content="summary_large_image"> or image below 300x157px. Both the meta tag and sufficient image size are required for Large Image cards
• OGP not fetched on dynamic pages: SPAs relying on JavaScript rendering prevent crawlers from fetching OGP tags. SSR or SSG is required to include meta tags in HTML