nuxt-og-image@beta. See the migration guide for upgrade instructions.Why use Nuxt OG Image?
Nuxt OG Image generates social media preview images (og:image) using Vue templates. Images are rendered at build time or on-demand using Takumi (recommended), Satori, or Browser.
When you share a link of your site on social media or some chat platforms, the link will be unfurled, displaying a title, description, and an image. All of these are powered by the Open Graph Protocol.
New to Open Graph? Check out the Mastering Open Graph Tags guide to learn more.
For example, check the og:image meta tag in the page source to see the OG image for the current page.
While it may not help with your organic traffic, it can significantly improve the click-through rate of your pages when shared.
While it's simple to create your own OG images, it can be time-consuming to keep them up-to-date with your site's content and easy to misconfigure the meta tags for each platform.
Ready to get started? Check out the installation guide.
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 Takumi (recommended): 2-10x faster with comprehensive CSS support
- ▲ Or use Satori: The original renderer, good CSS support
- 🤖 Or prerender using the Browser: Full CSS support for complex templates
- 🎨 Tailwind CSS, custom fonts, emoji support across all renderers
- 📸 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