og-image-design

仓库: inference-sh/skills
安装量: 138
排名: #6267

安装

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

OG Image Design Create social sharing images (Open Graph) via inference.sh CLI. Quick Start Requires inference.sh CLI ( infsh ). Get installation instructions: npx skills add inference-sh/skills@agent-tools infsh login

Generate an OG image with HTML-to-image

infsh app run infsh/html-to-image --input '{ "html": "

How We Reduced Build Times by 80%

engineering.yourcompany.com

" }' Platform Specifications Platform Dimensions Aspect Ratio File Size Format Facebook 1200 x 630 px 1.91:1 < 8 MB JPG, PNG Twitter/X (summary_large_image) 1200 x 628 px 1.91:1 < 5 MB JPG, PNG, WEBP, GIF Twitter/X (summary) 800 x 418 px 1.91:1 < 5 MB JPG, PNG LinkedIn 1200 x 627 px 1.91:1 < 5 MB JPG, PNG Discord 1200 x 630 px 1.91:1 < 8 MB JPG, PNG Slack 1200 x 630 px 1.91:1 — JPG, PNG iMessage 1200 x 630 px 1.91:1 — JPG, PNG Universal safe bet: 1200 x 630 px, PNG or JPG, under 5 MB. The Golden Layout ┌──────────────────────────────────────────────────┐ │ │ │ ┌─────────────────────────────────┐ ┌───────┐ │ │ │ │ │ │ │ │ │ Title Text (max 60 chars) │ │ Logo/ │ │ │ │ ─────────────────── │ │ Visual│ │ │ │ Subtitle (max 100 chars) │ │ │ │ │ │ │ │ │ │ │ │ author / site name │ └───────┘ │ │ └─────────────────────────────────┘ │ │ │ └──────────────────────────────────────────────────┘ 1200 x 630 px Design Rules Text Rule Value Title font size 48-64px Subtitle font size 20-28px Max title length 60 characters (gets truncated on some platforms) Max subtitle length 100 characters Line height 1.2-1.3 for titles Font weight Bold/Black for title, Regular for subtitle Text contrast WCAG AA minimum (4.5:1 ratio) Safe Zones ┌──────────────────────────────────────────────────┐ │ ┌──────────────────────────────────────────────┐│ │ │ 40px padding from all edges ││ │ │ ││ │ │ Content lives here ││ │ │ ││ │ │ ││ │ └──────────────────────────────────────────────┘│ └──────────────────────────────────────────────────┘ 40px minimum padding from all edges Some platforms crop edges or add rounded corners Never put critical text in the outer 5% Colors Background Type When to Use Solid brand color Consistent series, corporate Gradient Modern, eye-catching Photo with overlay Blog posts, editorial Dark background Better contrast, stands out in feeds Dark backgrounds outperform light in social feeds — most feeds have white/light backgrounds, so dark OG images pop. Templates by Content Type Blog Post infsh app run infsh/html-to-image --input '{ "html": "

Engineering Blog

How We Reduced Build Times by 80%

A deep dive into our CI/CD optimization

" }' Product/Launch Announcement infsh app run infsh/html-to-image --input '{ "html": "

Now Available

DataFlow 2.0

Automated reports. Zero configuration.

" }' Tutorial/How-To infsh app run infsh/html-to-image --input '{ "html": "
TUTORIAL

Build a REST API in 10 Minutes with Node.js

Step-by-step guide with code examples

" }' AI-Generated Visual OG

When you want a striking visual instead of text-based

infsh app run falai/flux-dev-lora --input '{ "prompt": "clean professional social sharing card, dark gradient background, abstract geometric shapes, modern tech aesthetic, minimal, no text, 1200x630 equivalent aspect ratio", "width": 1200, "height": 630 }' OG Meta Tags Reference

< meta property = " og:title " content = " Title here (60 chars max) " /> < meta property = " og:description " content = " Description (155 chars max) " /> < meta property = " og:image " content = " https://yoursite.com/og-image.png " /> < meta property = " og:url " content = " https://yoursite.com/page " /> < meta property = " og:type " content = " article " />

< meta name = " twitter:card " content = " summary_large_image " /> < meta name = " twitter:title " content = " Title here " /> < meta name = " twitter:description " content = " Description " /> < meta name = " twitter:image " content = " https://yoursite.com/og-image.png " />

< meta property = " og:image:width " content = " 1200 " /> < meta property = " og:image:height " content = " 630 " /> Twitter Card Types Card Type Image Size Use When summary 800 x 418 (small thumbnail) Short updates, links summary_large_image 1200 x 628 (full width) Blog posts, articles, announcements Always use summary_large_image unless you have a specific reason not to — the large image gets significantly more clicks. Consistency System For a blog or site with many pages, create a template system: Element Keep Consistent Vary Background style Same gradient or brand colors — Font family Same font — Layout Same positioning — Logo/branding Same placement (corner) — Category badge Same style Color per category Title text Same size/weight Content changes Testing OG Images Tool URL Facebook Debugger developers.facebook.com/tools/debug/ Twitter Card Validator cards-dev.twitter.com/validator LinkedIn Post Inspector linkedin.com/post-inspector/ OpenGraph.xyz opengraph.xyz

Research OG debugging tools

infsh app run tavily/search-assistant --input '{ "query": "open graph image debugger preview tool test og:image" }' Common Mistakes Mistake Problem Fix No OG image at all Platform shows random page element or nothing Always set og:image Text too small Unreadable on mobile previews Title minimum 48px at 1200px width Light background Gets lost in white/light feeds Use dark or saturated backgrounds Too much text Cluttered, overwhelming Max: title + subtitle + brand Image too large (>5MB) Some platforms won't load it Optimize to under 1MB ideally No safe zone padding Text cropped on some platforms 40px padding from all edges Different image per platform Inconsistent sharing experience Use 1200x630 for everything HTTP image URL Many platforms require HTTPS Always serve OG images over HTTPS Relative image path Won't resolve when shared Use full absolute URL

← 返回排行榜