Metadata for search and sharing

Search engines and chat apps read a page's <title> and meta tags to show a link preview. In the App Router you never write those tags by hand: you export an object, and Next.js renders the tags. A fixed page exports metadata; a page whose title depends on data exports the async generateMetadata.

import type { Metadata } from "next";

// static
export const metadata: Metadata = {
  title: "The Armory",
  description: "Every blade Brunn ever forged.",
};

// or dynamic, for a [slug] page
export const generateMetadata = async ({ params }: Props): Promise<Metadata> => {
  const { slug } = await params;
  const hall = await getHall(slug);
  return { title: hall.name, description: hall.desc };
};

• Export metadata or generateMetadata from a page.tsx or layout.tsx: never both in one file.
• Next.js renders the tags into <head> on the server, so crawlers see them without running JavaScript.
• An opengraph-image.tsx file can even generate the share image with ImageResponse.