Free Next.js Metadata API Generator

Next.js App Router (app/page.tsx or app/layout.tsx)

import type { Metadata } from "next";

export const metadata: Metadata = {
  metadataBase: new URL("https://example.com"),
  title: "Free Next.js Metadata Generator | Acme",
  description: "Generate strongly-typed Next.js App Router Metadata objects with canonical URLs, Open Graph images, Twitter cards, and robots directives.",
  alternates: {
    canonical: "/tools/nextjs-metadata",
  },
  openGraph: {
    title: "Free Next.js Metadata Generator | Acme",
    description: "Generate strongly-typed Next.js App Router Metadata objects with canonical URLs, Open Graph images, Twitter cards, and robots directives.",
    url: "https://example.com/tools/nextjs-metadata",
    siteName: "Acme",
    type: "website",
    images: [
      {
        url: "https://example.com/og-image.png",
        width: 1200,
        height: 630,
        alt: "Free Next.js Metadata Generator | Acme",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "Free Next.js Metadata Generator | Acme",
    description: "Generate strongly-typed Next.js App Router Metadata objects with canonical URLs, Open Graph images, Twitter cards, and robots directives.",
    images: ["https://example.com/og-image.png"],
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
};