Next.js Metadata

Next.js Metadata: Managing SEO Page Titles, Open Graph, and Metadata API

Next.js Metadata guides developers through setting page titles, description tags, and social media Open Graph cards using the Metadata API.

Next.js manages document head tags using exported static objects or dynamic metadata functions inside page.tsx and layout.tsx files.

Static Metadata Definitions

Export a static metadata object from any layout.tsx or page.tsx file:

// app/about/page.tsx
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'About Us | My Application',
  description: 'Learn more about our team, vision, and technology stack.',
  openGraph: {
    title: 'About Us | My Application',
    description: 'Learn more about our team and vision.',
    images: ['/images/about-og.jpg'],
  },
};

export default function AboutPage() {
  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold">About Our Company</h1>
    </div>
  );
}

Dynamic Metadata Generation

For dynamic routes like blog posts or product listings, export an async generateMetadata function:

// app/products/[id]/page.tsx
import { Metadata } from 'next';

interface Props {
  params: Promise<{ id: string }>;
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { id } = await params;
  const product = await fetch(`https://api.example.com/products/${id}`).then((res) => res.json());

  return {
    title: `${product.title} - Online Store`,
    description: product.summary,
    openGraph: {
      title: product.title,
      images: [product.imageUrl],
    },
  };
}

export default async function ProductPage({ params }: Props) {
  const { id } = await params;
  return <div>Viewing product ID: {id}</div>;
}

Dynamic Sitemap and Robots Files

Create sitemap.ts inside app/ to generate a dynamic XML sitemap automatically:

// app/sitemap.ts
import { MetadataRoute } from 'next';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  return [
    {
      url: 'https://example.com',
      lastModified: new Date(),
    },
    {
      url: 'https://example.com/about',
      lastModified: new Date(),
    },
  ];
}

Best Practices

• Set Metadata Base URLs: Configure metadataBase in your Root Layout to resolve relative social share image paths cleanly.
• Inherit Parent Layout Metadata: Nested routes inherit metadata from parent layouts automatically; override only necessary fields.

Summary

The Next.js Metadata API provides type-safe control over SEO head tags and social share previews, ensuring search engine visibility across all application routes.