OGMagicIntegrations
OG Images for Nuxt
Create an image once and reuse its public URL in your page metadata.
Define social metadata with Nuxt's useSeoMeta composable and a saved public image URL. Server rendering or prerendering makes the tags available before browser JavaScript runs.
Quick Start
1. Create and save your image URL
Get a private API key through email access and set OGMAGIC_API_KEY in your server or terminal environment. Run this request when publishing content, then save the returned url with the page:
curl https://www.ogmagic.dev/api/images \
-H "Authorization: Bearer $OGMAGIC_API_KEY" \
-H "Content-Type: application/json" \
-d '{"title":"My article","template":"gradient-mesh"}'
# Save the returned url with your content. Keep the API key private.You can also create an image in the editor and copy its hosted URL. Keep the API key private; the returned image URL is public.
2. Publish it in your Nuxt metadata
Use your saved URL in the example below. Replace any placeholder URL with the creation response's url, or pass it from the stored content field. The dimensions shown are for the default 1200 × 630 image; use the returned dimensions for custom sizes.
<script setup lang="ts">
const title = "My article";
const description = "What this article covers";
const imageUrl = "https://www.ogmagic.dev/images/11111111-1111-4111-8111-111111111111.png";
useSeoMeta({
title,
description,
ogTitle: title,
ogDescription: description,
ogType: "article",
ogImage: imageUrl,
ogImageWidth: 1200,
ogImageHeight: 630,
ogImageAlt: title,
twitterCard: "summary_large_image",
twitterImage: imageUrl,
});
</script>
<template>
<main><h1>{{ title }}</h1></main>
</template>💡 Keep SSR enabled or prerender the route. With CMS content, await server-side data loading before setting metadata and use reactive getters for values that change on navigation. Keep creation credentials in private runtime config, never in runtimeConfig.public.
Reference: Nuxt documentation. After deploying, check the page with the OG tag checker.
Why use OGMagic with Nuxt?
Create once
Repeated identical requests reuse the saved image; social views use no generation credits.
55+ templates
Professional designs out of the box. Customize with JSON options.
Email access
Get your API key without a password or profile. Keep it private; share only image URLs.
Every platform
Optimized 1200×630 images that look great on Twitter/X, Facebook, LinkedIn, Discord, and Slack.
Ready to add OG images to your Nuxt app?
Start with 50 new images per 30 days. Get your API key through an email link.