Open Graph and Twitter Images in Next.js

The opengraph-image and twitter-image file conventions allow you to set Open Graph and Twitter images for a route segment in Next.js. These images appear when a user shares a link to your site on social networks and messaging apps.

Setting Open Graph and Twitter Images

There are two ways to set these images:

Using image files (.jpg, .png, .gif)
Using code to generate images (.js, .ts, .tsx)

Using Image Files

Place an opengraph-image or twitter-image file in the route segment. Next.js will automatically add the appropriate tags to your app's <head> element.

Supported file conventions:

File convention	Supported file types
opengraph-image	.jpg, .jpeg, .png, .gif
twitter-image	.jpg, .jpeg, .png, .gif
opengraph-image.alt	.txt
twitter-image.alt	.txt

Example <head> output for opengraph-image:

<meta property="og:image" content="<generated>" />
<meta property="og:image:type" content="<generated>" />
<meta property="og:image:width" content="<generated>" />
<meta property="og:image:height" content="<generated>" />

Using Code to Generate Images

You can programmatically generate images using code by creating an opengraph-image or twitter-image route that exports a default function.

Supported file types: .js, .ts, .tsx

Example using the ImageResponse API from next/og:

// app/about/opengraph-image.tsx
import { ImageResponse } from 'next/og'

export const runtime = 'edge'

export const alt = 'About Acme'
export const size = {
  width: 1200,
  height: 630,
}

export const contentType = 'image/png'

export default async function Image() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        About Acme
      </div>
    ),
    {
      ...size,
    }
  )
}

Advanced Usage

Using External Data

You can use the params object and external data to generate the image:

export default async function Image({ params }: { params: { slug: string } }) {
  const post = await fetch(`https://.../posts/${params.slug}`).then((res) =>
    res.json()
  )

  return new ImageResponse(
    (
      <div style={{ /* ... */ }}>
        {post.title}
      </div>
    ),
    {
      ...size,
    }
  )
}

Using Local Assets

You can use local assets in your generated images. The approach differs slightly between Edge and Node.js runtimes:

Edge Runtime

export const runtime = 'edge'

export default async function Image() {
  const logoSrc = await fetch(new URL('./logo.png', import.meta.url)).then(
    (res) => res.arrayBuffer()
  )

  return new ImageResponse(
    (
      <div style={{ /* ... */ }}>
        <img src={logoSrc} height="100" />
      </div>
    )
  )
}

Node.js Runtime

import { join } from 'node:path'
import { readFile } from 'node:fs/promises'

export default async function Image() {
  const logoData = await readFile(join(process.cwd(), 'logo.png'))
  const logoSrc = Uint8Array.from(logoData).buffer

  return new ImageResponse(
    (
      <div style={{ /* ... */ }}>
        <img src={logoSrc} height="100" />
      </div>
    )
  )
}

By using these techniques, you can create dynamic and customized Open Graph and Twitter images for your Next.js application, improving its appearance when shared on social media platforms.