Social & Code MockupSaaS

Open Graph (OG) & Social Card Studio

Generate high-CTR social media preview cards for blog posts, software releases, and landing pages. Choose from minimalist developer dark themes, gradient glows, and code highlight cards. Export high-res PNG or copy Next.js @vercel/og JSX code.

1. Card Typography & Details

Headline Title

Subtitle / Description

Category Tag

Domain / Brand

Card Theme Preset

Canonical 1.91:1 ratio. Pre-formatted for X (Twitter), LinkedIn, Facebook, Slack, and Discord.

Open Graph Architecture & Dynamic Edge Social Previews

Technical guide on the Open Graph protocol, Satori edge rendering, and social card UX.

Architecture Overview

When URLs are shared on platforms like X (Twitter), LinkedIn, Slack, Facebook, and Discord, social web crawlers parse Open Graph meta tags to render interactive media cards. The de-facto cross-platform standard is a 1.91:1 aspect ratio image (1200x630 pixels). Well-structured social cards increase click-through rates (CTR) by over 40% compared to raw URL links.

Core Mechanics & Implementation Details

The 1200x630 (1.91:1) Universal Standard

Different social platforms enforce different crop ratios (Facebook prefers 1.91:1, Twitter uses 2:1 or 1.91:1 for summary_large_image, Discord fits to 16:9). A 1200x630 canvas satisfies all major platform crawlers without cropping critical text. Keeping text and logos within a 1080x560 safe zone ensures zero edge clipping across mobile apps.

Satori & Edge Rendering Architecture

Modern Next.js applications generate dynamic OG cards at the edge using @vercel/og (powered by Satori). Satori converts a JSX component tree and CSS Flexbox into an SVG representation using the Yoga layout engine, which is then rasterized into PNG via resvg-wasm in under 50ms without launching a headless browser (Puppeteer).

Crawler Caching & ETag Validation

Social platform scrapers (such as Twitterbot and facebookexternalhit) heavily cache og:image assets based on URL strings. When updating a social card, query parameter versioning (e.g. /og.png?v=2) or ETag validation headers must be used to force crawler cache invalidation.

Engineering Specifications

Parameter	Standard / Value	Engineering Scope
Canvas Resolution	1200 x 630 Pixels	Universal 1.91:1 aspect ratio standard
Safe Zone	1080 x 560 Pixels (60px margin)	Protected area against mobile crop
Output Standard	PNG / Next.js ImageResponse JSX	Zero-dependency edge generation code
Target Protocol	Open Graph Protocol (og:image)	Facebook, Twitter, LinkedIn, Slack, Discord

Recommended Best Practices

•Maintain strong visual contrast between background and headline text (minimum WCAG AA 4.5:1 ratio).
•Keep title text under 65 characters to prevent multi-line truncation on mobile social feeds.
•Include your brand logo or domain pill to establish immediate brand attribution upon sharing.

Common Pitfalls & Anti-Patterns

•Placing critical headlines too close to the canvas edges leads to truncation on mobile Discord or LinkedIn embeds.
•Using external custom web fonts without pre-loading causes text rendering fallbacks in edge workers.

Next.js App Router Dynamic OG Route Handler (app/api/og/route.tsx)

import { ImageResponse } from 'next/og';
import { NextRequest } from 'next/server';

export const runtime = 'edge';

export async function GET(req: NextRequest) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') || 'PixelDevTools';

  return new ImageResponse(
    (
      <div
        style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
          padding: 60,
          backgroundColor: '#09090b',
          color: '#ffffff',
          fontFamily: 'sans-serif',
        }}
      >
        <div style={{ fontSize: 24, color: '#818cf8', fontWeight: 600 }}>
          PixelDevTools.com
        </div>
        <div style={{ fontSize: 64, fontWeight: 800, lineHeight: 1.1 }}>
          {title}
        </div>
        <div style={{ fontSize: 20, color: '#a1a1aa' }}>
          Modern Visual & Asset Toolkit for Developers
        </div>
      </div>
    ),
    { width: 1200, height: 630 }
  );
}