How to add static or dynamic metadata to a NextJS page
Add and export the generateMetadata function top of each page to add SEO to a NextJS page.


Add and export the generateMetadata function top of each page to add SEO to a NextJS page.
SubscribeThe following post explains how to add static or asynchronous metadata to pages within the app router of a NextJS project.
If you are not familiar with the NextJS app router, consult the link below.
If you wish to read the official documentation on adding metadata, consult the link below.
Static

To add static metadata, follow the example in the NextJS documentation.
Dynamic Metadata

For dynamic metadata, add the generateMetadata function at the top of your page.tsx file.
Make sure that it:
- Is asynchronous.
- Is exported.
- Returns a Promise<Metadata>, where Metadata is imported as follows: import type { Metadata } from 'next';
Looking to learn more about NextJS, ReactJS or web development?
Search our blog to find educational content on NextJS, ReactJS and web development.