Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteFor route-specific social preview images in a Nuxt project, start with nuxt-og-image, the Nuxt module listed for generating Open Graph images from Vue components or page screenshots. If every route can share the same card, a static image in public/ is simpler. The module’s listing names its installation command, renderers and deployment targets; confirm its current documentation and your Nuxt/runtime versions before implementing route-specific templates.
Choose between a fixed image and generated cards
| Need | Nuxt approach | What it does |
|---|---|---|
| One image for the whole site | Put an image in public/ and reference it with useSeoMeta. |
Serves the same fixed asset; it does not generate a distinct image for each route. Nuxt 4 documents that public-directory files are served from the root and are not modified by the build. |
| Branded or page-specific social cards | Evaluate nuxt-og-image. |
The module listing describes generating images from Vue components or page screenshots, with built-in and custom templates. Exact route-data binding and configuration should be checked in the current module documentation. |
| Complex templates needing browser rendering | Use the module’s listed browser-prerendering approach, if supported by your deployment setup. | Confirm prerender behavior and runtime compatibility for your project before relying on it. |
| Optimize ordinary site images | Use @nuxt/image for image optimization and transformation. |
This is a separate task from creating social preview cards. Its documentation notes a Sharp cross-platform installation issue that can occur when build and deployment platforms differ; that warning is not evidence of an issue in nuxt-og-image. |
Set one shared social image
For a single card shared by all pages, place og-image.png in the Nuxt 4 project’s public/ directory, then set the Open Graph image metadata:
As an Amazon Associate I earn from qualifying purchases.
useSeoMeta({
ogImage: '/og-image.png'
})Because public files are served from the site root, the image URL is /og-image.png. This setting is a fixed reference, not an automatic per-route image generator. Nuxt 2 called this directory static/; use the directory convention for your framework version.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Generate images with nuxt-og-image
The Nuxt Modules listing identifies nuxt-og-image for generating OG images from Vue components or screenshots of pages. Its listed options include built-in templates, custom Vue templates, Satori or Takumi rendering, and browser prerendering for complex templates. It also advertises a DevTools playground with hot module replacement and support for Vercel Edge, Netlify Edge and Cloudflare Workers. These are module listing claims, not independent compatibility tests.
Install the module
The module listing shows this installation entry point:
npx nuxi@latest module add og-imageUse the module’s listing and linked detailed documentation to check the current configuration instructions. The listing showed nuxt-og-image v6.10.1 alongside a separate page version marker of v4.5.2; neither should be read as the Nuxt framework version. Check compatibility against the versions in your own project.
Plan the template and route data
The high-level module listing supports Vue-based or screenshot-based image generation, but the exact Vue template syntax, route-data binding, output dimensions, metadata fallback behavior, caching, and static-generation configuration are not established here. Do not assume an API shape or copy an unverified template. Follow the current detailed module instructions for those details, then verify that each route renders the intended title, image URL, and social metadata.
Choose a rendering path
- Built-in or custom Vue template: consider this for consistent branded cards whose contents vary by page.
- Satori or Takumi: these are the renderers named on the module listing; confirm their supported features and project requirements in the current docs.
- Browser prerendering: the listing presents this for complex templates. Check deployment support and prerender behavior before choosing it.
Keep framework and deployment versions in view
As of 3 October 2026, Nuxt’s official documentation identifies Nuxt 3.21.11 and says Nuxt 3 reached end of life on 31 July 2026, with no further bug fixes or security patches. For a new project, target Nuxt 4; for an existing Nuxt 3 project, account for its end-of-life status or the extended support option Nuxt identifies. Verify current module compatibility rather than assuming that an edge-runtime listing guarantees compatibility with every project configuration.
Validate the published result
- Deploy or prerender using the mode your project will actually serve, and open a page’s HTML source.
- Check that its Open Graph image metadata resolves to an absolute, publicly reachable image URL and that the returned image is the intended card.
- Test representative routes, including pages with long titles or missing optional data, to catch template and fallback problems.
- Use the free Social Share Debugger recommended by the module listing to inspect how a social platform reads the page. Exact preview behavior can depend on the platform’s crawler and cache.
Common problems and how to address them
- The same card appears on every route: a shared
public/image is static. Use the module’s route-aware setup from its current docs if cards must vary by page. - The image is missing in a social preview: check the rendered metadata URL, public reachability and deployed image response; then re-fetch the page in the platform’s debugger.
- A template or install example does not match your project: check Nuxt and module versions and follow the current detailed docs. Do not treat the module listing’s separate version markers as framework compatibility guarantees.
- Image optimization fails across environments: if the issue concerns
@nuxt/image, consult its Sharp installation guidance when build and deployment platforms differ. This is distinct from OG image generation.
Or skip the browser setup
If your task is capturing a page as an image rather than generating a designed, route-specific OG template, ScreenshotNeo is a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP or PDF; its cookie-banner, popup and chat-widget cleanup is separate from Nuxt’s social-card generation, so it is not a replacement for a per-route OG template.
cURL example and API documentation:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo removes cookie banners, popups and chat widgets before the shot. Bot checks, blank pages and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Frequently Asked Questions
Does nuxt-og-image optimize regular website images?
No. The module is for generating social preview images; Nuxt Image is the separate image optimization and transformation module.
Can I use a static image for every Nuxt route?
Yes. Put it in the public directory and reference it with useSeoMeta; it will be one shared image, not a different generated card per route.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
