How to Add Custom OG Images to Your Nuxt 3 App
Nuxt 3 makes metadata management relatively painless through built-in composables. You can set OG images globally in `nuxt.config.ts` or per-page using `useSeoMeta` inside your setup script. Here is how to structure it so every page has the right social card.
Per-page OG images with useSeoMeta
Inside a `<script setup>` block, call `useSeoMeta({ ogImage: "https://cdn.example.com/og/page.png", twitterImage: "...", twitterCard: "summary_large_image" })`. Nuxt handles injecting the correct meta tags into the document head with proper SSR support, so crawlers see the tags on the first request without waiting for JavaScript. For dynamic pages, pass a reactive value or a `computed` ref and Nuxt will update the tags when the value changes.
Global fallback in nuxt.config.ts
Set a site-wide fallback OG image in your `nuxt.config.ts` under the `app.head` key: `app: { head: { meta: [{ property: "og:image", content: "https://cdn.example.com/og/default.png" }] } }`. Individual pages that call `useSeoMeta` will override this default. This means your homepage and any page you forget to configure will still show a branded social card rather than a blank preview.
Nuxt Content frontmatter for blog posts
If you use the `@nuxt/content` module, add an `ogImage` field to your Markdown frontmatter. In your `[...slug].vue` page, access the field via `const { data: post } = await useAsyncData(...)` and pass it to `useSeoMeta`. This keeps your image configuration co-located with your content rather than scattered across page components. Generate the image once when you write the post, upload it to your CDN, and paste the URL into the frontmatter.
Use useHead for custom property names
For meta tags that `useSeoMeta` does not cover with a named option, fall back to `useHead` with explicit property attributes. Pass `meta: [{ hid: "og-image", property: "og:image", content: ogImageUrl }]`. The `hid` key prevents duplicate tags when the composable is called from both a layout and a page. Without `hid`, you may end up with two `og:image` tags and an unpredictable result depending on which one the crawler picks up first.
Generate your OG image in seconds
Paste a title, pick a brand color, and get production-ready social cards for every platform — with framework-specific meta tag snippets included.
Generate an OG image for your Nuxt app