Preview and debug OG image generation for a specific route or all routes
Generates OG image previews and validates configuration for Nuxt applications using nuxt-og-image.
/plugin marketplace add secondsky/claude-skills/plugin install nuxt-seo@claude-skillsPreview and debug Open Graph image generation for Nuxt applications using nuxt-og-image.
# Find OG image config
grep -A 20 "ogImage" nuxt.config.ts
# Find defineOgImage usage
grep -r "defineOgImage" --include="*.vue" -l
# List OG image templates
ls -la components/OgImage/
When dev server is running:
| URL | Purpose |
|---|---|
/_nuxt-og-image/playground | Interactive OG image playground |
/__og-image__/image/[route]/og.png | Preview specific route's OG image |
/__og-image__/image/[route]/og.png?debug | Debug mode with overlay |
Template Not Found
components/OgImage/Rendering Issues (Satori)
display: block/inlineChromium Fallback
renderer: 'chromium'# OG Image Preview Report
## Configuration
- Renderer: [satori/chromium]
- Default template: [template name]
- Custom fonts: [yes/no]
## Routes with OG Images
| Route | Template | Props |
|-------|----------|-------|
| `/` | NuxtSeo | title, description |
| `/blog/[slug]` | BlogPost | title, author, date |
## Available Templates
- NuxtSeo (default)
- BlogPost
- Product
## Preview URLs
- Playground: http://localhost:3000/_nuxt-og-image/playground
- Home: http://localhost:3000/__og-image__/image/og.png
## Issues Found
- [Issue description]
Start by checking the project's OG image configuration and list all routes using defineOgImage.