Next.js Metadata API Examples

Quick answer: what should a Next.js metadata generator create?

A good Next.js metadata generator should create a typed App Router starter for title, description, canonical URL, Open Graph fields, Twitter cards, and metadataBase. That covers the technical SEO fields most pages need before page-specific content strategy begins.

Static metadata example

Use a static `metadata` export when the page title, description, canonical URL, and social preview do not depend on params or fetched data.

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "JSON to Zod Generator",
  description: "Generate Zod schemas from JSON samples.",
  alternates: {
    canonical: "/tools/json-to-zod",
  },
  openGraph: {
    title: "JSON to Zod Generator",
    description: "Generate Zod schemas from JSON samples.",
    url: "/tools/json-to-zod",
    type: "website",
  },
};

generateMetadata example

Use `generateMetadata` when metadata depends on route params, fetched content, or a database record. Keep the generated starter as the shared shape, then fill in dynamic values near the route.

import type { Metadata } from "next";

type PageProps = {
  params: Promise<{ slug: string }>;
};

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);

  return {
    title: post.title,
    description: post.excerpt,
    alternates: {
      canonical: "/blog/" + slug,
    },
    openGraph: {
      title: post.title,
      description: post.excerpt,
      url: "/blog/" + slug,
      type: "article",
    },
  };
}

metadataBase and canonical URLs

Set `metadataBase` in the root layout when URL-based metadata fields use relative paths. Then keep `alternates.canonical`, `openGraph.url`, and image paths consistent across pages.

import type { Metadata } from "next";

export const metadata: Metadata = {
  metadataBase: new URL("https://example.com"),
  alternates: {
    canonical: "/pricing",
  },
  openGraph: {
    url: "/pricing",
    images: "/og/pricing.png",
  },
};

Open Graph and Twitter fields

Social preview metadata should reuse the same title and description that search engines see, then add preview images, site name, locale, and card type when the page needs richer sharing.

• Use one source title and description before customizing per platform.
• Use absolute image URLs through `metadataBase` or explicit URLs.
• Keep Open Graph URL aligned with canonical URL unless a campaign page intentionally differs.

Static vs dynamic metadata

Prefer static metadata for simple pages, docs, tool pages, and landing pages. Use `generateMetadata` only when the metadata depends on route params or content fetched at request/build time.

• Static metadata is easier to review and test.
• Dynamic metadata is better for blog posts, product pages, docs pages, and user-facing records.
• A generator is useful for both paths because the field shape stays consistent.

Review checklist

Before shipping generated metadata, verify that the title fits the search result, the description matches page intent, and the canonical URL matches the final public route.

• Check title, description, canonical, Open Graph URL, and Twitter card output.
• Confirm dynamic routes do not generate duplicate canonical URLs.
• Use page-specific social images only when they add useful context.
• Keep manual edits close to the page that owns the metadata.

Next.js metadata workflow map

Use FrameworkKit to generate the starter code, then review the output before shipping it in production.

Next Metadata resources

FAQ

Related comparisons

Related tools