NextJS Add Metadata

In this post, we'll add metadata to our NextJS blog to help search engines discover and index our content.

The metadata is the tags that are placed in your head tag such as title, description, and keywords. This metadata is used by search engines to understand what your page is about and to help them index your content.

Within NextJS you can define your metadata at a layout level or a page level. You can even setup the page level to inherit from the layout level. This allows you to set the default values on the layout and then override then on each page.

There are 2 way to define the metadata in your NextJS app the static or dynamic way.

Static Metadata

To define static metadata, export a Metadata object from a app/layout.tsx or static app/page.tsx file.

In your app/layout.tsx file you can define the default metadata for your site:

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: {
    template: "%s | Paulund",
    default: "Paulund - Full Stack Developer",
  },
  authors: [{ name: "Paulund" }],
  referrer: "origin-when-cross-origin",
  description: "",
  keywords: [
    "Paulund",
    "code",
    "web development",
    "javascript",
    "react",
    "node.js",
    "next.js",
    "web dev",
    "html",
    "css",
    "laravel",
  ],
  creator: "Paulund",
  publisher: "Paulund",
  metadataBase: new URL("https://paulund.co.uk"),
  alternates: {
    canonical: "https://paulund.co.uk",
  },
};

Notice the title parameter it has before template and default.

title: {
  template: "%s | Paulund",
  default: "Paulund - Full Stack Developer",
},

The template is the format of the title and the default is the default value for the title. The %s is a placeholder for the title of the page. This is the process of allowing the page to override the default value.

Dynamic Metadata

If you need a more dynamic way to define the metadata you can export the generateMetadata function from the app/layout.tsx or app/page.tsx file.

import type { Metadata } from "next";

export async function generateMetadata(): Promise<Metadata> {
  return {
    title: {
      template: "%s | Paulund",
      default: "Paulund - Full Stack Developer",
    },
    authors: [{ name: "Paulund" }],
    referrer: "origin-when-cross-origin",
    description: "",
    keywords: [
      "Paulund",
      "code",
      "web development",
      "javascript",
      "react",
      "node.js",
      "next.js",
      "web dev",
      "html",
      "css",
      "laravel",
    ],
    creator: "Paulund",
    publisher: "Paulund",
    metadataBase: new URL("https://paulund.co.uk"),
    alternates: {
      canonical: "https://paulund.co.uk",
    },
  };
}

This function will be called on every page render and will return the metadata for that page.

Default Fields

There are two fields that are returned on every page this is the charset tag and the viewport tag.

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

These are the default values for the meta tags if you want to override them you'll need to use viewport object or the generateViewport function.

Generate Viewport

Override the Metadata In Post

The above will create the meta tags for you but we need to be able to override these. Inside the app/[slug]/page.tsx file we're going to use the generateMetadata function, inside here we need to fetch the post and return the metadata we want to override for that post.

type Params = {
  params: {
    slug: string;
  };
};

export function generateMetadata({ params }: Params) {
  const post = getPostBySlug(params.slug);
  if (!post) {
    return {
      title: "Post Not Found",
    };
  }

  return {
    title: post.title,
    description: post.description,
    keywords: [...post.tags],
    alternates: {
      canonical: `/${post.slug}`,
    },
  };
}

This will overide the title, description, keywords and canonical URL for the post.

The main difference we need on the blog posts in the Canonical tag, this is very important for SEO on your blog posts.

The canonical tag is a link tag that tells search engines the preferred URL for a page. This is important for SEO as it tells search engines which URL to index and which URL to ignore.

Google calls the canonical tag a hint and not a directive, this means that Google will use this as a hint but it's not guaranteed to use it. This is why it's important to make sure the canonical tag is set correctly.

When your post is shared on other platforms the canonical tag is used to determine which page is the original. This is why it's important to make sure the canonical tag is set correctly. This will allow you to post the same article on multiple sites, taking advantage of high traffic websites like dev.to and medium but tell search engines which one is the original.