Next.js: Ordering and Merging Metadata

#nextjs #blog #blogging #seo

While putting some finishing touches on my blog, I realized I had not spent much time thinking about metadata. Sure, I had the basic title, description and keywords fields, but maybe I needed more. After reviewing standard metadata names, I decided to add the applicationName, authors, generator, referrer, creator and publisher fields as well.

My root layout file for the blog contains static metadata like this:

export const metadata: Metadata = {
  title: {
    template: '%s | Dave Gray',
    default: "Dave Gray Teaches Code",
  },
  description: "Hello, I'm Dave. 👋 I teach coding and web development skills.",
  applicationName: "Dave Gray's Blog",
  authors: [{ name: "Dave Gray" }],
  generator: 'Next.js',
  keywords: ['dave gray', 'code', 'web development', 'javascript', 'react', 'node.js', 'next.js', 'web dev', 'html', 'css', 'python'],
  referrer: 'origin-when-cross-origin',
  creator: 'Dave Gray',
  publisher: 'Dave Gray',
}

And my dynamic post pages generate specific metadata from the MDX files they receive like this:

export async function generateMetadata({ params: { postId } }: Props) {

    const post = await getPostByName(`${postId}.mdx`)

    if (!post) {
        return {
            title: 'Post Not Found'
        }
    }

    const { meta } = post

    return {
        title: meta.title,
        description: meta.description,
        keywords: [...meta.tags],
    }
}

At this point, I began to wonder if I needed to add the other metadata fields to my dynamically generated post pages...

I referenced the Next.js docs and was glad to see Next.js supports Metadata Ordering and Metadata Merging.

Next.js follows an evaluation order for metadata beginning with the root layout, followed by nested layouts and finally, evaluating any specific page file.

Following the evaluation order, exported Metadata objects are then shallowly merged together. This means the static Metadata fields I provided in my root layout do not need to be duplicated in my blog post page files. The Metadata is merged and still represented in each generated page. Any field I provide in the page file will overwrite the same field from the parent layout file or files, too.

Nice!

With the basic Metadata conquered, I then realized I need to dive-in and learn about more Metadata I can provide including (but not limited to):