How to Generate Social Share Images Automatically in Nuxt.js

For a single image shared by every page, put the image in Nuxt’s public/ directory and set ogImage with useSeoMeta. For automatically generated images that vary by page, the Nuxt Modules listing points to nuxt-og-image, which describes Vue component templates and page screenshots as generation approaches. Its listing also mentions Satori, Takumi, browser prerendering, and edge deployments. Check the current module documentation and your Nuxt and deployment versions before implementing it: the detailed configuration and per-route syntax are not verified here. See the nuxt-og-image module listing.

This guide targets Nuxt 4. Nuxt 3 reached end of life on 31 July 2026, according to the official Nuxt 3 migration overview. If you maintain a Nuxt 3 project, confirm its support status and use version-specific module documentation before adopting current examples.

1. Choose between one shared image and generated images

Requirement	Approach	What it means
One branded preview everywhere	Static image in public/ plus useSeoMeta	Simple and predictable; every page points to the same image.
Images that vary by page	Evaluate nuxt-og-image	The module listing describes Vue templates and page screenshots. Verify route-data wiring and rendering behavior in current docs.
A visually complex template	Investigate the module’s browser prerendering option	The listing names this option; verify that it fits your build and deployment runtime.
Resize or optimize ordinary site images	@nuxt/image	Image optimization is a separate task from generating social preview cards. See Nuxt Image documentation.

Nuxt’s public/ files are served from the site root and are not modified by the build. The Nuxt 4 docs show the og-image.png and useSeoMeta pattern below. Nuxt public directory documentation.

2. Set a static social image in Nuxt 4

Use this when the same preview image is appropriate for all routes. Add a finished image at public/og-image.png. Then add the metadata in your root app component, typically app/app.vue in a Nuxt 4 project:

<script setup lang="ts">
useSeoMeta({
  ogTitle: 'Acme — Build better workflows',
  ogDescription: 'A short description of what Acme helps people do.',
  ogImage: '/og-image.png',
  twitterCard: 'summary_large_image',
})
</script>

<template>
  <NuxtPage />
</template>

The public file is reachable at /og-image.png. If the site is hosted below a path prefix or uses a CDN URL, check the final image URL in the rendered page; the Nuxt assets documentation describes how public paths are resolved. Social crawlers need a publicly fetchable image URL, not a local filesystem path.

This example intentionally sets shared metadata. It does not create a unique image for each route. For page-specific titles and descriptions, Nuxt’s useSeoMeta documentation supports reactive metadata values; generating a different image for every route is a separate capability that needs an image-generation implementation.

3. Evaluate automatic per-page generation with nuxt-og-image

The Nuxt Modules listing identifies nuxt-og-image as the Nuxt-specific module for generating Open Graph images from Vue components or screenshots of pages. It lists built-in templates, custom Vue templates, Satori or Takumi rendering, browser prerendering for complex templates, and a DevTools playground. The listing also advertises support for Vercel Edge, Netlify Edge, and Cloudflare Workers; confirm the current docs and your exact runtime before relying on that support.

The module listing provides this install entry point:

npx nuxi@latest module add og-image

Run it from your Nuxt project root and review the changes it makes. Before building a production implementation, consult the module’s linked detailed documentation for the version currently installed. The retrieved details do not verify exact template syntax, how route data binds into image templates, output sizing, fallback behavior, cache configuration, or static-generation setup; those specifics should not be guessed.

Implementation checklist for a per-route image

1. Choose the page fields that belong in a preview, such as the page title and a short category label. Keep a fallback for missing or unusually long values.
2. Choose the module rendering path that fits the design: the listing names Satori or Takumi and browser prerendering for complex templates. Check feature support and any limits in the current documentation.
3. Follow the installed version’s docs to connect route data to the generated image and metadata. Verify the final rendered HTML contains an absolute, publicly accessible og:image URL.
4. Check how that version generates images during development, production rendering, and static generation. Do not assume a route that works in dev is also generated or served in your deployment mode.
5. Validate a representative route after deployment using a social sharing debugger. The module listing recommends a free Social Share Debugger, but the specific platform tool should match the network you need to check.

Nuxt Image is for image optimization and transformation; it does not replace the social-image generator in this guide. Its documentation notes a Sharp cross-platform installation issue that can matter if build and deployment platforms differ. Treat that as an image-optimization dependency concern, not as evidence of a nuxt-og-image issue. Nuxt Image installation documentation.

4. Verify the metadata and image URL

1. Open the deployed page and inspect its server-rendered HTML source, not only the browser’s post-hydration DOM.
2. Find the Open Graph tags. Confirm there is one intended og:image, plus appropriate og:title and og:description.
3. Open the image URL in a private browser window or request it without an authenticated session. It should resolve publicly.
4. Check that the response is actually an image and that the URL does not redirect to a login page, an error page, or an inaccessible development host.
5. Use the target social network’s sharing debugger to inspect the preview and refresh its cached scrape if the image recently changed.

Nuxt’s SEO docs show useSeoMeta for typed SEO fields and a full URL for ogImage in an example. Use a stable, crawlable absolute image URL in production, particularly when the image is hosted on a different origin. Nuxt SEO and meta documentation.

5. Performance, reliability, and cost considerations

• Static image: The image is a regular public asset. It avoids per-page image generation, but all pages share the same artwork.
• Generated images: Rendering and delivery behavior depend on the module’s implementation and your deployment mode. Verify cache behavior and static-generation support in the installed version’s docs; exact settings are not established by the module listing.
• Template resilience: Social titles can be unexpectedly long, descriptions can be empty, and content may contain characters or fonts your template did not anticipate. Define sensible fallbacks and test representative content.
• External assets: If a template uses fonts or images from another host, test whether they are available in the chosen rendering environment. The module’s listing alone does not guarantee that every asset-loading setup works in every runtime.
• Image optimization: Nuxt Image can transform ordinary site images, but that is distinct from creating per-route OG artwork. Avoid adding an optimization dependency solely because you need a social card.
• Costs: No independent benchmark or pricing claim is established here. Check the module and hosting provider’s current terms and measure build or runtime usage in your own deployment before estimating cost.

6. Troubleshooting

Symptom	Likely cause	What to check
Preview shows no image	The tag is missing from server-rendered HTML, or the image URL cannot be fetched publicly.	Inspect the deployed HTML source and open the exact image URL without authentication.
Every page shows the same artwork	A single static ogImage was configured globally.	That is expected for the static approach. Use a route-aware generation method only after confirming its supported syntax in current module docs.
Preview has old title or image	The social platform may have cached an earlier scrape.	Use the platform’s sharing debugger to request a refresh; also check the current HTML and image response first.
Image works locally but fails after deployment	The deployed runtime, base path, CDN, prerender setup, or remote asset access differs from development.	Test the public URL on the deployed host. Verify the module’s documented support for the selected deployment target.
New module setup differs from an online example	The example may target another Nuxt or module version.	Check the installed package version and follow its matching detailed documentation. The module directory’s listing is not a substitute for versioned implementation instructions.
Image optimization fails across build environments	Nuxt Image documents a possible Sharp installation issue when build and deployment platforms differ.	Consult the Nuxt Image installation guidance if you use that separate optimization module; do not attribute this warning to nuxt-og-image.

7. Or skip the browser setup

If your goal is to capture a page as an image, ScreenshotNeo is a website screenshot API and MCP server. A screenshot is useful as a captured page image; it is not a substitute for a branded, data-driven OG template when each route needs custom artwork. The API accepts a URL and returns a screenshot or PDF. See ScreenshotNeo and the API documentation.

One-call cURL example:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

Node.js:

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

• Cookie banners, newsletter popups, and chat widgets are removed before the shot; each cleanup step can be turned off.
• Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed. Response headers report the page verdict and billing status.
• An MCP server gives AI agents tools for screenshots, page information, and PDF capture.
• The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

Sign up for 1,000 free screenshots a month, with no card.

FAQ

Does putting an image in public/ generate one for every route?

No. It serves a static file. If you set that path globally, all pages use the same image.

Is Nuxt Image the module for generating social cards?

No. Nuxt Image handles image optimization and transformation. The Nuxt Modules listing points to nuxt-og-image for OG image generation.

Can I copy a complete dynamic template example from this guide?

No. Exact template and route-data syntax depends on the module version and was not verified in the available documentation. Use the current detailed module docs for those implementation details.

Should a screenshot be my social preview image?

Only if a page capture is the intended design. A screenshot API captures a page; a branded card with route-specific content calls for a template or image-generation workflow.

Sources

• Nuxt Modules: nuxt-og-image
• Nuxt 4: public directory
• Nuxt 4: SEO and meta
• Nuxt 3 migration overview and end-of-life notice
• Nuxt Image documentation