Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
dirnbauer avatar

Og Image

dirnbauer/webconsulting-skills

  • 41 installs
  • 33 repo stars
  • Updated July 27, 2026
  • dirnbauer/webconsulting-skills

Generates 1200x630 Open Graph preview images from the project's design system and configures social sharing meta tags.

About

Generates Open Graph social preview images matched to the project's design system and configures the sharing meta tags. A developer uses it when setting up social previews for a site.

  • Generates a 1200x630 OG image page from the design system
  • Configures social sharing meta tags

Og Image by the numbers

  • 41 all-time installs (skills.sh)
  • Ranked #1,363 of 1,879 Marketing & SEO skills by installs in the Skillselion catalog
  • Data as of Jul 29, 2026 (Skillselion catalog sync)
npx skills add https://github.com/dirnbauer/webconsulting-skills --skill og-image

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs41
repo stars★ 33
Last updatedJuly 27, 2026
Repositorydirnbauer/webconsulting-skills ↗

What it does

Generates 1200x630 Open Graph preview images from the project's design system and configures social sharing meta tags.

Files

SKILL.mdMarkdownGitHub ↗

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.

Workflow

Phase 1: Codebase Analysis

Explore the project to understand:

1. 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

2. 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

3. 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

4. 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

5. 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:
[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 to capture the OG image:

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

Playwright Commands:

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:

// 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:

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

Phase 5: Verification & Output

1. Verify the image exists at the public path 2. Check meta tags are correctly rendered in the HTML 3. 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/

4. 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

Prompting for Missing Information

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

1. Domain/URL - If not found in existing config, ask: "What's your production domain? (e.g., https://example.com)"

2. Twitter/X handle - If adding twitter:creator, ask: "What's your Twitter/X handle for attribution? (optional)"

3. 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

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](https://github.com/stevysmith/og-image-skill).

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

Special thanks to Stevy Smith for their generous open-source contributions, which helped shape this skill collection. Adapted by webconsulting.at for this skill collection

Related skills

coreyhaines31Seo AuditRun structured SEO audits on their SaaS site or content hub and receive a prioritized action plan.173k42.2kcoreyhaines31CopywritingGenerate, rewrite, or strengthen persuasive website and landing-page copy that converts visitors into users.164k42.2kvyralcontentViral Short FormQuickly generate high-retention hooks, scripts, and outlines for TikTok, Reels, YouTube Shorts, and carousels.132k67vyralcontentViral HooksWrite and critique viral hooks for short-form video opening sequences.123k67vyralcontentViral Captions And CtasOptimize social media captions and CTAs for viral short-form video reach and saves.123k67vyralcontentViral Youtube ShortsWrite and diagnose YouTube Shorts for Shorts Feed and long-form funnel.123k67
Marketing & SEOseodistribution
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.