← buildlog og

Dynamic OG images for Nuxt

Use useSeoMeta in the page component. The API returns a 1200×630 PNG, cached at the edge.

<script setup>
const { data: post } = await useAsyncData(() => queryContent(useRoute().path).findOne())
const og = 'https://og.sadana.app/api/og?' + new URLSearchParams({ title: post.value.title, subtitle: post.value.description, site: 'yourblog.dev' })
useSeoMeta({ ogImage: og, twitterCard: 'summary_large_image', twitterImage: og })
</script>

nuxt-og-image renders images in-app; the URL approach needs no extra module.

Preview

Example OG image for Nuxt

Parameters

title     required, up to 200 chars
subtitle  optional
site      optional footer text
theme     light | dark (Pro)
key       Pro license key (removes watermark)

Check it

After deploying, paste a URL into a card validator (e.g. opengraph.xyz) or share it in a private Slack/Discord channel. Social crawlers cache images, so change the URL (e.g. add &v=2) to force a refresh.

Try the generator

Other frameworks

Next.js · Astro · Hugo · WordPress · Ghost · SvelteKit · Nuxt · Eleventy (11ty) · Jekyll · Docusaurus · plain HTML