skills.rest
Aadi-110i
Aadi-110iCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

og-image-design

Generates Open Graph social sharing images with platform specifications and HTML-to-image templates.

Updated Jul 28, 2026
Search Tags:#image generation#meta tags#open graph#og image#social sharing#twitter card#link preview
One-click install
npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill og-image-design-aadi-110i
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: og-image-design
Source: https://github.com/Aadi-110i/PEP-PROJECT/tree/main/skills/og-image-design
Command: npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill og-image-design-aadi-110i

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating social sharing images that render correctly across Facebook, Twitter/X, LinkedIn, Discord, and Slack requires knowing each platform's dimension, file size, and cropping rules, which is tedious to manage manually. ## Core Features & Use Cases - Platform Specification Reference: Provides exact dimensions, aspect ratios, file size limits, and formats for Facebook, Twitter/X, LinkedIn, Discord, Slack, and iMessage. - HTML-to-Image Generation: Generates OG images via the inference.sh belt CLI using HTML templates for blog posts, product launches, and tutorials. - OG Meta Tag Guidance: Supplies complete og:title, og:image, and twitter:card meta tag snippets plus testing tools like the Facebook Debugger and Twitter Card Validator. - Use Case: When publishing a blog post, generate a 1200x630 branded OG image with title and subtitle, then add the correct meta tags so link previews render consistently on every platform. ## Quick Start Ask the assistant to generate a 1200x630 Open Graph image for your blog post title using the belt html-to-image command and provide the matching og meta tags.

Frequently Asked Questions about og-image-design

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

FAQPage Schema
How do I create an Open Graph image for my blog post?▼

Generate a 1200x630 pixel image with your title at 48-64px, a short subtitle, and 40px padding from all edges. You can render it from HTML using the belt html-to-image command or generate a visual background with an AI image model.

What size should an OG image be for Facebook and Twitter?▼

Use 1200x630 pixels as the universal size. Facebook, LinkedIn, Discord, and Slack all accept 1200x630, while Twitter's summary_large_image card uses 1200x628, which is close enough for a single shared image.

What is the difference between Twitter summary and summary_large_image cards?▼

The summary card shows a small 800x418 thumbnail beside the text, while summary_large_image displays a full-width 1200x628 image. The large image card gets significantly more clicks and is recommended for articles and announcements.

Why is my OG image not showing up when I share a link?▼

Common causes include missing og:image meta tags, relative instead of absolute image URLs, HTTP instead of HTTPS URLs, or cached previews. Test with the Facebook Debugger, Twitter Card Validator, or LinkedIn Post Inspector to force a refresh.

How do I test Open Graph images before publishing?▼

Use the Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector, or opengraph.xyz. These tools fetch your page, display the rendered preview, and report missing or invalid meta tags.

Related Skills

Explore More Design & Creative Skills→
AgriciDanielAgriciDaniel
1.6k

blog-seo-check

Audit blog posts against an on-page SEO checklist and generate a validation report.

Community
Advanced
irismakerirismaker

open-graph

Generate Open Graph meta tags for webpages from page metadata.

Community
Intermediate
fivebucksventuresfivebucksventures

creative-designer

Generate on-brand visual assets from brand guidelines in brands/{brand}/brand.md.

Official
Intermediate
nsheapsnsheaps
3

opengraph-image

Generate 1200x630 Open Graph images for Nuxt pages via html2png.dev.

Community
Intermediate