Metadata and SEO

Metadata is the information about a page rather than in it: its title, a short description, the image that appears when someone shares the link, and the canonical address of the page.

It is easy to treat as an afterthought because it changes nothing on screen. It shows up in four places that matter: the browser tab, search results, the preview card in a chat or social app, and the accessible page title a screen reader announces on navigation.

In Next.js you set it by exporting from the same file as the page, which keeps a route's metadata next to the route.

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Employee directory",
  description:
    "Search the employee directory by name, department or role, and open a profile for contact details.",
  alternates: { canonical: "/employees" },
  openGraph: {
    title: "Employee directory",
    description: "Search by name, department or role.",
    url: "/employees",
  },
};

export default async function EmployeesPage() {
  // ...
}

• The export sits in the page file and Next.js reads it when rendering the route. Nothing has to be registered anywhere else.
• The Metadata type means a misspelled field is a compile error rather than a tag that silently never appears.
• The description is a complete sentence written for a person deciding whether to click. Search engines may show it or may use text from the page, and either way it is what the preview card uses.
• alternates.canonical states the address this page should be indexed under. The relative path works because the root layout sets metadataBase, which supplies the domain.
• A root layout usually sets a title template and defaults, so each page supplies its own part and the site name is appended once, in one place.

import type { Metadata } from "next";
import { getCourseBySlug } from "@/data/courses";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const course = await getCourseBySlug(slug);

  // A URL with no course: return nothing rather than inventing a title.
  if (!course) return {};

  return {
    title: course.title,
    description: course.shortDescription,
    alternates: { canonical: "/courses/" + course.slug },
    openGraph: {
      title: course.title + " | Anvi Learning Academy",
      description: course.shortDescription,
      url: "/courses/" + course.slug,
      type: "article",
    },
  };
}

• generateMetadata replaces the static export when the values depend on the route. It receives the same params as the page and can await data.
• The data call is deduplicated with the identical call in the page component during the same render, so this does not double your queries.
• Returning an empty object for an unknown slug avoids a title like "undefined". The page itself calls notFound(), and the metadata should not contradict it.
• The Open Graph title includes the site name because a preview card appears with no other context. The page title does not need it repeated if the layout's template already adds it.
• Use generateMetadata only when the values genuinely vary. For a fixed page the static export is less code and less to go wrong.

The reason to do this per route rather than once for the site is that a title and description identify a page, and an identical one on every page identifies nothing.

Consider what a duplicated title costs. In search results, twenty pages look the same and a searcher cannot tell which one answers their question. When someone shares a lesson link in a team chat, the card says the site name and a generic tagline rather than the lesson's subject. A user with fifteen tabs open cannot find yours. And a screen reader user navigating between pages hears the same announcement each time, with no confirmation that anything changed.

None of that is about ranking. It is about a link being self-describing wherever it appears, which is worth the three lines per route it takes.