Troubleshooting Nuxt OG Image

Debugging

Nuxt DevTools

The best tool for debugging is the Nuxt DevTools integration with Nuxt OG Image.

This will show you your OG Image and give you all of the debug information.

Debug Config

You can enable the debug option which will give you more granular output.

Text Missing on Cloudflare Workers

If your OG images render the background and images but all text is invisible, the Cloudflare ASSETS binding is not configured. Without it, the worker cannot load font files at runtime.

See the Cloudflare deployment guide for the fix.

Long OG Image URLs

If your runtime OG image URLs are long (500+ characters), v6 expects this - it encodes all options directly in the URL path for stateless CDN caching. See the Performance guide for strategies to reduce URL size and optimise rendering.

Submitting an Issue

You can use the following StackBlitz playgrounds to experiment with Nuxt OG Image and submit issues.

If you run into any issues with Nuxt OG Image, it's recommended to clone of these playgrounds StackBlitz to reproduce the issue.

• Satori (custom template)
• Takumi (custom template)
• Nuxt Content
• Nuxt I18n

StackBlitz Compatibility

StackBlitz runs Nuxt within a webcontainer, so it has limited compatibility.

• You can't use anything that will require a fetch request to a different server (e.g. Google Fonts, custom Emojis, images, etc).
• The browser renderer is not supported
• sharp is not supported, so you can't use JPEGs
• <style> blocks may have limited support

Debugging Tools

• Social Share Debugger - Preview OG images across Twitter, Facebook, LinkedIn, Slack and Discord. Clear platform caches instantly.