Open Graph & Social Media Image Generation

Field	Value
Type	Skill Resource
Source	`~/.copilot/skills/generators/references/og-images.md`
Description	Not specified

Source Content

Generate social media preview images (Open Graph / Twitter / LinkedIn / WhatsApp) from a logo, text slogan, or both. These images appear when your links are shared on Facebook, Twitter, LinkedIn, WhatsApp, and other platforms.

Platform Specifications

Facebook & WhatsApp

Size: 1200×630px (1.91:1 aspect ratio)
Format: PNG or JPEG
File size: < 8 MB
Shown in: News feed, shared posts, link previews

Twitter Card (Large Image)

Size: 1200×675px (16:9 aspect ratio)
Format: PNG or JPEG
File size: < 5 MB
Minimum: 300×157px
Shown in: Tweet feed, link previews

Square (Instagram, Pinterest, etc.)

Size: 1200×1200px (1:1 aspect ratio)
Format: PNG or JPEG
File size: < 8 MB
Shown in: Social timelines, pin previews

Size: 1200×627px (1.91:1 aspect ratio, slightly taller than Facebook)
Format: PNG or JPEG
File size: < 8 MB
Shown in: LinkedIn feed, article previews

Generation Methods

From a Logo Image

Resize an existing logo to create social images:

python scripts/generate_og_images.py <output_dir> --image <source_image> --validate

Arguments:

<output_dir>: Where to save generated images (typically public/ or static/)
--image <path>: Path to your logo (PNG, JPG, JPEG, WebP, or SVG)
--validate: Check dimensions, file sizes, and format compliance (required for production)

Output:

og-image.png (1200×630, Facebook/LinkedIn/WhatsApp)
twitter-image.png (1200×675, Twitter)
og-square.png (1200×1200, square variant)

From Text / Slogan

Generate images with text overlay, automatically centered and sized:

python scripts/generate_og_images.py <output_dir> --text "Your tagline here" --validate

Arguments:

<output_dir>: Where to save images
--text "...": The text to display (max ~40 characters per line for readability)
--bg-color "#4F46E5": Background color (hex code; default: brand blue)
--logo <path> (optional): Path to a logo to overlay at the top
--text-color "#FFFFFF" (optional): Text color (default: white)
--validate: Check contrast and dimensions

Output: Same three files as above

Text + Logo Combined

Render text with a logo overlay:

python scripts/generate_og_images.py <output_dir> --text "Ship faster" --logo logo.png --bg-color "#4F46E5" --validate

The script will:

Place the logo at the top (max 20% of image height)
Center the text below
Dynamically adjust font size based on text length (120–144px for short, down to 84px for very long)
Apply drop shadows for readability on colored backgrounds

HTML Tags (Open Graph)

Once generated, add these tags to your page’s <head>:

<!-- Open Graph (Facebook, LinkedIn, WhatsApp) -->
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your page description">
<meta property="og:image" content="https://yoursite.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Descriptive alt text">
<meta property="og:url" content="https://yoursite.com/page">
<meta property="og:type" content="website">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Your page description">
<meta name="twitter:image" content="https://yoursite.com/twitter-image.png">
<meta name="twitter:image:alt" content="Descriptive alt text">

Important: Use HTTPS & Absolute URLs

OG image URLs must be:

