og-image

Generate Open Graph (OG) images and social media preview cards for websites, blog posts, and products. Use when creating social share images, Twitter/X cards, LinkedIn post images, or any visual preview that appears when sharing links on social platforms. Produces properly sized images (1200x630, 1200x675, etc.) with crisp typography and professional layouts.

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "og-image" with this command: npx skills add html2png/skills/html2png-skills-og-image

OG Image Generator

Generate Open Graph and social media preview images via html2png.dev.

Standard Sizes

PlatformSizeAspect Ratio
Facebook/LinkedIn1200×6301.91:1
Twitter/X1200×6751.78:1 (16:9)
Twitter Large1200×6002:1
Square1200×12001:1

Endpoint

POST https://html2png.dev/api/convert

Example

curl -X POST "https://html2png.dev/api/convert?width=1200&height=630&deviceScaleFactor=2" \
  -H "Content-Type: text/html" \
  -d '<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
</head>
<body class="flex items-center justify-center" style="width: 1200px; height: 630px; font-family: Inter, sans-serif; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);">
  <div class="text-center text-white px-16">
    <h1 class="text-7xl font-extrabold mb-6 leading-tight">How to Build APIs</h1>
    <p class="text-3xl opacity-90 mb-8">A complete guide to RESTful design</p>
    <div class="flex items-center justify-center gap-4">
      <div class="w-16 h-16 rounded-full bg-white/20"></div>
      <span class="text-xl">By John Doe · 10 min read</span>
    </div>
  </div>
</body>
</html>'

Key Elements

Typography:

  • Large, bold headline (60-80px)
  • Readable subheadline (24-32px)
  • High contrast against background

Layout:

  • Centered or left-aligned content
  • Generous padding (60-100px)
  • Clear visual hierarchy

Backgrounds:

  • Gradient overlays
  • Subtle patterns
  • Brand colors

Images:

  • Author avatars (circular, 80-120px)
  • Logos (top corner or centered)
  • Decorative elements (subtle)

CDN Resources

Fonts:

<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap"
  rel="stylesheet"
/>

Icons:

<script src="https://unpkg.com/lucide@latest"></script>

Tips

  • Always use deviceScaleFactor=2 for crisp text
  • Use delay=1000 for font loading
  • Keep text minimal (3-5 words headline max)
  • Test at small sizes (images get compressed in feeds)
  • Use high contrast for readability

Rate Limits

50 requests/hour per IP.

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

General

html-to-image

No summary provided by upstream source.

Repository SourceNeeds Review
General

website-screenshot

No summary provided by upstream source.

Repository SourceNeeds Review
Coding

code-to-image

No summary provided by upstream source.

Repository SourceNeeds Review
General

OpenClaw Skill Growth

Make OpenClaw Skills observable, diagnosable, and safely improvable over time. Use this when the user wants to maintain many SKILL.md files, inspect repeated...

Registry SourceRecently Updated
211Profile unavailable