Examples

OG Image Examples

Real-world use cases showing how OGMagic generates beautiful Open Graph images. These pre-rendered examples don’t use your allowance. Open an example in the editor to customize and save your own image.

Content

Blog Post

Dynamic images for each blog article with title and description.

Perfect for static site generators like Astro, Hugo, or Jekyll.

{
  "template": "gradient-mesh",
  "title": "How to Build a REST API in 2026",
  "description": "A complete guide to modern API design with Node.js and TypeScript",
  "domain": "devblog.io"
}

Open in Editor →View Template

SaaS

SaaS Landing Page

Professional preview when your product link gets shared on social.

Use in your root layout to make every shared link look polished.

{
  "template": "linear-style",
  "title": "Ship Faster with LaunchKit",
  "description": "The all-in-one toolkit for indie hackers and startup founders",
  "domain": "launchkit.dev"
}

Open in Editor →View Template

Developer

Documentation Site

Clear, branded images for developer documentation pages.

Great for Docusaurus, Nextra, or any docs framework.

{
  "template": "github-dark",
  "title": "Authentication Guide",
  "description": "Learn how to implement OAuth 2.0 with PKCE in your application",
  "domain": "docs.example.com"
}

Open in Editor →View Template

Content

Newsletter Issue

Eye-catching previews when subscribers share your newsletter.

Works great with Substack, ConvertKit, and Buttondown.

{
  "template": "bold-statement",
  "title": "The Weekly Dispatch #47",
  "description": "AI tooling updates, React 20 features, and the state of WebAssembly",
  "domain": "dispatch.email"
}

Open in Editor →View Template

Developer

Developer Portfolio

Stand out when your portfolio link is shared in Slack or Discord.

Make your portfolio memorable in job application links.

{
  "template": "dev-portfolio",
  "title": "Alex Chen — Full Stack Developer",
  "description": "Building fast, accessible web apps with React and Go",
  "domain": "alexchen.dev"
}

Open in Editor →View Template

Developer

Open Source Project

Professional README link previews that attract contributors.

Use in your README and project website social preview.

{
  "template": "tokyo-night",
  "title": "FastDB — Zero-config Embedded Database",
  "description": "SQLite-compatible, 10x faster writes, WASM support",
  "domain": "fastdb.example.com"
}

Open in Editor →View Template

Content

Podcast Episode

Unique image for each episode when shared on social media.

Generate dynamically per episode — no design work needed.

{
  "template": "synthwave",
  "title": "Ep. 134: The Future of AI Agents",
  "description": "With guest Sarah Kim, AI researcher at DeepMind",
  "domain": "techtalks.fm"
}

Open in Editor →View Template

Business

E-Commerce Product

Rich previews for product pages shared by customers.

Auto-generate for every product in your catalog.

{
  "template": "clean-white",
  "title": "Mechanical Keyboard Pro X",
  "description": "Hot-swappable switches, RGB backlighting, USB-C. Ships worldwide.",
  "domain": "shop.example.com"
}

Open in Editor →View Template

Business

Event / Conference

Shareable images for events, meetups, and webinars.

Create unique images for each talk and speaker.

{
  "template": "aurora",
  "title": "React Summit 2026",
  "description": "March 15-16 • Amsterdam • 2,000+ developers",
  "domain": "reactsummit.com"
}

Open in Editor →View Template

SaaS

Changelog Update

Announce new features with rich social previews.

Auto-generate from your release notes or changelog.

{
  "template": "vercel-style",
  "title": "v2.0 — Dark Mode & API Keys",
  "description": "New dashboard theme, team API keys, and 3x faster deploys",
  "domain": "changelog.app"
}

Open in Editor →View Template

Content

Tutorial / Guide

Rich previews that drive clicks to educational content.

Works with any CMS — WordPress, Ghost, Contentful.

{
  "template": "blueprint",
  "title": "Build a CLI Tool with Rust",
  "description": "Step-by-step: argument parsing, colorized output, and cross-compilation",
  "domain": "tutorials.dev"
}

Open in Editor →View Template

Developer

API Documentation

Endpoint-specific images for API reference pages.

Generate per-endpoint — each page gets a unique image.

{
  "template": "carbon",
  "title": "POST /v1/payments",
  "description": "Create a payment intent with amount, currency, and metadata",
  "domain": "api.stripe.dev"
}

Open in Editor →View Template

The OGMagic newsletter

Get your 20% off Pro code

Join the OGMagic newsletter for a 20% discount code for Pro, Open Graph tips, and new templates.

Ready to make your links stand out?

Preview a design for free. Get an email access link to create your image and share its public URL.

Try the Editor — Free Read the Docs