generateImageMetadata is a Next.js App Router API used to generate metadata for dynamic images. It is commonly used with Open Graph and Twitter image routes to define image metadata for better SEO and social media sharing.

• Generates metadata for multiple dynamic image variants.
• Used with Open Graph and Twitter image routes.
• Supports dynamic image generation based on route parameters.
• Improves SEO and social media sharing.

Syntax:

export function generateImageMetadata() {
  return [
    {
      id: "1",
      alt: "Image description",
      size: {
        width: 1200,
        height: 630,
      },
      contentType: "image/png",
    },
  ];
}

The generateImageMetadata() function returns an array of image metadata objects. Each object can contain the following properties:

• id: Unique identifier for the generated image.
• alt: Alternative text describing the image.
• size: Width and height of the generated image.
• contentType: MIME type of the generated image (for example, image/png).

Steps to Create a Next.js Project

Follow the steps given below:

Step 1: Create a New Next.js Application

Create a Next.js project using the following commands:

npx create-next-app@latest next-image-metadata-app
cd next-image-metadata-app

Step 2: Project Structure

Create the following files:

next-image-metadata-app/
│
├── app/
│   ├── opengraph-image.js
│   └── page.js
├── package.json
└── ...

Step 3: Create the Home Page

Create the following file:

app/page.js

export default function Home() {
  return (
    <main style={{ padding: "30px" }}>
      <h1>generateImageMetadata Example</h1>
      <p>
        This page demonstrates the use of generateImageMetadata in Next.js.
      </p>
    </main>
  );
}

Step 4: Create an Open Graph Image Route

Create the following file:

app/opengraph-image.js

import { ImageResponse } from "next/og";

export function generateImageMetadata() {
  return [
    {
      id: "default",
      alt: "Next.js Open Graph Image",
      size: {
        width: 1200,
        height: 630,
      },
      contentType: "image/png",
    },
  ];
}

export default async function Image() {
  return new ImageResponse(
    (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          width: "100%",
          height: "100%",
          fontSize: 60,
          background: "#0070f3",
          color: "#fff",
        }}
      >
        Next.js Image Metadata
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

Step 5: Run the Application

Start the development server.

npm run dev

Output: The application displays the home page, while the generateImageMetadata() function generates metadata for the Open Graph image in the background.

Note: generateImageMetadata() does not render any visible UI. It generates metadata for Open Graph and Twitter image routes, which is used internally by Next.js and supported social media platforms.