LogoENEnglish

A Complete Guide to Using metadata and generateMetadata in Next.js

In modern versions of Next.js, managing page metadata is more powerful and intuitive than ever. Metadata is automatically injected into the <head> of your pages and plays a vital role in SEO, social sharing, and user experience. This guide explains the two main ways to define metadata: using the static metadata object and the dynamic generateMetadata function.

metadatagenerateMetadataSEOOpen Graph

~2 دقیقه مطالعه · آخرین به‌روزرسانی ۱۰ آبان ۱۴۰۴

1. Static Metadata with metadata


If your page metadata is static and doesn’t rely on runtime data, you can define it directly in layout.tsx or page.tsx:

export const metadata: Metadata = {
  title: 'Home Page',
  description: 'A brief description of this page',
}

Next.js will automatically render this metadata in the <head> of your page.


2. Dynamic Metadata with generateMetadata


If your metadata depends on route parameters, external APIs, or parent metadata, use the generateMetadata function:

export async function generateMetadata({ params }, parent) {
  const product = await fetch(`https://example.com/api/products/${params.id}`).then(res => res.json())
  const previousImages = (await parent).openGraph?.images || []

  return {
    title: product.title,
    openGraph: {
      images: ['/product-image.jpg', ...previousImages],
    },
  }
}

3. Good to Know


  • You can only export either metadata or generateMetadata from a route segment — not both
  • generateMetadata is only supported in Server Components
  • fetch calls inside generateMetadata are automatically memoized
  • If your metadata doesn’t rely on runtime data, prefer using the static metadata object

4. Supported Metadata Fields


  • title: Page title
  • description: Meta description for search engines
  • openGraph: Social sharing metadata
  • twitter: Twitter Card settings
  • robots: Indexing rules
  • icons: Favicon and Apple Touch icons
  • manifest: Path to manifest.json
  • verification: Site verification for Google, Yahoo, Yandex
  • appLinks: Deep linking for mobile apps
  • alternates: Canonical URLs, language variants, RSS feeds

5. Using metadataBase


To define a base URL for relative metadata fields like Open Graph images or canonical links:

export const metadata: Metadata = {
  metadataBase: new URL('https://example.com'),
  openGraph: {
    images: '/og-image.png', // becomes https://example.com/og-image.png
  },
}

6. Combined Example


export const metadata: Metadata = {
  title: {
    default: 'My Shop',
    template: '%s | My Shop',
  },
  description: 'Best products at the best prices',
  openGraph: {
    title: 'My Shop',
    description: 'Shop online with high quality',
    url: 'https://example.com',
    siteName: 'My Shop',
    images: [
      {
        url: 'https://example.com/og.png',
        width: 1200,
        height: 630,
      },
    ],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'My Shop',
    description: 'Shop online with high quality',
    creator: '@myshop',
    images: ['https://example.com/og.png'],
  },
}

Summary


  • Use metadata for static metadata
  • Use generateMetadata for dynamic metadata based on route or external data
  • Metadata is automatically injected into <head> — no need for next/head
  • Use metadataBase to simplify absolute URLs

نوشته و پژوهش‌شده توسط دکتر شاهین صیامی

مقالات مرتبط

Advanced Client-Side Routing and Performance Hooks in Next.js

Next.js provides a rich set of client-side hooks and caching utilities that empower developers to build dynamic, responsive, and secure applications. From reading route parameters to tracking navigation state and reporting performance metrics, this guide walks you through the most important tools available in the App Router.

ادامه

Handling Authorization and Caching in Next.js: A Developer’s Guide

Next.js introduces powerful experimental features for access control and smart caching. This guide covers the unauthorized() function for custom 401 handling, unstable_cache for persistent memoization, updateTag for instant cache invalidation, and useLinkStatus for inline navigation feedback. Learn how to use these tools to build secure, performant, and responsive applications.

ادامه

redirect and refresh in Next.js — Smart Redirects and Client Refreshing via Server Actions

The redirect function in Next.js allows you to navigate users to a new route, returning either a 307 or 303 HTTP response depending on context. It works in Server Components, Client Components, Route Handlers, and Server Actions. The refresh function is used exclusively within Server Actions to refresh the client router. This article explains how both functions work, with practical examples and key considerations.

ادامه

NextRequest and NextResponse in Next.js — Managing Cookies, Headers, Redirects, and Rewrites

Next.js extends the native Web Request and Response APIs with NextRequest and NextResponse, offering powerful tools for managing cookies, headers, redirects, rewrites, and JSON responses. These utilities simplify server-side logic and improve control over routing, personalization, and security. This guide walks through their capabilities with practical examples and best practices.

ادامه

headers, ImageResponse, notFound, and permanentRedirect in Next.js — Request Handling, Dynamic Images, Errors, and Redirects

Next.js offers powerful tools for handling HTTP requests and responses in Server Components. The headers function lets you read incoming request headers. ImageResponse allows you to generate dynamic images using JSX and CSS. The notFound function renders a custom 404 page, and permanentRedirect enables permanent redirection to another route. This article explains how to use each feature with practical examples.

ادامه

generateStaticParams in Next.js — Prebuilding Dynamic Routes at Build Time

The generateStaticParams function in Next.js allows you to prebuild dynamic routes at build time instead of rendering them on-demand. It replaces getStaticPaths from the Pages Router and supports single, multiple, and catch-all segments. You can generate routes from the bottom up or top down, and control fallback behavior using dynamicParams. This article explains how to use generateStaticParams with practical examples and configuration tips.

ادامه
مقاله‌ی قبلیمقاله‌ی بعدی