OG Images for Frameworks

Generate dynamic Open Graph images for your Next.js, Nuxt, or Astro site using URLPix.

Plan Requirement

OG image generation requires a Pro plan or higher.

Next.js (App Router)

Create a dynamic OG image endpoint in your Next.js app:

// app/api/og/route.js
export async function GET(request) {
  const { searchParams } = new URL(request.url)
  const title = searchParams.get('title') || 'My Site'

  const params = new URLSearchParams({
    template: 'blog-post',
    title,
    author: 'My Blog',
    format: 'png',
  })

  const response = await fetch(
    `https://api.urlpix.com/v1/og?${params}`,
    { headers: { 'X-API-Key': process.env.URLPIX_API_KEY } }
  )

  const image = await response.arrayBuffer()
  return new Response(image, {
    headers: { 'Content-Type': 'image/png', 'Cache-Control': 'public, max-age=86400' },
  })
}

In your page metadata:

// app/blog/[slug]/page.js
export function generateMetadata({ params }) {
  return {
    openGraph: {
      images: [`/api/og?title=${encodeURIComponent(params.slug)}`],
    },
  }
}

Nuxt 3

Create a server route:

// server/routes/og.get.js
export default defineEventHandler(async (event) => {
  const { title } = getQuery(event)

  const params = new URLSearchParams({
    template: 'default',
    title: title || 'My Site',
    format: 'png',
  })

  const response = await fetch(
    `https://api.urlpix.com/v1/og?${params}`,
    { headers: { 'X-API-Key': useRuntimeConfig().urlpixApiKey } }
  )

  setHeader(event, 'Content-Type', 'image/png')
  setHeader(event, 'Cache-Control', 'public, max-age=86400')
  return Buffer.from(await response.arrayBuffer())
})

Add to your nuxt.config.ts:

export default defineNuxtConfig({
  runtimeConfig: {
    urlpixApiKey: process.env.URLPIX_API_KEY,
  },
})

Use in page head:

<script setup>
const title = 'My Page Title'
useHead({
  meta: [
    { property: 'og:image', content: `/og?title=${encodeURIComponent(title)}` },
  ],
})
</script>

Astro

Create an API endpoint:

// src/pages/og.png.js
export async function GET({ request }) {
  const url = new URL(request.url)
  const title = url.searchParams.get('title') || 'My Site'

  const params = new URLSearchParams({
    template: 'default',
    title,
    format: 'png',
  })

  const response = await fetch(
    `https://api.urlpix.com/v1/og?${params}`,
    { headers: { 'X-API-Key': import.meta.env.URLPIX_API_KEY } }
  )

  return new Response(await response.arrayBuffer(), {
    headers: { 'Content-Type': 'image/png' },
  })
}

In your layout:

---
const { title } = Astro.props
---
<meta property="og:image" content={`/og.png?title=${encodeURIComponent(title)}`} />

Direct URL Approach

For static sites or simpler setups, link directly to the URLPix API:

<meta property="og:image"
  content="https://api.urlpix.com/v1/og?template=default&title=My%20Page&api_key=sk_live_YOUR_KEY" />

WARNING

Using api_key in a public meta tag exposes your key. Use this only for read-only keys or consider proxying through your backend.