Nuxt OG Image · Nuxt SEO [NuxtSEO](https://nuxtseo.com/ "Home") - [Modules](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction) - [Tools](https://nuxtseo.com/tools) - [Pro](https://nuxtseo.com/pro) - [Learn SEO](https://nuxtseo.com/learn-seo/nuxt) [Releases](https://nuxtseo.com/releases) [1.4K](https://github.com/harlan-zw/nuxt-seo) [Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo) **OG Image v6** is here! Looking for an older version? [View v5 docs](https://nuxtseo.com/docs/og-image/v5/getting-started/introduction). [User Guides](https://nuxtseo.com/docs/og-image/getting-started/introduction) [API](https://nuxtseo.com/docs/og-image/api/define-og-image) [Releases](https://nuxtseo.com/docs/og-image/releases/v6) OG Image - [Switch to OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction) - [Switch to Nuxt SEO](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction) - [Switch to Robots](https://nuxtseo.com/docs/robots/getting-started/introduction) - [Switch to Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction) - [Switch to Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction) - [Switch to Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction) - [Switch to SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction) - [Switch to Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction) - [Switch to Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction) - [Switch to AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction) Search…```k`` /` v6 (latest) - Playgrounds - [Discord Support](https://discord.com/invite/275MBUBvgP) ### Getting Started - [Introduction](https://nuxtseo.com/docs/og-image/getting-started/introduction) - [Installation](https://nuxtseo.com/docs/og-image/getting-started/installation) - [Troubleshooting](https://nuxtseo.com/docs/og-image/getting-started/troubleshooting) - [Tutorial: Your first OG Image](https://nuxtseo.com/docs/og-image/getting-started/getting-familiar-with-nuxt-og-image) ### Core Concepts - [Zero Runtime](https://nuxtseo.com/docs/og-image/guides/zero-runtime) - [WhatsApp & Multiple Images](https://nuxtseo.com/docs/og-image/guides/whatsapp) - [Performance](https://nuxtseo.com/docs/og-image/guides/performance) - [CLI](https://nuxtseo.com/docs/og-image/guides/cli) - [Security](https://nuxtseo.com/docs/og-image/guides/security) - [Cloudflare](https://nuxtseo.com/docs/og-image/guides/cloudflare) - [Route Rules](https://nuxtseo.com/docs/og-image/guides/route-rules) - [Caching Images](https://nuxtseo.com/docs/og-image/guides/cache) - [JPEGs](https://nuxtseo.com/docs/og-image/guides/jpegs) - [Custom Fonts](https://nuxtseo.com/docs/og-image/guides/custom-fonts) - [Non-English Locales](https://nuxtseo.com/docs/og-image/guides/non-english-locales) - [Emojis](https://nuxtseo.com/docs/og-image/guides/emojis) - [Icons and Images](https://nuxtseo.com/docs/og-image/guides/icons-and-images) - [Styling](https://nuxtseo.com/docs/og-image/guides/styling) - [Community Templates](https://nuxtseo.com/docs/og-image/guides/community-templates) - [Error pages](https://nuxtseo.com/docs/og-image/guides/error-pages) ### Overview - [Overview](https://nuxtseo.com/docs/og-image/renderers) - [Takumi Renderer](https://nuxtseo.com/docs/og-image/renderers/takumi) - [Satori Renderer](https://nuxtseo.com/docs/og-image/renderers/satori) - [Browser Renderer](https://nuxtseo.com/docs/og-image/renderers/browser) ### Integrations - [Nuxt Content](https://nuxtseo.com/docs/og-image/integrations/content) - [Nuxt Color Mode](https://nuxtseo.com/docs/og-image/integrations/color-mode) - [Nuxt I18n](https://nuxtseo.com/docs/og-image/integrations/i18n) Getting Started # Nuxt OG Image [Copy for LLMs](https://nuxtseo.com/docs/og-image/getting-started/introduction.md) **v6 is here.** See the [migration guide](https://nuxtseo.com/docs/og-image/migration-guide/v6) for upgrade instructions from v5. ## [Why use Nuxt OG Image?](#why-use-nuxt-og-image) Nuxt OG Image generates social media preview images (og:image) using Vue templates. It renders images at build time or on-demand using [Takumi](https://nuxtseo.com/docs/og-image/renderers/takumi) (recommended), [Satori](https://nuxtseo.com/docs/og-image/renderers/satori), or [Browser](https://nuxtseo.com/docs/og-image/renderers/browser). When you share a link of your site on social media or some chat platforms, the link will be [unfurled](https://medium.com/slack-developer-blog/everything-you-ever-wanted-to-know-about-unfurling-but-were-afraid-to-ask-or-how-to-make-your-e64b4bb9254), displaying a title, description, and an image. All of these are powered by the [Open Graph Protocol](https://ogp.me/). New to Open Graph? Check out the [Mastering Open Graph Tags](https://nuxtseo.com/learn-seo/nuxt/mastering-meta/social-sharing) 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](https://nuxtseo.com/docs/og-image/getting-started/installation). ## [Features](#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](https://github.com/kane50613/takumi) (recommended): 2-10x faster with complete CSS support - ▲ Or use [Satori](https://github.com/vercel/satori): The original renderer, good CSS support - 🤖 Or prerender using the Browser: Full CSS support for complex templates - 🎨 [Tailwind CSS](https://tailwindcss.com), custom fonts, emoji support across all renderers - 📸 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 [](https://nuxtseo.com/tools/social-share-debugger)**Preview your OG images** - Use our free [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger) to see how your links appear on Twitter, Facebook, LinkedIn, and more. [Edit this page](https://github.com/nuxt-modules/og-image/edit/main/docs/content/0.getting-started/0.introduction.md) [Markdown For LLMs](https://nuxtseo.com/docs/og-image/getting-started/introduction.md) Did this page help you? [Installation Get started with Nuxt OG Image by installing the dependency to your project.](https://nuxtseo.com/docs/og-image/getting-started/installation) On this page - [Why use Nuxt OG Image?](#why-use-nuxt-og-image) - [Features](#features) [GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP) ### [NuxtSEO](https://nuxtseo.com/ "Home") - [Getting Started](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction) - [MCP](https://nuxtseo.com/docs/nuxt-seo/guides/mcp) Modules - [Robots](https://nuxtseo.com/docs/robots/getting-started/introduction) - [Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction) - [OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction) - [Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction) - [Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction) - [SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction) - [Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction) - [Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction) - [AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction) ### [NuxtSEO Pro](https://nuxtseo.com/pro "Home") - [Getting Started](https://nuxtseo.com/pro) - [Dashboard](https://nuxtseo.com/pro/dashboard) - [Pro MCP](https://nuxtseo.com/docs/nuxt-seo-pro/mcp/installation) ### [Learn SEO](https://nuxtseo.com/learn-seo "Learn SEO") Nuxt - [Mastering Meta](https://nuxtseo.com/learn-seo/nuxt/mastering-meta) - [Controlling Crawlers](https://nuxtseo.com/learn-seo/nuxt/controlling-crawlers) - [Launch & Listen](https://nuxtseo.com/learn-seo/nuxt/launch-and-listen) - [Routes & Rendering](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering) - [Staying Secure](https://nuxtseo.com/learn-seo/nuxt/routes-and-rendering/security) Vue - [Vue SEO Guide](https://nuxtseo.com/learn-seo/vue) - [Mastering Meta](https://nuxtseo.com/learn-seo/vue/mastering-meta) - [Controlling Crawlers](https://nuxtseo.com/learn-seo/vue/controlling-crawlers) - [SPA SEO](https://nuxtseo.com/learn-seo/vue/spa) - [SSR Frameworks](https://nuxtseo.com/learn-seo/vue/ssr-frameworks) - [SEO Checklist](https://nuxtseo.com/learn-seo/checklist) - [Pre-Launch Warmup](https://nuxtseo.com/learn-seo/pre-launch-warmup) - [Backlinks & Authority](https://nuxtseo.com/learn-seo/backlinks) ### [Tools](https://nuxtseo.com/tools "SEO Tools") - [Social Share Debugger](https://nuxtseo.com/tools/social-share-debugger) - [Robots.txt Generator](https://nuxtseo.com/tools/robots-txt-generator) - [Meta Tag Checker](https://nuxtseo.com/tools/meta-tag-checker) - [HTML to Markdown](https://nuxtseo.com/tools/html-to-markdown) - [XML Sitemap Validator](https://nuxtseo.com/tools/xml-sitemap-validator) - [Schema.org Validator](https://nuxtseo.com/tools/schema-validator) - [Keyword Research Pro](https://nuxtseo.com/tools/keyword-research) - [SERP Analyzer Pro](https://nuxtseo.com/tools/serp-analyzer) - [Domain Rankings Pro](https://nuxtseo.com/tools/domain-rankings) Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)