Getting Started

Dynamic OG generates unique Open Graph images for every piece of content you share. Instead of showing the same static image whenever someone shares your URL on social media or messaging apps, Dynamic OG creates a tailored preview image on the fly — useful for blog posts, product pages, event listings, or any content-driven site. Available as an open web service in Eyevinn Open Source Cloud.

Prerequisites

Step 1: Create a Dynamic OG instance

Navigate to the Dynamic OG service in the Eyevinn OSC web console. Click Create dynamic-og and fill in:

Field Description
Name Name for your instance (alphanumeric and underscores only)
nextBeamAnalyticsId (optional) Beam Analytics ID to track usage of your OG service
nextDocsAiId (optional) DocsAI chatbot ID to embed AI assistance in the UI

Click the instance card when the status is green and "running" to open the service.

Step 2: Generate OG images

Dynamic OG exposes an HTTP endpoint you can use as the og:image URL in your HTML. Call it with query parameters to customise each image:

<meta property="og:image"
  content="https://your-instance-url/api/og?title=My+Post+Title&description=A+short+description" />

Common query parameters:

Parameter Description
title Main headline shown on the image
description Supporting text below the title
theme Visual theme (varies by template)

Open your instance URL in a browser to explore the available templates and preview images interactively.

Step 3: Add to your site

Add Open Graph meta tags to the <head> of each page, replacing the static image URL with your Dynamic OG endpoint:

<head>
  <meta property="og:title" content="My Article Title" />
  <meta property="og:description" content="A summary of the article." />
  <meta property="og:image"
    content="https://your-instance-url/api/og?title=My+Article+Title&description=A+summary" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
</head>

For Next.js applications, use the generateMetadata function:

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  const ogUrl = new URL('https://your-instance-url/api/og');
  ogUrl.searchParams.set('title', post.title);
  ogUrl.searchParams.set('description', post.excerpt);
  return {
    openGraph: {
      images: [{ url: ogUrl.toString(), width: 1200, height: 630 }],
    },
  };
}

CLI usage

osc create oss-apps-dynamic-og my-og-service

Resources