nuxt-og-image

Nuxt OG Image allows you to easily generate OG Images using either Vue components or screenshots of your pages.

OG Images are known to improve click-through rates on social media.

New to Open Graph? Check out the Mastering Open Graph Tags guide to learn more about why you might need this module.

Features

• ✨ Create an og:image using the built-in templates or make your own with Vue components
• 🎨 Design and test your og:image in the Nuxt DevTools OG Image Playground with full HMR
• ▲ Render using Satori or Takumi: Tailwind / UnoCSS with your theme, Google fonts, 6 emoji families and more.
• 🤖 Or prerender using the Browser: Supporting painless, complex templates
• 📸 Feeling lazy? Generate screenshots for every page: hide elements, wait for animations, and more
• ⚙️ Works on the edge: Vercel Edge, Netlify Edge and Cloudflare Workers

Installation

Install nuxt-og-image dependency to your project:

npx nuxt module add og-image

[!TIP] Using an AI agent? Get the nuxt-og-image Skill on skilld.dev/gh/nuxt-modules/og-image.

💡 Built your OG images? Check how they render across Twitter, Facebook, LinkedIn and Slack with the free Social Share Debugger, or monitor them site-wide with Nuxt SEO Pro.

Documentation

📖 Read the full documentation for more information.

Demos

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

Sponsors

License

Licensed under the MIT license.