Set the og:image metadata with Nuxt’s useSeoMeta composable and point it to an absolute image URL that social crawlers can fetch. For example, useSeoMeta({ ogImage: 'https://example.com/og-image.png' }) is enough for a fixed image. Use a shared default for most routes and override it with page data when different pages need different images.
Set a fixed Open Graph image with useSeoMeta
In Nuxt 4, add the metadata in the page or component whose URL will be shared. Nuxt recommends useSeoMeta for common SEO fields because it provides typed keys and helps avoid mistakes in the generated metadata. The ogImage key produces the Open Graph image field.
<script setup lang="ts">
useSeoMeta({
ogTitle: 'My page title',
ogDescription: 'A short description of this page.',
ogImage: 'https://example.com/og-image.png',
twitterCard: 'summary_large_image',
})
</script>Nuxt’s Nuxt 4 guides document this metadata pattern in useSeoMeta and SEO and Meta. Although the example includes title, description and Twitter card metadata, the essential setting for the Open Graph image is ogImage.
Put the image somewhere crawlers can fetch it
A social platform retrieves the image separately from your page. Use an absolute URL on the deployed site or another publicly reachable host; a local filesystem path or development-only address is not enough. Nuxt’s public directory documentation describes the public asset location. For a static image, put the file in the project’s public asset directory and reference its production URL in the metadata.
- Check the deployed page source or rendered HTML for an
og:imagetag with the expected URL. - Open that exact image URL independently and confirm it is reachable without a logged-in browser session.
- Test the deployed route, not just the local development version.
Use one default image or set one per route
Shared site-wide default
If every page can use the same share image, establish it in a shared component such as app.vue. Pages that need a different image can provide their own value. Keep a clear ownership pattern: setting the same fields in both useHead and useSeoMeta can make overrides harder to reason about.
Page-specific image from route data
For a page whose image comes from fetched content, derive the value from that data and use getter syntax so Nuxt can track changes:
const imageUrl = computed(() => page.value?.socialImage ?? 'https://example.com/default-og.png')
useSeoMeta({
ogImage: () => imageUrl.value,
})Make sure the relevant data is available when the page is server-rendered or otherwise included in its initial HTML. Nuxt notes that SEO metadata often does not need client-side reactivity because crawlers primarily inspect the initial page load. Updating a tag only after client rendering can leave a crawler with no usable image metadata.
Choose useSeoMeta, useHead, or static configuration
useSeoMetais the straightforward choice for common SEO fields such asogImage.useHeadprovides broader head customization and can manage reactive metadata.app.headinnuxt.config.tsis suitable for static defaults, but Nuxt documents that it does not support reactive data.
Choose one clear place for each value and inspect the rendered tags when combining page-level and site-level metadata. Nuxt’s SEO and Meta guide covers the broader metadata options.
Free tools Windows power users keep installed
One-click scans. No signup required.
Generate images only when static files are not enough
A conventional image URL does not require an image-generation module. If many pages need custom cards containing page titles or other route-specific content, the optional Nuxt OG Image module can generate og:image output using built-in templates or Vue components. Its listing describes a Nuxt DevTools preview playground, rendering through Satori or Takumi, browser prerendering for complex templates, and page screenshots. The listing showed version 6.10.1; module versions and features can change.
The module listing gives this installation command:
Rank #4
npx nuxi@latest module add og-imageUse a generator when the maintenance cost of creating and serving many distinct images is justified; for a single shared image, a public static file is simpler.
Troubleshoot an image missing from a link preview
The tag is absent from the initial HTML
Check the deployed page’s rendered HTML, not only the browser’s post-rendered DOM. Move the metadata into the page or shared component that renders the route, and ensure route data is ready for the initial output where feasible.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Best Value
The URL works locally but not for a crawler
Replace development or relative paths with the full production URL. Request that URL directly and check that it is publicly accessible. Nuxt’s public asset approach is intended for files served from the site; see the public directory documentation.
The image tag exists but the preview is still wrong
Inspect the actual og:image value and confirm the image endpoint responds. Then use the relevant social platform’s sharing debugger to check its preview. A valid tag does not guarantee that every platform will display an identical preview; platform-specific dimensions, formats and cache behavior are not universal rules.
Two metadata systems appear to conflict
Search the shared layout and the route for duplicate settings in useHead, useSeoMeta or static head configuration. Assign a clear default and route-level override, then verify which tag appears in the final rendered HTML.
Nuxt 3 compatibility
The general ogImage approach is also documented in Nuxt’s versioned Nuxt 3 SEO and Meta guide. That guide is for Nuxt 3.21.11 and states that Nuxt 3 reached end of life on 31 July 2026. For a current implementation, use the Nuxt 4 documentation linked above; if maintaining a Nuxt 3 application, consult its versioned guide and account for its end-of-life status.
Or skip the browser setup
If you need the image itself captured from a rendered web page, ScreenshotNeo is a website screenshot API and MCP server for developers. A single GET request returns an image or PDF; its API documentation is at screenshotneo.com/docs.
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpScreenshotNeo removes cookie banners, newsletter popups and chat widgets before capture. Bot checks, blank pages and failed loads are not billed. Its MCP server lets AI agents take screenshots, and the free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Learn about ScreenshotNeo or sign up for 1,000 free screenshots a month with no card.
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.
