How do you generate dynamic OG images for your website?

Dynamic OG (Open Graph) images make every page on your website show a unique, branded preview image when shared on social media or messaging apps. Instead of one generic image for your entire site, each page gets its own.

Why dynamic OG images matter:

• Posts with custom images get 2-3x more engagement on social media
• They look more professional and trustworthy
• They convey page-specific information (title, author, category)

How to set it up:

1. Design your OG template in Canva

Create a 1200×630px design (standard OG dimensions) with:

• A text layer for the page title
• A text layer for the description or author
• Your brand colors, logo, and background

2. Import into Layerre

Paste your Canva share link. Layerre imports the design and exposes each text/image layer as an API field.

3. Generate per page

At build time (SSG):
During your static site build, loop through all pages and call the Layerre API to generate an OG image for each:

javascript
const templateId = 'YOUR_TEMPLATE_UUID';
const res = await fetch(`https://api.layerre.com/v1/template/${templateId}/variant`, {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    overrides: [
      { layer_id: 'TITLE_LAYER_UUID', properties: { text: page.title } },
      { layer_id: 'AUTHOR_LAYER_UUID', properties: { text: page.author } },
    ],
    export_type: 'png',
  }),
});
const variant = await res.json();
// variant.url — use in og:image

On request (ISR or serverless):
Generate and cache the OG image the first time someone shares a link. Subsequent requests serve the cached version.

4. Set the meta tag

Add the generated image URL to your page's <meta> tags:

html
<meta property="og:image" content="https://your-cdn.com/og/your-page.png" />

Frameworks that work well with this:

• Next.js (API routes or getStaticProps)
• Astro (build-time generation)
• Remix (loader functions)
• Any SSG/SSR framework with build hooks