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) You're viewing **OG Image v5** documentation. For the latest, [switch to v6](https://nuxtseo.com/docs/og-image/getting-started/introduction). [User Guides](https://nuxtseo.com/docs/og-image/v5/getting-started/introduction) [API](https://nuxtseo.com/docs/og-image/v5/api/define-og-image) [Releases](https://nuxtseo.com/docs/og-image/v5/releases/v5) 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`` /` v5 - Playgrounds - [Discord Support](https://discord.com/invite/275MBUBvgP) ### Getting Started - [Introduction](https://nuxtseo.com/docs/og-image/v5/getting-started/introduction) - [Installation](https://nuxtseo.com/docs/og-image/v5/getting-started/installation) - [Troubleshooting](https://nuxtseo.com/docs/og-image/v5/getting-started/troubleshooting) - [Tutorial: Your first OG Image](https://nuxtseo.com/docs/og-image/v5/getting-started/getting-familar-with-nuxt-og-image) ### Core Concepts - [Satori Renderer](https://nuxtseo.com/docs/og-image/v5/guides/satori) - [Chromium Renderer](https://nuxtseo.com/docs/og-image/v5/guides/chromium) - [Zero Runtime](https://nuxtseo.com/docs/og-image/v5/guides/zero-runtime) - [Compatibility](https://nuxtseo.com/docs/og-image/v5/guides/compatibility) - [Route Rules](https://nuxtseo.com/docs/og-image/v5/guides/route-rules) - [Caching Images](https://nuxtseo.com/docs/og-image/v5/guides/cache) - [JPEGs](https://nuxtseo.com/docs/og-image/v5/guides/jpegs) - [Fonts](https://nuxtseo.com/docs/og-image/v5/guides/custom-fonts) - [Non-English Locales](https://nuxtseo.com/docs/og-image/v5/guides/non-english-locales) - [Emojis](https://nuxtseo.com/docs/og-image/v5/guides/emojis) - [Icons and Images](https://nuxtseo.com/docs/og-image/v5/guides/icons-and-images) - [Styling](https://nuxtseo.com/docs/og-image/v5/guides/styling) - [Community Templates](https://nuxtseo.com/docs/og-image/v5/guides/community-templates) - [Error pages](https://nuxtseo.com/docs/og-image/v5/guides/error-pages) ### Integrations - [Nuxt Content](https://nuxtseo.com/docs/og-image/v5/integrations/content) - [Nuxt Color Mode](https://nuxtseo.com/docs/og-image/v5/integrations/color-mode) Getting Started # Nuxt OG Image [Copy for LLMs](https://nuxtseo.com/docs/og-image/v5/getting-started/introduction.md) ## [Why use 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](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/mastering-meta/open-graph) guide to learn more. 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: ![](https://nuxtseo.com/__og-image__/static/docs/og-image/getting-started/introduction/og.png) 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 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 [Edit this page](https://github.com/nuxt-modules/og-image/blob/v5.1.13/docs/content/0.getting-started/0.introduction.md) [Markdown For LLMs](https://nuxtseo.com/docs/og-image/v5/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/v5/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)