메뉴
Generate social media preview images (Open Graph) and configure meta tags. Creates a screenshot-optimized page using the project's existing design system, captures it at 1200x630, and sets up all social sharing meta tags.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/dirnbauer/webconsulting-skills --skill og-image명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SOC 직업 분류 기준
SKILL.md 표시 중
| name | og-image |
| description | Generate social media preview images (Open Graph) and configure meta tags. Creates a screenshot-optimized page using the project's existing design system, captures it at 1200x630, and sets up all social sharing meta tags. |
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.
Explore the project to understand:
Framework Detection
package.json for Next.js, Vite, Astro, Remix, etc./og-image routeDesign System Discovery
tailwind.config.js/ts) for color palette:root definitions)Branding Assets
/public, /assets, /src/assetsProduct Information
package.json, landing page, or meta tagsExisting Components
Create a dedicated route at /og-image (or equivalent for the framework):
Page Requirements:
[data-nextjs-dialog-overlay],
[data-nextjs-dialog],
nextjs-portal,
#__next-build-indicator {
display: none !important;
}
Content Structure:
Design Principles:
Use Playwright to capture the OG image:
http://localhost:3000/og-image or similar)og-image.pngPlaywright Commands:
browser_navigate: http://localhost:{port}/og-image
browser_resize: width=1200, height=630
browser_take_screenshot: og-image.png (then copy to /public)
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"),
Verify the image exists at the public path
Check meta tags are correctly rendered in the HTML
Provide cache-busting instructions:
Summary output:
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)"
Next.js App Router:
/app/og-image/page.tsx/app/layout.tsx'use client' directive for the OG pageNext.js Pages Router:
/pages/og-image.tsx_app.tsx or use next-seoVite/React:
index.html meta tags or use react-helmetAstro:
/src/pages/og-image.astroBefore completing, verify:
This skill is based on the excellent work by Stevy Smith.
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