nuxt-og-image

Nuxt OG Image allows you to easily generate OG Images using either Vue components or just 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.

_{Made possible by my Sponsor Program 💖
Follow me @harlan_zw 🐦 • Join Discord for help}

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: Tailwind / UnoCSS with your theme, Google fonts, 6 emoji families supported and more!
🤖 Or prerender using the Browser: Supporting painless, complex templates
📸 Feeling lazy? Just generate screenshots for every page: hide elements, wait for animations, and more
⚙️ Works on the edge: Vercel Edge, Netlify Edge and Cloudflare Workers

Install nuxt-og-image dependency to your project:

npx nuxi@latest module add og-image

Licensed under the MIT license.