OG Image Design

Create social sharing images (Open Graph) via inference.sh CLI.

Quick Start

curl -fsSL https://cli.inference.sh | sh && infsh login
Generate an OG image with HTML-to-image
infsh app run infsh/html-to-image --input '{
  "html": "
How We Reduced Build Times by 80%
engineering.yourcompany.com
"
}'

> Install note: The install script only detects your OS/architecture, downloads the matching binary from dist.inference.sh, and verifies its SHA-256 checksum. No elevated permissions or background processes. Manual install & verification available.

Platform Specifications

| Platform | Dimensions | Aspect Ratio | File Size | Format | |----------|-----------|--------------|-----------|--------| | Facebook | 1200 x 630 px | 1.91:1 | < 8 MB | JPG, PNG | | Twitter/X (summary_large_image) | 1200 x 628 px | 1.91:1 | < 5 MB | JPG, PNG, WEBP, GIF | | Twitter/X (summary) | 800 x 418 px | 1.91:1 | < 5 MB | JPG, PNG | | LinkedIn | 1200 x 627 px | 1.91:1 | < 5 MB | JPG, PNG | | Discord | 1200 x 630 px | 1.91:1 | < 8 MB | JPG, PNG | | Slack | 1200 x 630 px | 1.91:1 | — | JPG, PNG | | iMessage | 1200 x 630 px | 1.91:1 | — | JPG, PNG |

Universal safe bet: 1200 x 630 px, PNG or JPG, under 5 MB.

The Golden Layout

┌──────────────────────────────────────────────────┐
│                                                  │
│  ┌─────────────────────────────────┐  ┌───────┐  │
│  │                                 │  │       │  │
│  │  Title Text (max 60 chars)      │  │ Logo/ │  │
│  │  ───────────────────            │  │ Visual│  │
│  │  Subtitle (max 100 chars)       │  │       │  │
│  │                                 │  │       │  │
│  │  author / site name             │  └───────┘  │
│  └─────────────────────────────────┘             │
│                                                  │
└──────────────────────────────────────────────────┘
  1200 x 630 px

Design Rules

Text

| Rule | Value | |------|-------| | Title font size | 48-64px | | Subtitle font size | 20-28px | | Max title length | 60 characters (gets truncated on some platforms) | | Max subtitle length | 100 characters | | Line height | 1.2-1.3 for titles | | Font weight | Bold/Black for title, Regular for subtitle | | Text contrast | WCAG AA minimum (4.5:1 ratio) |

Safe Zones

┌──────────────────────────────────────────────────┐
│  ┌──────────────────────────────────────────────┐│
│  │ 40px padding from all edges                  ││
│  │                                              ││
│  │  Content lives here                          ││
│  │                                              ││
│  │                                              ││
│  └──────────────────────────────────────────────┘│
└──────────────────────────────────────────────────┘

Colors

| Background Type | When to Use | |----------------|-------------| | Solid brand color | Consistent series, corporate | | Gradient | Modern, eye-catching | | Photo with overlay | Blog posts, editorial | | Dark background | Better contrast, stands out in feeds |

Dark backgrounds outperform light in social feeds — most feeds have white/light backgrounds, so dark OG images pop.

Templates by Content Type

Blog Post

infsh app run infsh/html-to-image --input '{
  "html": "
Engineering Blog
How We Reduced Build Times by 80%
A deep dive into our CI/CD optimization
"
}'

Product/Launch Announcement

infsh app run infsh/html-to-image --input '{
  "html": "
Now Available
DataFlow 2.0
Automated reports. Zero configuration.
"
}'

Tutorial/How-To

infsh app run infsh/html-to-image --input '{
  "html": "
TUTORIAL
Build a REST API in 10 Minutes with Node.js
Step-by-step guide with code examples
"
}'

AI-Generated Visual OG

# When you want a striking visual instead of text-based
infsh app run falai/flux-dev-lora --input '{
  "prompt": "clean professional social sharing card, dark gradient background, abstract geometric shapes, modern tech aesthetic, minimal, no text, 1200x630 equivalent aspect ratio",
  "width": 1200,
  "height": 630
}'

OG Meta Tags Reference

Twitter Card Types

| Card Type | Image Size | Use When | |-----------|-----------|----------| | summary | 800 x 418 (small thumbnail) | Short updates, links | | summary_large_image | 1200 x 628 (full width) | Blog posts, articles, announcements |

Always use summary_large_image unless you have a specific reason not to — the large image gets significantly more clicks.

Consistency System

For a blog or site with many pages, create a template system:

| Element | Keep Consistent | Vary | |---------|----------------|------| | Background style | Same gradient or brand colors | — | | Font family | Same font | — | | Layout | Same positioning | — | | Logo/branding | Same placement (corner) | — | | Category badge | Same style | Color per category | | Title text | Same size/weight | Content changes |

Testing OG Images

| Tool | URL | |------|-----| | Facebook Debugger | developers.facebook.com/tools/debug/ | | Twitter Card Validator | cards-dev.twitter.com/validator | | LinkedIn Post Inspector | linkedin.com/post-inspector/ | | OpenGraph.xyz | opengraph.xyz |

# Research OG debugging tools
infsh app run tavily/search-assistant --input '{
  "query": "open graph image debugger preview tool test og:image"
}'

Common Mistakes

| Mistake | Problem | Fix | |---------|---------|-----| | No OG image at all | Platform shows random page element or nothing | Always set og:image | | Text too small | Unreadable on mobile previews | Title minimum 48px at 1200px width | | Light background | Gets lost in white/light feeds | Use dark or saturated backgrounds | | Too much text | Cluttered, overwhelming | Max: title + subtitle + brand | | Image too large (>5MB) | Some platforms won't load it | Optimize to under 1MB ideally | | No safe zone padding | Text cropped on some platforms | 40px padding from all edges | | Different image per platform | Inconsistent sharing experience | Use 1200x630 for everything | | HTTP image URL | Many platforms require HTTPS | Always serve OG images over HTTPS | | Relative image path | Won't resolve when shared | Use full absolute URL |

Related Skills

npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@landing-page-design
npx skills add inference-sh/skills@prompt-engineering

Browse all apps: infsh app list

curl -fsSL https://cli.inference.sh | sh && infsh login
Generate an OG image with HTML-to-image
infsh app run infsh/html-to-image --input '{
  "html": "
How We Reduced Build Times by 80%
engineering.yourcompany.com
"
}'

> Install note: The install script only detects your OS/architecture, downloads the matching binary from dist.inference.sh, and verifies its SHA-256 checksum. No elevated permissions or background processes. Manual install & verification available.