diff --git a/shared/skills/image/SKILL.md b/shared/skills/image/SKILL.md index 5384bed..0ffbb39 100644 --- a/shared/skills/image/SKILL.md +++ b/shared/skills/image/SKILL.md @@ -47,277 +47,19 @@ Pick the right tool for the job: --- -## AI Image Generation +## References -Generate original images from text prompts. The fastest way to create unique marketing visuals. - -### Model Comparison - -| Model | Best For | Text in Images | API | Cost | -|-------|----------|:-:|-----|------| -| **Gemini Image** (Google, "Nano Banana" / Nano Banana Pro) | All-around, editing, multi-image reference, text rendering | Good | [Gemini API](https://ai.google.dev/gemini-api/docs/image-generation) | Check [pricing](https://ai.google.dev/gemini-api/docs/pricing) | -| **Flux** (Black Forest Labs — Pro 1.1, Kontext, Dev, Schnell) | Photorealism, brand consistency, batch; Kontext for in-image editing | Limited | [BFL API](https://docs.bfl.ai/), Replicate, fal.ai | Check [pricing](https://docs.bfl.ai/quick_start/pricing) | -| **Ideogram 3.0** | Typography, branded graphics, accurate text rendering | Best | [Ideogram API](https://developer.ideogram.ai/) | Check [pricing](https://about.ideogram.ai/api-pricing) | -| **ChatGPT Images 2.0 / GPT Image** (OpenAI) | General purpose, ChatGPT integration, native editing | Good | [OpenAI API](https://platform.openai.com/docs/guides/image-generation) | Check [pricing](https://platform.openai.com/docs/pricing) | -| **Midjourney v7** | Artistic, high-aesthetic, art-directed visuals | Improved | No official API; Discord + Web | Subscription-based | -| **Recraft V3** | Vector + brand-consistent illustrations, design assets | Strong | [Recraft API](https://www.recraft.ai/docs) | Per-credit | -| **Stable Diffusion 3.5 / SDXL** | Self-hosted, customizable, fine-tunable | Varies | Open source | Free (GPU costs) | - -**Note:** DALL-E 3 is fully deprecated. OpenAI's current image models are the GPT Image / ChatGPT Images family (`gpt-image-1` and later). - -### When to Use Which - -``` -Need text/headlines in the image? -├── Yes → Ideogram 3.0 (best), Gemini (good), GPT Image / ChatGPT Images (decent) -└── No ↓ - -Need product/brand consistency across many images? -├── Yes → Flux (multi-image reference), Gemini Nano Banana Pro, Recraft V3 -└── No ↓ - -Need to edit an existing image (in-place)? -├── Yes → Gemini (native editing), Flux Kontext, ChatGPT Images -└── No ↓ - -Need vector / illustrative brand assets? -├── Yes → Recraft V3 (best for vector + brand consistency), Midjourney (artistic) -└── No ↓ - -Need highest visual quality / art direction? -├── Yes → Flux Pro 1.1, Midjourney v7 -└── No ↓ - -Need volume at low cost? -└── Flux Schnell, Gemini Flash, Stable Diffusion (self-hosted) -``` - -### Prompting Basics - -A strong image prompt follows: **Subject + Setting + Style + Lighting + Composition + Technical** - -``` -A laptop on a minimal white desk showing a dashboard UI, -soft directional lighting from the left, shallow depth of field, -clean commercial photography style, 16:9 aspect ratio, 4K -``` - -**Common mistakes:** -- Too vague ("a business image") — add specific details -- Forgetting aspect ratio — always specify dimensions -- Requesting complex text — use overlays instead for anything beyond short headlines -- No style direction — "photorealistic," "flat illustration," "3D render" +- [references/ai-image-generation.md](references/ai-image-generation.md): Read when generating images with AI: model comparison, model choice decision tree, prompting basics +- [references/design-tools.md](references/design-tools.md): Read when using Canva or Figma, or deciding between design tools and AI generation +- [references/marketing-image-workflows.md](references/marketing-image-workflows.md): Read when producing blog heroes, social graphics, product mockups, profile/listing banners, or brand assets (includes platform sizes) +- [references/image-optimization.md](references/image-optimization.md): Read when optimizing images for web performance: formats, checklist, commands +- [references/og-social-preview-images.md](references/og-social-preview-images.md): Read when setting up OG/social preview images and meta tags +- [references/common-mistakes.md](references/common-mistakes.md): Read before delivering, to check against common image mistakes For detailed prompting guides per model, see [references/ai-image-prompting.md](references/ai-image-prompting.md). --- -## Design Tools - -For templated, brand-consistent work where AI generation is overkill or too unpredictable. - -### Canva - -Best for non-designers who need polished output fast. - -- **Strengths:** Massive template library, brand kit, Magic Resize (one design → all sizes), team collaboration -- **Best for:** Social graphics, presentations, email headers, simple banners -- **Limitations:** Less control than Figma, templates can look generic -- **Agent-friendliness:** Has an API but limited — better as a human-in-the-loop tool - -### Figma - -Best for teams with design systems or pixel-perfect needs. - -- **Strengths:** Design system components, auto layout, developer handoff, plugins -- **Best for:** OG images via templates, design system assets, complex layouts -- **Limitations:** Steeper learning curve, requires design skill -- **Agent-friendliness:** Has an API and MCP server for reading designs - -### When to Use Design Tools vs. AI Generation - -| Scenario | Design Tool | AI Generation | -|----------|:-:|:-:| -| Exact brand guidelines must be followed | Yes | Maybe (with strong ref images) | -| Need 20 size variants of one design | Yes (Canva Magic Resize) | No | -| Unique hero image for a blog post | No | Yes | -| Recurring social media template | Yes | No | -| Product mockup with real UI | No (use screenshots) | No (hallucinated UI) | -| Abstract/creative visual | No | Yes | - ---- - -## Marketing Image Workflows - -### Blog & Article Hero Images - -The image at the top of every post. Sets tone, improves shareability, required for OG/social previews. - -1. **Define the concept** — what visual metaphor represents the topic? -2. **Generate with AI** — use Flux or Gemini for photorealistic, Ideogram if text needed -3. **Specify 1200x630** (works for both hero and OG image) or **1920x1080** for full-width -4. **Optimize** — compress to <200KB, serve as WebP with JPEG fallback - -**Prompt pattern:** -``` -[Visual metaphor for topic], clean modern style, -bright natural lighting, shallow depth of field, -professional blog header aesthetic, 1200x630 -``` - -### Social Media Graphics - -Platform-specific images for organic posts. - -| Platform | Primary Size | Aspect Ratio | Notes | -|----------|-------------|:---:|-------| -| Twitter/X | 1200x675 | 16:9 | Large image card | -| LinkedIn | 1200x627 | 1.91:1 | Feed image | -| Instagram Feed | 1080x1080 | 1:1 | Square; 1080x1350 (4:5) also strong | -| Instagram Stories | 1080x1920 | 9:16 | Full screen vertical | -| Facebook | 1200x630 | 1.91:1 | Link share image | - -**Workflow:** -1. Create the hero concept at highest resolution needed -2. Use Canva Magic Resize or manual crop for platform variants -3. Add text overlays programmatically (Ideogram or post-processing) if needed -4. Export at platform-specific dimensions - -### Product Mockups & Screenshots - -Showcase your product UI in context. AI models hallucinate UI — don't use them for this. - -1. **Capture real screenshots** of your product at 2x resolution -2. **Frame in device mockups** — use browser frame, laptop, or phone templates -3. **Add context** — callout arrows, feature labels, before/after comparisons -4. **Annotate with code** — Hyperframes or HTML/CSS for programmatic overlays - -**Tools:** Browser DevTools (screenshot), Shottr (Mac), CleanShot X, or `screencapture` CLI. - -### Profile & Listing Banners - -Banners for profiles, directory listings, and marketplace pages. Often the first visual impression. - -| Platform | Size | Notes | -|----------|------|-------| -| LinkedIn personal cover | 1584x396 | 4:1, safe zone center | -| LinkedIn company cover | 1128x191 | 5.9:1; LinkedIn recommends up to 4200x700 | -| Twitter/X header | 1500x500 | 3:1, partially obscured by avatar | -| Product Hunt gallery | 1270x760 | 5:3, up to 6 images | -| G2 profile | 1280x720 | 16:9, product screenshots preferred | -| GitHub social preview | 1280x640 | 2:1, shows in link cards | -| App Store screenshots | Varies by device | Check current platform specifications | -| Google Play feature graphic | 1024x500 | ~2:1, required for store listing | - -**Best practices:** -- **Keep text minimal** — banners are seen at small sizes on mobile -- **Center critical content** — edges get cropped differently per device -- **Show the product** — real UI screenshots outperform abstract graphics on directory listings -- **Match your brand** — use consistent colors, fonts, logo placement -- **Update seasonally** — stale banners signal an inactive product - -**Workflow:** -1. Pick the platform(s) and note exact dimensions -2. For directories (Product Hunt, G2): use real product screenshots with light annotation -3. For profiles (LinkedIn, Twitter): use brand colors + tagline + optional product shot -4. Generate with Canva/Figma templates or Ideogram (if text-heavy) -5. Test at actual display size — zoom out to check readability - -### Brand Assets - -Logos, icons, and illustrations. AI generation has limits here. - -| Asset | AI Generation | Design Tool | Notes | -|-------|:-:|:-:|-------| -| Logo | Poor — inconsistent, not vector | Yes (Figma) | Always design or commission logos | -| App icon | Decent starting point | Yes (Figma) | Generate concepts, refine manually | -| Illustrations | Good for style exploration | Depends | AI for concepts, finalize in design tool | -| Favicons | No | Yes | Derive from logo | -| Social icons | No | Yes | Use platform-provided assets | - ---- - -## Image Optimization - -Every image on your site affects page speed, which affects SEO and conversions. - -### Format Guide - -| Format | Best For | Compression | Browser Support | -|--------|----------|-------------|:---:| -| **WebP** | Photos, graphics — default choice | Lossy + lossless | ~96% | -| **AVIF** | Highest compression, newest | Better than WebP | ~94% | -| **JPEG** | Fallback for older browsers | Lossy only | Universal | -| **PNG** | Transparency, screenshots | Lossless | Universal | -| **SVG** | Logos, icons, illustrations | Vector (scales) | Universal | - -### Optimization Checklist - -- [ ] **Serve WebP** with JPEG/PNG fallback (`` element or CDN auto-format) -- [ ] **Resize to display size** — don't serve 4000px images in 800px containers -- [ ] **Compress** — target quality 75-85% for photos, near-lossless for screenshots -- [ ] **Lazy load** below-the-fold images (`loading="lazy"`) -- [ ] **Set explicit dimensions** — `width` and `height` attributes prevent layout shift (CLS) -- [ ] **Use a CDN** with auto-optimization (Cloudflare, Vercel, Imgix, Cloudinary) -- [ ] **Add alt text** — descriptive, keyword-relevant, not stuffed - -### Quick Optimization Commands - -```bash -# Convert to WebP (using cwebp) -cwebp -q 80 input.png -o output.webp - -# Batch convert with ImageMagick -mogrify -format webp -quality 80 *.png - -# Optimize JPEG (using jpegoptim) -jpegoptim --max=80 --strip-all *.jpg - -# Check image sizes on a page -curl -s https://yoursite.com | grep -oP 'src="[^"]+\.(jpg|png|webp)"' | head -20 -``` - ---- - -## OG & Social Preview Images - -The image that appears when your URL is shared on social media, Slack, Discord, etc. - -### Required Meta Tags - -```html - - - - - -``` - -### Dynamic OG Images - -Generate OG images programmatically for pages with dynamic content (blog posts, user profiles): - -- **Vercel OG** (`@vercel/og`) — generates images at the edge using JSX -- **Satori** — converts HTML/CSS to SVG (powers Vercel OG) -- **Cloudinary** — URL-based text overlay on template images - -**Best for programmatic SEO:** Generate unique OG images per page using templates + dynamic data. - ---- - -## Common Mistakes - -1. **Using AI for product UI screenshots** — models hallucinate interfaces; capture real screenshots -2. **Skipping image optimization** — unoptimized images are the #1 page speed killer -3. **No OG image** — shared links look broken without a preview image -4. **Wrong aspect ratio** — always check platform specs before generating -5. **Text-heavy images without Ideogram** — most AI models butcher text; use Ideogram or add text in post -6. **Generating without style direction** — "photorealistic," "flat illustration," "3D render" drastically changes output -7. **Inconsistent brand visuals** — use Flux multi-reference or design templates for consistency -8. **Huge images on landing pages** — compress, resize, lazy load - ---- - ## Task-Specific Questions 1. What type of image do you need? (Blog hero, social graphic, mockup, banner, brand asset) diff --git a/shared/skills/image/references/ai-image-generation.md b/shared/skills/image/references/ai-image-generation.md new file mode 100644 index 0000000..ff35854 --- /dev/null +++ b/shared/skills/image/references/ai-image-generation.md @@ -0,0 +1,60 @@ +# AI Image Generation + +Generate original images from text prompts. The fastest way to create unique marketing visuals. + +## Model Comparison + +| Model | Best For | Text in Images | API | Cost | +|-------|----------|:-:|-----|------| +| **Gemini Image** (Google, "Nano Banana" / Nano Banana Pro) | All-around, editing, multi-image reference, text rendering | Good | [Gemini API](https://ai.google.dev/gemini-api/docs/image-generation) | Check [pricing](https://ai.google.dev/gemini-api/docs/pricing) | +| **Flux** (Black Forest Labs — Pro 1.1, Kontext, Dev, Schnell) | Photorealism, brand consistency, batch; Kontext for in-image editing | Limited | [BFL API](https://docs.bfl.ai/), Replicate, fal.ai | Check [pricing](https://docs.bfl.ai/quick_start/pricing) | +| **Ideogram 3.0** | Typography, branded graphics, accurate text rendering | Best | [Ideogram API](https://developer.ideogram.ai/) | Check [pricing](https://about.ideogram.ai/api-pricing) | +| **ChatGPT Images 2.0 / GPT Image** (OpenAI) | General purpose, ChatGPT integration, native editing | Good | [OpenAI API](https://platform.openai.com/docs/guides/image-generation) | Check [pricing](https://platform.openai.com/docs/pricing) | +| **Midjourney v7** | Artistic, high-aesthetic, art-directed visuals | Improved | No official API; Discord + Web | Subscription-based | +| **Recraft V3** | Vector + brand-consistent illustrations, design assets | Strong | [Recraft API](https://www.recraft.ai/docs) | Per-credit | +| **Stable Diffusion 3.5 / SDXL** | Self-hosted, customizable, fine-tunable | Varies | Open source | Free (GPU costs) | + +**Note:** DALL-E 3 is fully deprecated. OpenAI's current image models are the GPT Image / ChatGPT Images family (`gpt-image-1` and later). + +## When to Use Which + +``` +Need text/headlines in the image? +├── Yes → Ideogram 3.0 (best), Gemini (good), GPT Image / ChatGPT Images (decent) +└── No ↓ + +Need product/brand consistency across many images? +├── Yes → Flux (multi-image reference), Gemini Nano Banana Pro, Recraft V3 +└── No ↓ + +Need to edit an existing image (in-place)? +├── Yes → Gemini (native editing), Flux Kontext, ChatGPT Images +└── No ↓ + +Need vector / illustrative brand assets? +├── Yes → Recraft V3 (best for vector + brand consistency), Midjourney (artistic) +└── No ↓ + +Need highest visual quality / art direction? +├── Yes → Flux Pro 1.1, Midjourney v7 +└── No ↓ + +Need volume at low cost? +└── Flux Schnell, Gemini Flash, Stable Diffusion (self-hosted) +``` + +## Prompting Basics + +A strong image prompt follows: **Subject + Setting + Style + Lighting + Composition + Technical** + +``` +A laptop on a minimal white desk showing a dashboard UI, +soft directional lighting from the left, shallow depth of field, +clean commercial photography style, 16:9 aspect ratio, 4K +``` + +**Common mistakes:** +- Too vague ("a business image") — add specific details +- Forgetting aspect ratio — always specify dimensions +- Requesting complex text — use overlays instead for anything beyond short headlines +- No style direction — "photorealistic," "flat illustration," "3D render" diff --git a/shared/skills/image/references/common-mistakes.md b/shared/skills/image/references/common-mistakes.md new file mode 100644 index 0000000..06efe20 --- /dev/null +++ b/shared/skills/image/references/common-mistakes.md @@ -0,0 +1,10 @@ +# Common Mistakes + +1. **Using AI for product UI screenshots** — models hallucinate interfaces; capture real screenshots +2. **Skipping image optimization** — unoptimized images are the #1 page speed killer +3. **No OG image** — shared links look broken without a preview image +4. **Wrong aspect ratio** — always check platform specs before generating +5. **Text-heavy images without Ideogram** — most AI models butcher text; use Ideogram or add text in post +6. **Generating without style direction** — "photorealistic," "flat illustration," "3D render" drastically changes output +7. **Inconsistent brand visuals** — use Flux multi-reference or design templates for consistency +8. **Huge images on landing pages** — compress, resize, lazy load diff --git a/shared/skills/image/references/design-tools.md b/shared/skills/image/references/design-tools.md new file mode 100644 index 0000000..3eef9b5 --- /dev/null +++ b/shared/skills/image/references/design-tools.md @@ -0,0 +1,32 @@ +# Design Tools + +For templated, brand-consistent work where AI generation is overkill or too unpredictable. + +## Canva + +Best for non-designers who need polished output fast. + +- **Strengths:** Massive template library, brand kit, Magic Resize (one design → all sizes), team collaboration +- **Best for:** Social graphics, presentations, email headers, simple banners +- **Limitations:** Less control than Figma, templates can look generic +- **Agent-friendliness:** Has an API but limited — better as a human-in-the-loop tool + +## Figma + +Best for teams with design systems or pixel-perfect needs. + +- **Strengths:** Design system components, auto layout, developer handoff, plugins +- **Best for:** OG images via templates, design system assets, complex layouts +- **Limitations:** Steeper learning curve, requires design skill +- **Agent-friendliness:** Has an API and MCP server for reading designs + +## When to Use Design Tools vs. AI Generation + +| Scenario | Design Tool | AI Generation | +|----------|:-:|:-:| +| Exact brand guidelines must be followed | Yes | Maybe (with strong ref images) | +| Need 20 size variants of one design | Yes (Canva Magic Resize) | No | +| Unique hero image for a blog post | No | Yes | +| Recurring social media template | Yes | No | +| Product mockup with real UI | No (use screenshots) | No (hallucinated UI) | +| Abstract/creative visual | No | Yes | diff --git a/shared/skills/image/references/image-optimization.md b/shared/skills/image/references/image-optimization.md new file mode 100644 index 0000000..2e48d5b --- /dev/null +++ b/shared/skills/image/references/image-optimization.md @@ -0,0 +1,39 @@ +# Image Optimization + +Every image on your site affects page speed, which affects SEO and conversions. + +## Format Guide + +| Format | Best For | Compression | Browser Support | +|--------|----------|-------------|:---:| +| **WebP** | Photos, graphics — default choice | Lossy + lossless | ~96% | +| **AVIF** | Highest compression, newest | Better than WebP | ~94% | +| **JPEG** | Fallback for older browsers | Lossy only | Universal | +| **PNG** | Transparency, screenshots | Lossless | Universal | +| **SVG** | Logos, icons, illustrations | Vector (scales) | Universal | + +## Optimization Checklist + +- [ ] **Serve WebP** with JPEG/PNG fallback (`` element or CDN auto-format) +- [ ] **Resize to display size** — don't serve 4000px images in 800px containers +- [ ] **Compress** — target quality 75-85% for photos, near-lossless for screenshots +- [ ] **Lazy load** below-the-fold images (`loading="lazy"`) +- [ ] **Set explicit dimensions** — `width` and `height` attributes prevent layout shift (CLS) +- [ ] **Use a CDN** with auto-optimization (Cloudflare, Vercel, Imgix, Cloudinary) +- [ ] **Add alt text** — descriptive, keyword-relevant, not stuffed + +## Quick Optimization Commands + +```bash +# Convert to WebP (using cwebp) +cwebp -q 80 input.png -o output.webp + +# Batch convert with ImageMagick +mogrify -format webp -quality 80 *.png + +# Optimize JPEG (using jpegoptim) +jpegoptim --max=80 --strip-all *.jpg + +# Check image sizes on a page +curl -s https://yoursite.com | grep -oP 'src="[^"]+\.(jpg|png|webp)"' | head -20 +``` diff --git a/shared/skills/image/references/marketing-image-workflows.md b/shared/skills/image/references/marketing-image-workflows.md new file mode 100644 index 0000000..cd96237 --- /dev/null +++ b/shared/skills/image/references/marketing-image-workflows.md @@ -0,0 +1,87 @@ +# Marketing Image Workflows + +## Blog & Article Hero Images + +The image at the top of every post. Sets tone, improves shareability, required for OG/social previews. + +1. **Define the concept** — what visual metaphor represents the topic? +2. **Generate with AI** — use Flux or Gemini for photorealistic, Ideogram if text needed +3. **Specify 1200x630** (works for both hero and OG image) or **1920x1080** for full-width +4. **Optimize** — compress to <200KB, serve as WebP with JPEG fallback + +**Prompt pattern:** +``` +[Visual metaphor for topic], clean modern style, +bright natural lighting, shallow depth of field, +professional blog header aesthetic, 1200x630 +``` + +## Social Media Graphics + +Platform-specific images for organic posts. + +| Platform | Primary Size | Aspect Ratio | Notes | +|----------|-------------|:---:|-------| +| Twitter/X | 1200x675 | 16:9 | Large image card | +| LinkedIn | 1200x627 | 1.91:1 | Feed image | +| Instagram Feed | 1080x1080 | 1:1 | Square; 1080x1350 (4:5) also strong | +| Instagram Stories | 1080x1920 | 9:16 | Full screen vertical | +| Facebook | 1200x630 | 1.91:1 | Link share image | + +**Workflow:** +1. Create the hero concept at highest resolution needed +2. Use Canva Magic Resize or manual crop for platform variants +3. Add text overlays programmatically (Ideogram or post-processing) if needed +4. Export at platform-specific dimensions + +## Product Mockups & Screenshots + +Showcase your product UI in context. AI models hallucinate UI — don't use them for this. + +1. **Capture real screenshots** of your product at 2x resolution +2. **Frame in device mockups** — use browser frame, laptop, or phone templates +3. **Add context** — callout arrows, feature labels, before/after comparisons +4. **Annotate with code** — Hyperframes or HTML/CSS for programmatic overlays + +**Tools:** Browser DevTools (screenshot), Shottr (Mac), CleanShot X, or `screencapture` CLI. + +## Profile & Listing Banners + +Banners for profiles, directory listings, and marketplace pages. Often the first visual impression. + +| Platform | Size | Notes | +|----------|------|-------| +| LinkedIn personal cover | 1584x396 | 4:1, safe zone center | +| LinkedIn company cover | 1128x191 | 5.9:1; LinkedIn recommends up to 4200x700 | +| Twitter/X header | 1500x500 | 3:1, partially obscured by avatar | +| Product Hunt gallery | 1270x760 | 5:3, up to 6 images | +| G2 profile | 1280x720 | 16:9, product screenshots preferred | +| GitHub social preview | 1280x640 | 2:1, shows in link cards | +| App Store screenshots | Varies by device | Check current platform specifications | +| Google Play feature graphic | 1024x500 | ~2:1, required for store listing | + +**Best practices:** +- **Keep text minimal** — banners are seen at small sizes on mobile +- **Center critical content** — edges get cropped differently per device +- **Show the product** — real UI screenshots outperform abstract graphics on directory listings +- **Match your brand** — use consistent colors, fonts, logo placement +- **Update seasonally** — stale banners signal an inactive product + +**Workflow:** +1. Pick the platform(s) and note exact dimensions +2. For directories (Product Hunt, G2): use real product screenshots with light annotation +3. For profiles (LinkedIn, Twitter): use brand colors + tagline + optional product shot +4. Generate with Canva/Figma templates or Ideogram (if text-heavy) +5. Test at actual display size — zoom out to check readability + +## Brand Assets + +Logos, icons, and illustrations. AI generation has limits here. + +| Asset | AI Generation | Design Tool | Notes | +|-------|:-:|:-:|-------| +| Logo | Poor — inconsistent, not vector | Yes (Figma) | Always design or commission logos | +| App icon | Decent starting point | Yes (Figma) | Generate concepts, refine manually | +| Illustrations | Good for style exploration | Depends | AI for concepts, finalize in design tool | +| Favicons | No | Yes | Derive from logo | +| Social icons | No | Yes | Use platform-provided assets | diff --git a/shared/skills/image/references/og-social-preview-images.md b/shared/skills/image/references/og-social-preview-images.md new file mode 100644 index 0000000..d01282c --- /dev/null +++ b/shared/skills/image/references/og-social-preview-images.md @@ -0,0 +1,23 @@ +# OG & Social Preview Images + +The image that appears when your URL is shared on social media, Slack, Discord, etc. + +## Required Meta Tags + +```html + + + + + +``` + +## Dynamic OG Images + +Generate OG images programmatically for pages with dynamic content (blog posts, user profiles): + +- **Vercel OG** (`@vercel/og`) — generates images at the edge using JSX +- **Satori** — converts HTML/CSS to SVG (powers Vercel OG) +- **Cloudinary** — URL-based text overlay on template images + +**Best for programmatic SEO:** Generate unique OG images per page using templates + dynamic data.