Before you launch your Next.js application into the world, there’s one essential concept you need to master: SEO and metadata.

Metadata determines how your site:

• Appears on Google
• Displays when shared on social platforms
• Communicates important Open Graph + Twitter Card information
• Helps search engines crawl your pages

Next.js provides a powerful, modern, and intuitive system for handling metadata. In this guide, we’ll break down:

• Config-based metadata (static & dynamic)
• File-based metadata (favicon, robots, sitemap, OG images)
• Priority rules
• How to make your app SEO-friendly and shareable

Let’s get started.

1. What is Metadata in Next.js?

Metadata controls:

• Page titles
• Description tags
• Social sharing cards
• Open Graph images
• Icons and favicons
• Robots & sitemap behavior

This directly affects how your content is perceived by:

• Users
• Search engines
• Social media platforms
• Messaging apps

Next.js makes this extremely easy using two approaches:

1. Config-based metadata → defined in code
2. File-based metadata → defined via special files in /app

Both are powerful, but serve different use cases.

2. Config-Based Metadata (Static)

This is the most common approach.

In any layout.tsx or page.tsx, you can export a simple metadata object:

export const metadata = {
  title: "My Awesome Page",
  description: "This is an example of SEO-friendly metadata in Next.js.",
  openGraph: {
    title: "My Awesome Page",
    description: "Learn how to optimize SEO in Next.js.",
    images: ["/og-image.png"],
  },
};

Where should you place this?

• Root layout → sets global defaults
• Route layout/page → overrides global metadata automatically

Why config-based metadata is great:

✔ Easy to control ✔ Versionable (inside code) ✔ Per-route metadata override ✔ Works perfectly for static pages

But what if you need metadata that changes based on dynamic content?

3. Dynamic Metadata — generateMetadata()

Dynamic routes (like blogs, product pages, user profiles) often need metadata based on the content they load.

Next.js solves this with:

export async function generateMetadata({ params }) {
  const post = await getPost(params.id);

  return {
    title: post.title,
    description: post.summary,
    openGraph: {
      images: [post.thumbnail],
    },
  };
}

Key points:

• Works inside any dynamic page.tsx
• Receives params (like [id])
• Can fetch data (async)
• Returns metadata dynamically

This is ideal for:

• Blog posts
• Product pages
• User profiles
• Dashboard routes
• Docs or CMS-driven content

4. File-Based Metadata (Highest Priority)

Next.js also supports metadata defined by simply placing special files in the app/ directory.

Examples:

Folder example:

app/
 ├── favicon.ico
 ├── icon.png
 ├── apple-touch-icon.png
 ├── opengraph-image.png
 ├── twitter-image.png
 ├── robots.txt
 └── sitemap.xml

Next.js automatically generates appropriate <meta> tags from these files.

🚨 Important:

File-based metadata overrides config-based metadata.

If you have:

• favicon.ico in app/ AND
• metadata.icon in code

The file wins.

5. Metadata Priority Rules

Understanding priority helps avoid conflicts:

1. File-based metadata (highest priority)
2. Route-level metadata (page.tsx, nested layout.tsx)
3. Root layout metadata (app/layout.tsx)

So:

• If a route exports its own metadata → it overrides the root.
• If file-based assets exist → they override everything.

6. Making Your Site Shareable & SEO-Friendly

By combining:

• static metadata
• dynamic metadata
• file-based metadata

You ensure your website:

• Looks great when shared
• Displays rich previews on social apps
• Is fully crawlable by search engines
• Has optimized indexing
• Has unique metadata for every important page

This results in:

✔ Better visibility ✔ Higher click-through rates ✔ Stronger SEO performance ✔ Professional branding on social platforms

7. Conclusion: You’re Ready to Build

You’ve now learned:

• How metadata works in Next.js
• How to optimize SEO
• How to generate rich social previews
• How to set dynamic metadata for blog posts/products
• How file-based metadata works and its priority
• How to structure metadata across layouts and routes

With all this in place, you’re now fully prepared to build and deploy a professional, fully optimized Next.js application.