Back to Docs

Vue framework

Nuxt OG Image Integration

Add automatic MyOG.social images to Nuxt pages with useSeoMeta, route data, and server-rendered head tags.

Prerequisites

  • A Nuxt app with SSR or prerendered pages enabled
  • A production site URL available in runtime config
  • A MyOG.social account with your domain added

How MyOG fits Nuxt

Nuxt's useSeoMeta composable is the right MyOG integration point because it renders typed Open Graph and Twitter tags into the document head.

Use a shared helper to build the MyOG image URL from the current route, then call useSeoMeta in pages or layouts that already know the canonical URL.

For generated routes, keep the page URL server-rendered. Social crawlers should receive og:image in the initial HTML, not after client-side navigation.

1

Choose a layout

MyOG detects page content and branding automatically. The layout only controls image composition.

2

Add the Nuxt code

useSeoMeta helper

Use this in a page or shared SEO composable.

const route = useRoute()
const siteURL = "https://example.com"

function getMyOGImageURL(path: string) {
  const pageURL = siteURL + path
  return `https://api.myog.social/og?url=${encodeURIComponent(pageURL)}&template=screenshot-right`
}

const myogImageURL = computed(() => getMyOGImageURL(route.path))

useSeoMeta({
  ogImage: () => myogImageURL.value,
  ogImageWidth: "1200",
  ogImageHeight: "630",
  twitterCard: "summary_large_image",
  twitterImage: () => myogImageURL.value,
})

Move siteURL into runtime config in a real app, then keep the helper shared across layouts and pages.

3

Place it correctly

  1. Add a helper that builds the MyOG URL from your production origin and route path.
  2. Call useSeoMeta in a page, layout, or composable that runs during SSR.
  3. Use a computed getter when route data can change, or a plain value for static metadata.
  4. Deploy, then inspect the production page source for og:image and twitter:image.

Avoid duplicate og:image tags

If a module, layout, or CMS integration already sets ogImage, replace that value with MyOG instead of adding a second image tag. Multiple og:image values are allowed, but crawlers often pick the first suitable one.

Dynamic pages

Use route.path for simple pages and explicit canonical paths for dynamic content. If your content comes from a CMS, build the canonical URL from the slug you publish, not from preview or draft URLs.

Test the result

  • Check the rendered HTML of a production URL, not only Nuxt devtools.
  • Test one static route and one dynamic route.
  • Confirm runtime config points at the public domain, not localhost.

Start with the MyOG Open Graph Checker, then refresh social platform caches if needed.

Known limitations

Client-only pages cannot reliably provide OG tags to social crawlers.
Preview or draft routes cannot generate useful public MyOG images.
A native Nuxt ogImage module may emit competing image tags if left enabled for the same route.

Sources

Ready to get started?

Sign up for free and add generated social images to Nuxt routes.

Already have an account?

cdf733b534ea2f2ed964d150330b323c44837e4f