OG Image Skill

Generate social media preview images (Open Graph) and configure all meta tags for optimal sharing on Twitter/X, LinkedIn, Facebook, Slack, Discord, and more.

This skill creates professional Open Graph images for social media sharing. It analyzes the existing codebase to match the project's design system, generates a dedicated OG image page, screenshots it, and configures all necessary meta tags.

What It Does

Creates a dedicated /og-image route in your project that renders a 1200x630 preview image matching your existing design system. Then screenshots it and configures all necessary meta tags.

The skill automatically:

•Explores your codebase to understand your design system (colors, fonts, components)
•Creates an OG image page using your existing aesthetic
•Screenshots at the correct 1200x630 dimensions
•Saves to your public folder
•Audits and adds missing meta tags (og:image, twitter:card, theme-color, etc.)

Workflow

Phase 1: Codebase Analysis

Explore the project to understand:

•
Framework Detection
- •Check package.json for Next.js, Vite, Astro, Remix, etc.
- •Identify the routing pattern (file-based, config-based)
- •Find where to create the /og-image route
•
Design System Discovery
- •Look for Tailwind config (tailwind.config.js/ts) for color palette
- •Check for CSS variables in global styles (:root definitions)
- •Find existing color tokens, font families, spacing scales
- •Look for a theme or design tokens file
•
Branding Assets
- •Find logo files in /public, /assets, /src/assets
- •Check for favicon, app icons
- •Look for existing hero sections or landing pages with branding
•
Product Information
- •Extract product name from package.json, landing page, or meta tags
- •Find tagline/description from existing pages
- •Look for existing OG/meta configuration to understand current setup
•
Existing Components
- •Find reusable UI components that could be leveraged
- •Check for glass effects, gradients, or distinctive visual patterns
- •Identify the overall aesthetic (dark mode, light mode, etc.)

Phase 2: OG Image Page Creation

Create a dedicated route at /og-image (or equivalent for the framework):

Page Requirements:

•Fixed dimensions: exactly 1200px wide × 630px tall
•Self-contained styling (no external dependencies that might not render)
•Hide any dev tool indicators with CSS:

css

[data-nextjs-dialog-overlay],
[data-nextjs-dialog],
nextjs-portal,
#__next-build-indicator {
  display: none !important;
}

Content Structure:

•Product logo/icon (prominent placement)
•Product name with distinctive typography
•Tagline or value proposition
•Visual representation of the product (mockup, illustration, or abstract design)
•URL/domain at the bottom
•Background that matches the project aesthetic (gradients, patterns, etc.)

Design Principles:

•Use the project's existing color palette
•Match the typography from the main site
•Include visual elements that represent the product
•Ensure high contrast for readability at small sizes (social previews are often small)
•Test that text is readable when the image is scaled down to ~400px wide

Phase 3: Screenshot Capture

Use Playwright or Browser MCP to capture the OG image:

