NuxtSEO
Getting Started

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 Satori or Chromium.

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, 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
Preview your OG images - Use our free Social Share Debugger to see how your links appear on Twitter, Facebook, LinkedIn, and more.
Edit this page
Markdown For LLMs
Did this page help you?

Installation

Get started with Nuxt OG Image by installing the dependency to your project.