What is the best way to add dynamic metadata in Next.js?

Use the App Router's generateMetadata function when values depend on route parameters or fetched content. Return the title, description, canonical URL, Open Graph fields, and robots directives from the same trusted data used to render the page.

Can Next.js generate SEO titles from a CMS or API?

Yes. Fetch the page data using the route parameter, then return its SEO fields from generateMetadata. Validate missing, draft, and unpublished records so invalid pages do not receive misleading metadata.

Should every Next.js page have a unique meta description?

Important indexable pages should have descriptions that accurately summarize their own content. Avoid copying one generic description across every article, category, or landing page.

Does dynamic metadata replace other Next.js SEO work?

No. Metadata works alongside crawlable content, internal links, canonical URLs, sitemaps, structured data, accessibility, and performance improvements.

← RankWorker Blog

Veselin StoyanovAugust 23, 202611 min read

Next.js Metadata SEO: Dynamic Meta Tags with App Router

Learn how to use the Next.js App Router Metadata API to generate dynamic SEO titles, descriptions, canonical URLs, and social tags.

Next.js SEO Technical SEO

Dynamic metadata connects Next.js page data with search and social previews.

Next.js Metadata SEO: How to Dynamically Optimize Meta Tags

A page can look perfect in a browser and still send weak signals to search engines if its metadata is missing, duplicated, or disconnected from the page content. For a Next.js website, the App Router Metadata API provides a structured way to manage titles, descriptions, canonical URLs, Open Graph data, and other search-facing information.

This guide explains how to use Next.js metadata SEO techniques to create metadata that changes with each article, category, or product page. You will also see how a content API can supply optimized titles and descriptions to the frontend without hardcoding every page manually.

What is Next.js metadata SEO?

Next.js metadata SEO is the practice of using Next.js metadata features to generate the HTML signals that search engines and social platforms read from your pages. These signals include the document title, meta description, canonical URL, robots directives, Open Graph properties, and Twitter card information.

In the App Router, you can define metadata in a layout or page with a static metadata object. When values depend on route parameters or fetched content, you can use the generateMetadata function instead.

Metadata does not replace useful page content, internal links, technical accessibility, or structured data. It supports those elements by helping search engines understand the page and helping users decide whether a result is relevant.

Static versus dynamic metadata in the App Router

Use static metadata when every page in a route segment shares the same values. A root layout is a good place for site-wide defaults:

// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  metadataBase: new URL('https://www.example.com'),
  title: {
    default: 'Example Blog',
    template: '%s | Example Blog',
  },
  description: 'Practical guides for building better websites.',
  openGraph: {
    type: 'website',
    siteName: 'Example Blog',
  },
}

export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

A layout can establish defaults, while a nested page can override only the values that need to change. This keeps your implementation consistent and prevents repeated metadata configuration.

Use dynamic metadata when the title, description, image, or canonical URL comes from a CMS, API, database, or route parameter. For example, a blog post route might use a slug to request one article and build metadata from its fields.

Build dynamic article metadata with `generateMetadata`

The following example uses the App Router and a fictional content endpoint. Replace the endpoint and response shape with your own backend or content source.

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next'
import { notFound } from 'next/navigation'

type Article = {
  title: string
  description: string
  slug: string
  coverImage?: string
  publishedAt?: string
}

async function getArticle(slug: string): Promise<Article | null> {
  const response = await fetch(
    `https://content.example.com/articles/${encodeURIComponent(slug)}`,
    { next: { revalidate: 300 } }
  )

  if (!response.ok) return null
  return response.json()
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>
}): Promise<Metadata> {
  const { slug } = await params
  const article = await getArticle(slug)

  if (!article) {
    return {
      title: 'Article not found',
      robots: { index: false, follow: false },
    }
  }

  const canonicalUrl = `https://www.example.com/blog/${article.slug}`

  return {
    title: article.title,
    description: article.description,
    alternates: {
      canonical: canonicalUrl,
    },
    openGraph: {
      type: 'article',
      url: canonicalUrl,
      title: article.title,
      description: article.description,
      images: article.coverImage ? [{ url: article.coverImage }] : undefined,
      publishedTime: article.publishedAt,
    },
    twitter: {
      card: 'summary_large_image',
      title: article.title,
      description: article.description,
      images: article.coverImage ? [article.coverImage] : undefined,
    },
  }
}

