Metadata Configuration

🏷️ Next.js Metadata Configuration: Your Website’s Name Tag

Imagine you’re at a big party with hundreds of people. Everyone is wearing a name tag that tells others who they are, what they do, and why they should come talk to them. Websites work the same way! When your website goes to the big party called “The Internet,” it needs its own special name tag so search engines (like Google) and social media can introduce it properly.

In Next.js, we call this name tag Metadata. Let’s learn how to make the best name tag ever! 🎉

🎭 The Metadata API: Your Name Tag Factory

The Metadata API is like a factory that creates name tags for your website. Next.js gives you special tools to make these name tags easily.

Think of it this way:

• Your website = A person at a party
• Metadata = The name tag they wear
• Metadata API = The machine that prints the name tags

How It Works

The Metadata API lets you add information like:

• What’s your page’s title?
• What’s your page about?
• What picture should show when shared?

// This is how we use the API
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My Awesome Page',
  description: 'This page is cool!'
}

📝 Static Metadata: The Pre-Printed Name Tag

Static Metadata is like printing your name tag before the party. You know exactly what it will say, and it never changes.

When to Use Static Metadata?

Use it when your page content stays the same for everyone:

• Your homepage
• Your “About Us” page
• Your “Contact” page

Example: A Static Name Tag

// app/about/page.tsx

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'About Our Company',
  description: 'Learn about our story'
}

export default function AboutPage() {
  return <h1>About Us</h1>
}

This page will always have the same title: “About Our Company”. Simple and easy! ✨

🔄 Dynamic Metadata: The Custom Name Tag

What if you’re at a party where your name tag needs to change based on who asks? That’s Dynamic Metadata!

Real Life Example

Imagine a store with 1000 products. Each product page needs its own unique name tag:

• Product 1: “Blue Shoes - $50”
• Product 2: “Red Hat - $25”

You can’t print 1000 name tags by hand! You need a machine that creates them automatically.

graph TD
    A["User visits product page"] --> B["Check which product"]
    B --> C["Create custom metadata"]
    C --> D["Show the right name tag"]

⚙️ generateMetadata Function: The Smart Name Tag Maker

The generateMetadata function is your smart helper that creates name tags on the fly. It’s like having a robot that looks at your data and makes the perfect name tag!

How It Works

// app/products/[id]/page.tsx

import type { Metadata } from 'next'

// The smart name tag maker
export async function generateMetadata(
  { params }: { params: { id: string } }
): Promise<Metadata> {
  // Get product info from database
  const product = await getProduct(params.id)

  return {
    title: product.name,
    description: product.summary
  }
}

export default function ProductPage() {
  return <div>Product Details Here</div>
}

The Magic Explained 🪄

1. Someone visits /products/shoe-123
2. generateMetadata wakes up
3. It fetches the shoe info from your database
4. It creates a perfect name tag: “Cool Running Shoes”
5. Google sees this and knows what the page is about!

📸 OpenGraph Metadata: The Social Media Photo

When you share a link on Facebook, LinkedIn, or other sites, you see a nice preview with an image, title, and description. That’s OpenGraph Metadata!

Think of It Like This

OpenGraph is like attaching a photo to your name tag. Instead of just text, people can see a picture of you!

graph TD
    A["Share link on Facebook"] --> B["Facebook reads OpenGraph"]
    B --> C["Shows nice preview"]
    C --> D["People want to click!"]

Example: Making a Beautiful Share Preview

export const metadata: Metadata = {
  title: 'Amazing Recipe',
  description: 'Best chocolate cake ever',
  openGraph: {
    title: 'Amazing Chocolate Cake',
    description: 'Learn to bake the best cake!',
    images: ['/cake-photo.jpg'],
    type: 'article'
  }
}

What Each Part Means

🐦 Twitter Metadata: The Tweet-Ready Card

Twitter has its own special name tag system called Twitter Cards. It’s like OpenGraph’s cousin, but specifically for Twitter!

Why Do We Need Both?

Twitter sometimes prefers its own tags. So we give Twitter exactly what it wants!

Example: Twitter-Perfect Sharing

export const metadata: Metadata = {
  title: 'My Blog Post',
  twitter: {
    card: 'summary_large_image',
    title: 'Read My Amazing Blog Post',
    description: 'You will love this!',
    images: ['/blog-banner.jpg'],
    creator: '@myhandle'
  }
}

Twitter Card Types

📱 Viewport Export: The Screen Size Helper

The viewport tells phones and tablets how to display your page. It’s like giving instructions: “Hey phone, here’s how big to make things!”

Without Viewport

Imagine reading a book meant for giants. The text is huge, you have to scroll sideways, and everything is a mess. That’s a website without viewport settings!

With Viewport

Everything fits perfectly on your screen. Magic! ✨

Example: Perfect Mobile Display

// app/layout.tsx

export const viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1
}

What Each Part Means

🎨 Icons Metadata: Your Website’s Face

Icons are the tiny pictures that represent your website. You see them in:

• Browser tabs
• Bookmarks
• Phone home screens
• Search results

Think of It Like This

Icons are like your website’s profile picture. When someone saves your site to their phone, they see your icon!

Example: Adding Icons

export const metadata: Metadata = {
  icons: {
    icon: '/favicon.ico',
    shortcut: '/shortcut-icon.png',
    apple: '/apple-touch-icon.png',
    other: {
      rel: 'apple-touch-icon-precomposed',
      url: '/apple-touch-icon-precomposed.png'
    }
  }
}

Icon Types Explained

🏆 Putting It All Together

Here’s a complete example using everything we learned:

// app/blog/[slug]/page.tsx

import type { Metadata } from 'next'

// Dynamic metadata for each blog post
export async function generateMetadata(
  { params }: { params: { slug: string } }
): Promise<Metadata> {
  const post = await getPost(params.slug)

  return {
    title: post.title,
    description: post.summary,

    // Social sharing (OpenGraph)
    openGraph: {
      title: post.title,
      description: post.summary,
      images: [post.coverImage],
      type: 'article'
    },

    // Twitter sharing
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      images: [post.coverImage]
    },

    // Website icons
    icons: {
      icon: '/favicon.ico',
      apple: '/apple-icon.png'
    }
  }
}

🎯 Quick Summary

🌟 You Did It!

Now you understand how to give your Next.js website the perfect name tag! Your pages will:

• ✅ Look great in Google search results
• ✅ Have beautiful social media previews
• ✅ Work perfectly on mobile phones
• ✅ Have nice icons everywhere

Remember: Good metadata = More people finding and clicking your website!

You’re now a Metadata Master! 🎓