•Navigate to the OG image page (typically http://localhost:3000/og-image or similar)
•Resize viewport to exactly 1200×630
•Wait for any animations to complete or fonts to load
•Take a PNG screenshot
•Save to the project's public folder as og-image.png

Browser MCP Commands:

code

browser_navigate: http://localhost:{port}/og-image
browser_resize: width=1200, height=630
browser_take_screenshot: og-image.png (then copy to /public)

Phase 4: Meta Tag Configuration

Audit and update the project's meta tag configuration. For Next.js App Router, update layout.tsx. For other frameworks, update the appropriate location.

Required Meta Tags:

typescript

// Open Graph
openGraph: {
  title: "Product Name - Short Description",
  description: "Compelling description for social sharing",
  url: "https://yourdomain.com",
  siteName: "Product Name",
  locale: "en_US",
  type: "website",
  images: [{
    url: "/og-image.png", // or absolute URL
    width: 1200,
    height: 630,
    alt: "Descriptive alt text for accessibility",
    type: "image/png",
  }],
},

// Twitter/X
twitter: {
  card: "summary_large_image",
  title: "Product Name - Short Description",
  description: "Compelling description for Twitter",
  creator: "@handle", // if provided
  images: [{
    url: "/og-image.png",
    width: 1200,
    height: 630,
    alt: "Descriptive alt text",
  }],
},

// Additional
other: {
  "theme-color": "#000000", // match brand color
  "msapplication-TileColor": "#000000",
},

appleWebApp: {
  title: "Product Name",
  statusBarStyle: "black-translucent",
  capable: true,
},

Ensure metadataBase is set for relative URLs to resolve correctly:

typescript

metadataBase: new URL("https://yourdomain.com"),

Phase 5: Verification & Output

•
Verify the image exists at the public path
•
Check meta tags are correctly rendered in the HTML
•
Provide cache-busting instructions:
- •Facebook/LinkedIn: https://developers.facebook.com/tools/debug/
- •Twitter/X: https://cards-dev.twitter.com/validator
- •LinkedIn: https://www.linkedin.com/post-inspector/
•
Summary output:
- •Path to generated OG image
- •URL to preview the OG image page locally
- •List of meta tags added/updated
- •Links to social preview debuggers

Supported Frameworks

•Next.js (App Router & Pages Router)
•Vite + React
•Astro
•Remix
•Plain HTML/CSS

What Gets Generated

•/og-image route - A standalone page optimized for screenshots
•/public/og-image.png - The 1200x630 screenshot
•Meta tag updates - All necessary OG, Twitter, and misc meta tags

Meta Tags Configured

•og:image, og:image:width, og:image:height, og:image:alt, og:image:type
•twitter:card, twitter:image, twitter:title, twitter:description
•theme-color, msapplication-TileColor
•Apple web app meta tags

Prompting for Missing Information

Only ask the user if these cannot be determined from the codebase:

•
Domain/URL - If not found in existing config, ask: "What's your production domain? (e.g., https://example.com)"
•
Twitter/X handle - If adding twitter:creator, ask: "What's your Twitter/X handle for attribution? (optional)"
•
Tagline - If no clear tagline found, ask: "What's a short tagline for social previews? (1 sentence)"

Framework-Specific Notes

Next.js App Router:

•Create /app/og-image/page.tsx
•Update metadata in /app/layout.tsx
•Use 'use client' directive for the OG page

Next.js Pages Router:

•Create /pages/og-image.tsx
•Update _app.tsx or use next-seo

Vite/React:

•Create route via router config
•Update index.html meta tags or use react-helmet

Astro:

•Create /src/pages/og-image.astro
•Update layout with meta tags

Design Templates

See the examples/ directory for complete HTML templates:

•Cosmic - Dark gradients, aurora colors, geometric orbs
•Editorial - Light, refined, magazine-inspired with abstract shapes
•Brutalist - Bold typography, harsh colors, raw geometric blocks
•Ethereal - Mesh gradients, glassmorphism, floating particles
•Webconsulting - Teal/cyan/amber palette, hero gradient, Raleway typography (webconsulting.at design system)

Cache Busting

After generating, use these tools to refresh social platform caches:

•Facebook/LinkedIn: https://developers.facebook.com/tools/debug/
•Twitter/X: https://cards-dev.twitter.com/validator
•LinkedIn: https://www.linkedin.com/post-inspector/

Quality Checklist

Before completing, verify:

• OG image renders correctly at 1200×630
• No dev tool indicators visible in screenshot
• Image saved to public folder
• Meta tags include og:image with absolute URL capability
• Meta tags include twitter:card as summary_large_image
• Meta tags include dimensions (width/height)
• Meta tags include alt text for accessibility
• theme-color is set to match brand
• User informed of cache-busting URLs

Credits & Attribution

This skill is based on the excellent work by Stevy Smith.

Original repository: https://github.com/stevysmith/og-image-skill

Adapted by webconsulting.at for this skill collection