Nuxt OG Image

Why use Nuxt OG Image?

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 Prtocol.

Nuxt OG Image allows you to generate these images at runtime or when prerendering, using simple Vue templates.

For example, the OG image for the current page is:

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 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