skills.rest
dirnbauer
dirnbauerCOMMUNITY
Explore all skills by this author →
Website𝕏@KDirnbauerGitHub

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
One-click install
npx skills add https://github.com/dirnbauer/webconsulting-skills --skill og-image
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
MrOwaisAbdullahMrOwaisAbdullah
1

better-auth-v2

Automate Better Auth v2 integration with RBAC, OAuth, 2FA, and token encryption across major frameworks.

Community
Advanced
valtterimelkkovaltterimelkko
1

socialmedia-optimization

Standardize Open Graph and Twitter Card metadata for consistent social media link previews.

Community
Intermediate
dmedina-devdmedina-dev
1

ckm:design-system

Generate brand-compliant token systems, Tailwind-ready CSS variables, component specs, and HTML slides from JSON/CSS inputs.

Community
Advanced
AvihusittonAvihusitton

image

Generate, optimize, and convert marketing images to WebP/AVIF formats.

Community
Advanced