Absolute (e.g., https://yoursite.com/og-image.png, not /og-image.png)
HTTPS (not http:// or localhost)
Live & reachable (deploy first, then test)

Framework Integration

The generator will detect your framework and offer to insert these tags in the right location:

Next.js: app/layout.tsx (via Metadata API) or individual page Metadata
Astro: src/layouts/Layout.astro with Astro’s SEO component or plain <meta> tags
SvelteKit: src/app.html or route-specific +page.svelte
Nuxt: nuxt.config.ts or individual page head composables
Gatsby: gatsby-config.js or gatsby-plugin-image
Plain HTML: <head> of your HTML file

Validation

Generate with --validate to check:

File dimensions:

1200×630 (OG/Facebook/LinkedIn/WhatsApp)
1200×675 (Twitter)
1200×1200 (square)

File sizes:

< 8 MB for Facebook/LinkedIn/WhatsApp
< 5 MB for Twitter
≤ 1 MB recommended for fast loading

Format: PNG or JPEG, RGB color mode (not CMYK)

Text contrast (for text-based images):

Minimum WCAG AA: 4.5:1 (normal text)
Ideal WCAG AAA: 7:1

Example validation output:

✅ og-image.png: 1200×630, JPEG, 185 KB, contrast 5.2:1 (WCAG AA)
✅ twitter-image.png: 1200×675, JPEG, 198 KB, contrast 5.2:1 (WCAG AA)
✅ og-square.png: 1200×1200, JPEG, 320 KB, contrast 5.2:1 (WCAG AA)

Manual Audit with `verify_assets.py`

After generation, run a post-hoc audit:

python scripts/verify_assets.py <output_dir> --set og

Checks:

All three files present
Dimensions correct (no distortion, proper aspect ratios)
File sizes within platform limits
Format is PNG or JPEG, RGB not CMYK

Testing Your OG Images

Before You Deploy

Local preview: Open your page in a browser and inspect the <meta> tags.
Absolute URL check: Ensure every og:image URL starts with https://yoursite.com, not / or localhost.

After You Deploy

Use these platform-specific validators:

Facebook: Sharing Debugger — shows exactly what Facebook sees when your link is shared
Twitter: Card Validator — preview Twitter card rendering
LinkedIn: Post Inspector — see how your link appears in LinkedIn feed
WhatsApp: Share the link in WhatsApp Web and check the preview
All platforms: OpenGraph.xyz — shows OG tags and preview side-by-side

Content Best Practices

Text

Keep to 2–3 lines maximum (each ~30–40 characters).
Use large, readable fonts (80–120px for a 1200px-wide image).
Ensure high contrast against your background (WCAG AA minimum).
Test readability on both mobile and desktop previews.

Imagery

Include your logo or brand mark (ideally at the top).
Keep the safe zone: place important content in the center 80% of the image (avoid edges that may get cropped).
Use high-contrast colors — avoid subtle color combinations that disappear in small previews.
Avoid clutter; social feed previews are small.

Branding

Use your brand colors for backgrounds.
Include your logo or wordmark (but keep it simple — details disappear in small previews).
Maintain visual consistency across all platforms (same colors, same logo, same style).

Common Pitfalls

Using relative URLs: /og-image.png won’t work in social previews. Use https://yoursite.com/og-image.png.
Testing on localhost: http://localhost:3000 won’t validate in any platform debugger. Deploy to production first.
Wrong aspect ratio: Providing a 1:1 image when 1.91:1 is expected causes cropping (usually top and bottom are cut).
Text too small: At 80px font for 120 characters of text, each line becomes unreadable. Use shorter text or larger font.
Forgetting square variant: Some apps (Pinterest, Instagram) prefer 1:1 images; provide both.
Not testing: Always run debuggers on all platforms — rendering differs (Facebook may add shadows, Twitter may crop differently).
Large file sizes: OG images > 1 MB take longer to load. Optimize with tools like TinyPNG or ImageOptim before deploying.

Troubleshooting

“Image dimensions wrong” after generation: If you provided a non-standard source image, the script will warn you. Re-run with a higher-resolution source (≥ 1200px wide).

“Contrast validation failed”: Your text color doesn’t contrast enough against the background. Either use a higher-contrast color pair or lower the background opacity to lighten it.

“Text got cut off or wrapped unexpectedly”: Shorten your text or use a smaller --text-color background. The script tries to fit text, but very long phrases need smaller fonts.

“Logo isn’t showing in the preview”: After deploying, check the Facebook Debugger or Twitter Card Validator — sometimes social platforms cache old versions. Use “Scrape Again” in Facebook’s debugger to force a refresh.

“File size exceeded limit”: Use JPEG instead of PNG (smaller), or reduce image resolution slightly (e.g., 1150×600 instead of 1200×630 — platforms will scale).

Open Graph & Social Media Image Generation

Source Content

Open Graph & Social Media Image Generation

Platform Specifications

Facebook & WhatsApp

Twitter Card (Large Image)

Square (Instagram, Pinterest, etc.)

LinkedIn

Generation Methods

From a Logo Image

From Text / Slogan

Text + Logo Combined

HTML Tags (Open Graph)

Important: Use HTTPS & Absolute URLs

Framework Integration

Validation

Manual Audit with verify_assets.py

Testing Your OG Images

Before You Deploy

After You Deploy

Content Best Practices

Text

Imagery

Branding

Common Pitfalls

Troubleshooting

Manual Audit with `verify_assets.py`