Og Image Design

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

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

Safe Zones

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

• 40px minimum padding from all edges
• Some platforms crop edges or add rounded corners
• Never put critical text in the outer 5%

Colors

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 BlogHow 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 AvailableDataFlow 2.0Automated reports. Zero configuration."
}'

Tutorial/How-To

infsh app run infsh/html-to-image --input '{
  "html": "TUTORIALBuild a REST API in 10 Minutes with Node.jsStep-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

<!-- Essential (Facebook, LinkedIn, Discord, Slack) -->


<!-- Twitter/X specific -->


<!-- Image dimensions (optional but recommended) -->

Twitter Card Types

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:

Testing OG Images

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

Common Mistakes

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