OG Image

Overview

OG Image (Open Graph Image) is the preview image shown when a link is shared on social media or messaging apps. Having a well-designed OG image improves how your links appear when shared on Twitter/X, Facebook, LinkedIn, Slack, and other platforms.

Laioutr projects can use Nuxt OG Image to generate these images from Vue templates. It is not bundled with frontend-core and must be installed separately.

Installation

npx nuxi module add nuxt-og-image

Configuration

Set your site URL using Nuxt Site Config:

// nuxt.config.ts
export default defineNuxtConfig({
  site: {
    url: 'https://yourstore.com',
  },
});

Example: OG Image from Section Data

Call defineOgImage() from the section that renders the page's main entity, and feed it that entity's data. A product detail section declares a singleEntity query field and receives the resolved Product as a prop — see Consuming Query Fields.

<script setup lang="ts">
import type { ClientEntity } from '@laioutr-core/orchestr/types';

// Resolved from the section's query field. Undefined while the query loads.
const { product } = defineProps<{ product: ClientEntity | undefined }>();

defineOgImage({
  component: 'OgImageDefault',
  title: product?.components.base.name,
  description: product?.components.seo?.description,
});
</script>

You can create custom OG image templates as Vue components in components/OgImage*.vue and reference them by name in the component field.

Further Reading

For custom templates, renderer options (Satori, Chromium), DevTools integration, and advanced configuration, see the Nuxt OG Image documentation.