ContentImage

Automatic featured images for Next.js

Last updated:

In a Next.js site, render each article's OG image through the ContentImage API at build or publish time and point the page's openGraph image at the returned URL. The images are PNG files served with long cache headers.

Pattern

Call the API once per article, store the returned URL with the article, and use it in generateMetadata.

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug) // has post.ogImage from ContentImage
  return {
    title: post.title,
    openGraph: { images: [{ url: post.ogImage, width: 1200, height: 630 }] },
  }
}

To produce post.ogImage, call the render endpoint when the article is created:

curl -X POST https://contentimage.io/api/v1/render \
  -H "Authorization: Bearer ci_..." \
  -H "Content-Type: application/json" \
  -d '{"url":"https://example.com/my-article","sizes":["og","featured"]}'

ContentImage is free during the beta. No card needed.

Get started free

FAQ

Why not generate it on every request?
Rendering takes seconds. Generate once when the article is published and store the URL.