nuxt-og-image

[![npm version][npm-version-src]][npm-version-href] [![npm downloads][npm-downloads-src]][npm-downloads-href] [![License][license-src]][license-href] [![Nuxt][nuxt-src]][nuxt-href] 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](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/open-graph) 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](https://github.com/vercel/satori) or [Takumi](https://github.com/kane50613/takumi): Tailwind / [UnoCSS](https://unocss.dev) 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: ```bash npx nuxi@latest module add og-image ``` > [!TIP] > Generate an Agent Skill for this package using [skilld](https://github.com/harlan-zw/skilld): > ```bash > npx skilld add nuxt-og-image > ``` 💡 Built your OG images? Check how they render across Twitter, Facebook, LinkedIn and Slack with the free [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger), or monitor them site-wide with [Nuxt SEO Pro](https://nuxtseo.com/pro). ## Documentation [📖 Read the full documentation](https://nuxtseo.com/og-image/getting-started/installation) for more information. ## Demos - [Satori (custom template)](https://stackblitz.com/github/nuxt-modules/og-image/tree/main/examples/basic-satori) - [Takumi (custom template)](https://stackblitz.com/github/nuxt-modules/og-image/tree/main/examples/basic-takumi) - [Nuxt Content](https://stackblitz.com/github/nuxt-modules/og-image/tree/main/examples/content) - [i18n](https://stackblitz.com/github/nuxt-modules/og-image/tree/main/examples/i18n) ## Sponsors

## License Licensed under the [MIT license](https://github.com/nuxt-modules/og-image/blob/main/LICENSE.md). [npm-version-src]: https://img.shields.io/npm/v/nuxt-og-image/latest.svg?style=flat&colorA=18181B&colorB=28CF8D [npm-version-href]: https://npmjs.com/package/nuxt-og-image [npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-og-image.svg?style=flat&colorA=18181B&colorB=28CF8D [npm-downloads-href]: https://npmjs.com/package/nuxt-og-image [license-src]: https://img.shields.io/github/license/nuxt-modules/og-image.svg?style=flat&colorA=18181B&colorB=28CF8D [license-href]: https://github.com/nuxt-modules/og-image/blob/main/LICENSE.md [nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt [nuxt-href]: https://nuxt.com