Defining Metadata

Next.js has a Metadata API to define your application metadata (e.g., meta and link tags inside your head HTML element) for improved SEO and web shareability.

Static Metadata

Export a static metadata object from a layout.js or page.js file.

tsx
export const metadata = {
  title: 'Next.js App',
  description: 'Generated by create next app',
}

Dynamic Metadata

Use existing data to dynamically generate metadata by exporting a generateMetadata function.

tsx
export async function generateMetadata({ params }) {
  return {
    title: `Post ${params.id}`,
  }
}

Open Graph Images

The Metadata API supports adding Open Graph images. You can also generate dynamic OG images using file-based conventions like opengraph-image.tsx inside your route segments.