export default async function ArticlePage({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const article = await getArticle(slug)

  if (!article) notFound()

  return <article>{article.title}</article>
}

The key principle is to use the same trusted article object for both the visible page and its metadata. That reduces the risk of a mismatch where the search snippet describes one topic while the page displays another.

For current App Router syntax and supported metadata fields, consult the official Next.js Metadata API documentation.

How to create better dynamic SEO titles

A dynamic title should identify the page clearly and match the search intent behind it. For an article, a useful pattern is:

Primary topic: clear benefit or angle | Brand

For example:

Next.js Metadata SEO: Dynamic Meta Tags Guide | Example Blog

Avoid generating titles by appending the same keyword several times. Instead, make the title specific to the page. A post about canonical URLs should not receive the same title template as a post about image optimization.

You can keep brand formatting in the root layout and return only the page-specific portion from generateMetadata:

export const metadata: Metadata = {
  title: {
    template: '%s | Example Blog',
    default: 'Example Blog',
  },
}

Then a page can return title: 'How to Configure Canonical URLs'. Next.js combines the values according to the layout configuration.

How to generate useful meta descriptions

A meta description should summarize the page in plain language and give the searcher a reason to choose it. For programmatic content, store a description with each article instead of deriving one from an arbitrary slice of body text.

A reliable content workflow should check that each description:

Describes the actual page rather than the website generally.
Includes the main topic naturally.
Avoids repetitive keyword patterns.
Is not empty or duplicated across many URLs.
Does not include internal notes, placeholders, or unsupported claims.

If an article does not have a usable description, generate a fallback from a controlled summary field. Do not blindly use the first characters of Markdown or HTML because that can produce broken sentences, headings, or formatting artifacts.

Add canonical URLs and robots directives

Canonical URLs help communicate the preferred version of a page when similar URLs can be reached through different paths or query parameters. In Next.js, you can define a canonical URL with alternates.canonical.

return {
  alternates: {
    canonical: `https://www.example.com/blog/${article.slug}`,
  },
}

Build canonical URLs from a consistent site origin and normalized slug. Avoid using the incoming request URL without validation, especially if your application can be accessed through multiple hostnames.

Robots directives should reflect the page's publishing state. A missing article, preview page, or internal search result may need different indexing behavior from a published article. For example:

return {
  title: article.title,
  robots: article.isPublished
    ? { index: true, follow: true }
    : { index: false, follow: false },
}

Do not use noindex as a substitute for fixing duplicate or low-quality content. First decide whether the page should exist, be consolidated, or be improved.

Search metadata and social metadata overlap, but they serve different presentation contexts. Open Graph fields control how many platforms preview a shared URL, while Twitter card fields define the card style and content for supported clients.

For article pages, provide:

A page-specific title.
A concise description.
The canonical page URL.
A relevant cover image.
Article type and publication time when available.

Keep image URLs absolute and make sure the referenced image is publicly accessible. If a page has no suitable image, omit the field rather than pointing to a missing or unrelated asset.

Next.js also supports file-based metadata such as favicons, robots files, and sitemap files. Review the official metadata and OG images guide when deciding whether a value belongs in code, a route handler, or a file in the app structure.

Connect RankWorker content to a Next.js frontend

If your articles are managed outside the Next.js repository, the frontend needs a dependable way to receive the article data used for both rendering and metadata. RankWorker's official Next.js integration provides the @rankworker/nextjs-blog library for adding a customizable blog to an existing Next.js application. The integration supports local MDX files or a managed RankWorker content source, and its page foundation includes canonical metadata, Open Graph tags, JSON-LD, and blog and image sitemaps according to the integration documentation.

The RankWorker page also describes using the Direct API and webhooks for automated content delivery. That makes the integration relevant when your workflow needs articles and their SEO fields to reach a Next.js blog without manually copying each title and description into frontend code. Review the RankWorker Next.js integration before implementation because the exact setup depends on your selected content source.

A common architecture looks like this:

Plan an article around a target query and search intent.
Generate or edit the article and its metadata in the content system.
Deliver the article data to the Next.js application through the configured integration.
Read the title, description, slug, image, and publication fields in the route.
Return those values from generateMetadata.
Render the same article data as the visible page.
Validate the final HTML, canonical URL, social image, and indexability state.

The important implementation detail is data consistency. If the API returns an optimized title and description, do not maintain a second manually edited metadata object for the same article unless you have a clear override rule.

Common Next.js metadata SEO mistakes

Fetching metadata from a different source than the page

This can create mismatched titles, stale descriptions, or metadata for the wrong article. Reuse the same normalized content function where practical, while considering caching so the page and metadata do not make unnecessary duplicate requests.

Hardcoding every article route

Hardcoded metadata becomes difficult to maintain as the blog grows. Store page-specific SEO fields with the content and generate them from route data.

Using the article title as the description

A title and description have different jobs. The title identifies the page quickly, while the description should explain its value and scope.

Forgetting error and draft states

A route that returns a generic page for a missing slug can create thin or duplicate URLs. Return an appropriate not-found response and set indexing directives deliberately for previews or unpublished content.

Treating metadata as the entire SEO strategy

Metadata helps search engines interpret and present a page, but rankings also depend on content quality, crawlability, internal linking, rendering, performance, and the overall authority of the site. Use metadata as one layer in a complete Next.js SEO implementation.

A practical metadata checklist

Before publishing a dynamic Next.js page, check the following:

The title changes correctly for the route.
The description matches the visible page.
The canonical URL is absolute and points to the preferred URL.
Open Graph title, description, and image are page-specific.
Drafts, previews, and missing pages have intentional robots behavior.
The metadata is generated from trusted, validated content fields.
The page renders meaningful HTML content for crawlers and users.
Slugs are stable and do not change whenever metadata is edited.
Social previews use an accessible image with the correct dimensions.
The final response does not expose internal prompts, API credentials, or private content fields.

Conclusion

The Next.js App Router makes dynamic metadata practical for content-driven websites. Use static metadata for shared defaults, generateMetadata for route-specific values, and a single trusted content object for both metadata and page rendering.

For a growing next js blog, the scalable approach is to keep SEO fields close to the content workflow and deliver them consistently to the frontend. With the right API or integration, every article can receive its own title, description, canonical URL, and social metadata without turning your Next.js codebase into a collection of manually maintained page exceptions.