Next.js metadata generator

Ready to paste into app/layout.tsx.

import type { Metadata, Viewport } from "next";

export const metadata: Metadata = {
  metadataBase: new URL("https://example.com"),
  title: {
    default: "Example: Project Tracking for Small Teams",
    template: "%s | Example",
  },
  description: "Track projects, deadlines and files in one place. Built for teams of 2 to 20, with a free plan.",
  applicationName: "Example",
  // "./" gives every page its own canonical URL, without the query string.
  alternates: { canonical: "./" },
  // No title or description here, so each page's own are used.
  openGraph: {
    type: "website",
    siteName: "Example",
    locale: "en_US",
    url: "./",
    images: [{ url: "/og-image.png", width: 1200, height: 630, alt: "Example project board" }],
  },
  twitter: { card: "summary_large_image" },
  robots: { index: true, follow: true },
};

// viewport and themeColor go in their own export, not in metadata.
export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  themeColor: "#ffffff",
};

// app/about/page.tsx
export const metadata: Metadata = {
  title: "About",
  description: "What this page is about, in one sentence.",
};

// app/pricing/page.tsx
// A page that sets openGraph replaces the layout's whole object,
// so repeat the shared values with it.
export const metadata: Metadata = {
  title: "Pricing",
  openGraph: {
    type: "website",
    siteName: "Example",
    locale: "en_US",
    url: "./",
    images: [{ url: "/og-image.png", width: 1200, height: 630 }],
    title: "Pricing: free for small teams",
  },
};