og-image-design

Design Open Graph images with platform-specific dimensions and layout guidance.

688|95|Updated Jan 31, 2026

Search Tags:#graphic design #web design #og image #social sharing #twitter card #link preview

Ready to run

npx skills add https://github.com/inference-sh/skills --skill og-image-design-inference-sh

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill helps users create visually appealing and platform-optimized social sharing images (Open Graph images) for websites and content, ensuring maximum engagement and proper display across various social media platforms.

Core Features & Use Cases

Platform-Specific Design: Provides dimensions, aspect ratios, and file size recommendations for Facebook, Twitter/X, LinkedIn, and more.
Layout Guidance: Offers a "Golden Layout" and design rules for text, safe zones, and color choices.
Template Examples: Includes pre-formatted HTML examples for blog posts, product announcements, and tutorials, along with an AI image generation option.
Meta Tag Reference: Details essential OG and Twitter meta tags for proper implementation.
Testing Tools: Lists tools for debugging and previewing how shared links will appear.

Quick Start

Generate an OG image with the html-to-image tool using the provided HTML.

Frequently Asked Questions about og-image-design

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

FAQPage Schema

What are the recommended dimensions for an Open Graph image on Facebook and Twitter?▼

An Open Graph image optimized for Facebook and Twitter requires specific aspect ratios and file sizes for proper link preview display. This Skill provides exact dimensions, aspect ratios, and layout best practices for each platform to ensure correct rendering.

How do I generate a social sharing image from HTML for my blog post?▼

Generate a social sharing image from HTML using an html-to-image tool with pre-formatted template examples. This Skill includes ready-to-use HTML layouts for blog posts, product announcements, and tutorials to automate OG image creation.

What meta tags do I need for Twitter card and Open Graph image previews?▼

Twitter card and Open Graph image previews require specific meta tags in your webpage header for proper rendering. This Skill details essential OG and Twitter meta tags for implementation, ensuring your link previews display correctly across platforms.

Can I use AI image generation for creating social sharing images?▼

Yes, AI image generation can be used for creating social sharing images as an alternative to HTML templates. This Skill supports AI image generation for visual assets, alongside providing layout guidance and safe zones for text placement on the generated images.

How do I test and debug link previews before sharing on social media?▼

Testing and debugging link previews before sharing on social media requires dedicated validation tools to check your meta tags. This Skill lists specific testing tools for debugging and previewing exactly how shared links will appear across Facebook, Twitter/X, and LinkedIn.