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.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 10/09/2024 at 12:27
Last Updated on 10/09/2024 at 12:39
<p>A flower that represents NextJS with the text "Metadata" beneath it.</p>

Add and export the generateMetadata function top of each page to add SEO to a NextJS page.

Subscribe

The 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.

How the NextJS app router works

If you wish to read the official documentation on adding metadata, consult the link below.

NextJS: Pages and Layouts

Static

<p>A screenshot of the NextJS documentation showing how to add static metadata to pages.</p>

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

NextJS: Pages and Layouts

Dynamic Metadata

<p>A screenshot of VSCode showing a dynamic route within the student archive project.</p>

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.

Search our Blog

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
SubscribeContact UsVisit our BlogView our ServicesView our Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe