og-image

Generate Open Graph images and configure social meta tags for web frameworks.

33|6|Updated Jan 2, 2026

Search Tags:#branding #open-graph #og-image #twitter-card #meta-tags #social-preview

Ready to run

npx skills add https://github.com/dirnbauer/webconsulting-skills --skill og-image

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: og-image
Source: https://github.com/dirnbauer/webconsulting-skills/tree/main/skills/og-image
Command: npx skills add https://github.com/dirnbauer/webconsulting-skills --skill og-image

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill simplifies creating brand-consistent Open Graph images and social previews by generating a route and metadata tailored to your project's design system.

Core Features & Use Cases

Auto OG image: Generates a 1200x630 Open Graph image aligned with your design system.
Meta tag setup: Configures og:image, twitter:card, theme-color, and related tags for reliable sharing.
Framework-agnostic workflow: Works with Next.js, Vite, Astro, Remix, or plain HTML pages to render shareable previews.
Use Case: Marketing pages requiring ready-to-share visuals and metadata on deployment.

Quick Start

Use the og-image workflow to create the /og-image route, render a 1200x630 screenshot, and verify meta tags in the HTML.

Frequently Asked Questions about og-image

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I auto-generate Open Graph images for my web project?▼

You can auto-generate Open Graph images by creating a dedicated /og-image route in your project that renders a 1200x630 screenshot. This skill automates that route creation and aligns the visuals with your design system.

Does this approach work with Vite, Astro, and plain HTML sites?▼

Yes, this workflow is framework-agnostic and works with Vite, Astro, Next.js, Remix, and plain HTML sites. It configures the necessary social preview routes and meta tags across these environments.

What meta tags do I need for social media previews?▼

For reliable social media previews, you need og:image, twitter:card, and theme-color meta tags. This skill automatically configures these essential tags in your HTML to ensure visuals share correctly.

How do I ensure my social preview visuals match my design system?▼

To ensure social preview visuals match your design system, this skill applies your existing design tokens when generating the 1200x630 Open Graph image. This maintains brand consistency across shared links.

What is the standard size for an Open Graph image?▼

The standard size for an Open Graph image is 1200x630 pixels. This skill generates a dedicated image route that renders exactly to these dimensions for optimal display on social platforms.