Metadata and SEO

Next.js provides built-in support for managing metadata in your application. You can optimize your pages for search engines and social media with proper meta tags.

Think of metadata as your page's business card. It tells search engines and social platforms what your page is about and how to display it.

Static Metadata

You can export a metadata object from your page components:

// app/page.js
export const metadata = {
  title: 'My Awesome App',
  description: 'This is my amazing Next.js application',
  openGraph: {
    title: 'My Awesome App',
    description: 'This is my amazing Next.js application',
    images: '/og-image.jpg',
  },
};

export default function Home() {
  return <div>Welcome to my app</div>;
}

This metadata is automatically rendered as HTML head tags.

Dynamic Metadata

For dynamic pages, you can use the generateMetadata function:

// app/blog/[slug]/page.js
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

export default async function BlogPost({ params }) {
  const post = await getPost(params.slug);
  return <article>{post.title}</article>;
}

This generates metadata based on the page's content, perfect for blogs and dynamic content.

Layout Metadata

Metadata can be defined in layouts and will be inherited by child pages:

// app/layout.js
export const metadata = {
  title: {
    default: 'My App',
    template: '%s | My App',
  },
  description: 'My application description',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Child pages can override the title using the template pattern.

SEO Best Practices

Follow these guidelines for better SEO:

Unique titles: Every page should have a unique, descriptive title.

Meta descriptions: Write compelling descriptions that encourage clicks.

Open Graph tags: Optimize how your pages appear on social media.

Structured data: Use JSON-LD for rich search results.

Good metadata helps search engines understand your content and improves click-through rates.

← Previous Font Optimization

Next → Code Splitting